{"record":{"id":"d309484ab0e29eb8","repo":"angular/components","slug":"could-not-find-column-with-id-columnname","errorCode":null,"errorMessage":"Could not find column with id \"${columnName}\".","messagePattern":"Could not find column with id \"(.+?)\"\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/cdk/table/table.ts","lineNumber":1291,"sourceCode":"   * Clears any existing content in the footer row outlet and creates a new embedded view\n   * in the outlet using the footer row definition.\n   */\n  private _forceRenderFooterRows() {\n    // Clear the footer row outlet if any content exists.\n    if (this._footerRowOutlet.viewContainer.length > 0) {\n      this._footerRowOutlet.viewContainer.clear();\n    }\n\n    this._footerRowDefs.forEach((def, i) => this._renderRow(this._footerRowOutlet, def, i));\n    this.updateStickyFooterRowStyles();\n  }\n\n  /** Adds the sticky column styles for the rows according to the columns' stick states. */\n  private _addStickyColumnStyles(rows: HTMLElement[], rowDef: BaseRowDef) {\n    const columnDefs = Array.from(rowDef?.columns || []).map(columnName => {\n      const columnDef = this._columnDefsByName.get(columnName);\n      if (!columnDef) {\n        throw getTableUnknownColumnError(columnName);\n      }\n      return columnDef;\n    });\n    const stickyStartStates = columnDefs.map(columnDef => columnDef.sticky);\n    const stickyEndStates = columnDefs.map(columnDef => columnDef.stickyEnd);\n    this._stickyStyler.updateStickyColumns(\n      rows,\n      stickyStartStates,\n      stickyEndStates,\n      !this.fixedLayout || this._forceRecalculateCellWidths,\n    );\n  }\n\n  /** Gets the list of rows that have been rendered in the row outlet. */\n  _getRenderedRows(rowOutlet: RowOutlet): HTMLElement[] {\n    const renderedRows: HTMLElement[] = [];\n\n    for (let i = 0; i < rowOutlet.viewContainer.length; i++) {","sourceCodeStart":1273,"sourceCodeEnd":1309,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/cdk/table/table.ts#L1273-L1309","documentation":"While applying sticky column styles, the table looked up a column name listed on the row definition's `columns` in its registered column defs map and found nothing. Some row's columns list references a column id with no matching matColumnDef.","triggerScenarios":"_addStickyColumnStyles: this._columnDefsByName.get(columnName) returns undefined for a name in rowDef.columns — e.g. displayedColumns contains 'actions' but no <ng-container matColumnDef=\"actions\"> exists, or a sticky column was renamed/removed.","commonSituations":"Typos between displayedColumns array and matColumnDef ids; dynamically generated column ids that differ (casing/whitespace); a column removed in refactor but still present in the component's displayedColumns; duplicated tables sharing one displayedColumns array.","solutions":["Make every entry in the row def's columns list have a matching <ng-container matColumnDef=\"id\">","Fix typos/case mismatches between displayedColumns and matColumnDef values","Remove stale ids from displayedColumns after deleting columns","Log diff: displayedColumns.filter(c => !declaredColumnIds.includes(c)) before render"],"exampleFix":"// before (component)\ndisplayedColumns = ['name', 'actoins']; // no matColumnDef=\"actoins\"\n// after\ndisplayedColumns = ['name', 'actions']; // matches <ng-container matColumnDef=\"actions\">","handlingStrategy":"validation","validationCode":"const declared = new Set(Array.from(el.querySelectorAll('[matColumnDef]')).map(c => c.getAttribute('matColumnDef')));\nconst missing = displayedColumns.filter(c => !declared.has(c));\nif (missing.length) throw new Error(`Columns missing matColumnDef: ${missing.join(', ')}`);","typeGuard":"function allColumnsDeclared(cols: string[], declared: Set<string>): cols is string[] {\n  return cols.every(c => declared.has(c));\n}","tryCatchPattern":"try {\n  this.cdr.detectChanges();\n} catch (e) {\n  if (/Could not find column with id/.test(e.message)) {\n    console.error('Add a matching <ng-container matColumnDef> for the missing id:', e.message);\n  }\n}","preventionTips":["Keep displayedColumns derived from the same config that renders matColumnDef containers","Unit-test that every id in displayedColumns has a declared column","Remove stale ids whenever deleting a column"],"tags":["angular","cdk-table","unknown-column","sticky"],"backgroundTag":"unknown-column-id","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}