angular/components · error

Could not find column with id "${columnName}".

Error message

Could not find column with id "${columnName}".

What it means

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.

Source

Thrown at src/cdk/table/table.ts:1291

   * Clears any existing content in the footer row outlet and creates a new embedded view
   * in the outlet using the footer row definition.
   */
  private _forceRenderFooterRows() {
    // Clear the footer row outlet if any content exists.
    if (this._footerRowOutlet.viewContainer.length > 0) {
      this._footerRowOutlet.viewContainer.clear();
    }

    this._footerRowDefs.forEach((def, i) => this._renderRow(this._footerRowOutlet, def, i));
    this.updateStickyFooterRowStyles();
  }

  /** Adds the sticky column styles for the rows according to the columns' stick states. */
  private _addStickyColumnStyles(rows: HTMLElement[], rowDef: BaseRowDef) {
    const columnDefs = Array.from(rowDef?.columns || []).map(columnName => {
      const columnDef = this._columnDefsByName.get(columnName);
      if (!columnDef) {
        throw getTableUnknownColumnError(columnName);
      }
      return columnDef;
    });
    const stickyStartStates = columnDefs.map(columnDef => columnDef.sticky);
    const stickyEndStates = columnDefs.map(columnDef => columnDef.stickyEnd);
    this._stickyStyler.updateStickyColumns(
      rows,
      stickyStartStates,
      stickyEndStates,
      !this.fixedLayout || this._forceRecalculateCellWidths,
    );
  }

  /** Gets the list of rows that have been rendered in the row outlet. */
  _getRenderedRows(rowOutlet: RowOutlet): HTMLElement[] {
    const renderedRows: HTMLElement[] = [];

    for (let i = 0; i < rowOutlet.viewContainer.length; i++) {

View on GitHub (pinned to 0411926e7d)

Solutions

1. Make every entry in the row def's columns list have a matching <ng-container matColumnDef="id">
2. Fix typos/case mismatches between displayedColumns and matColumnDef values
3. Remove stale ids from displayedColumns after deleting columns
4. Log diff: displayedColumns.filter(c => !declaredColumnIds.includes(c)) before render

Example fix

// before (component)
displayedColumns = ['name', 'actoins']; // no matColumnDef="actoins"
// after
displayedColumns = ['name', 'actions']; // matches <ng-container matColumnDef="actions">

const declared = new Set(Array.from(el.querySelectorAll('[matColumnDef]')).map(c => c.getAttribute('matColumnDef')));
const missing = displayedColumns.filter(c => !declared.has(c));
if (missing.length) throw new Error(`Columns missing matColumnDef: ${missing.join(', ')}`);

function allColumnsDeclared(cols: string[], declared: Set<string>): cols is string[] {
  return cols.every(c => declared.has(c));
}

try {
  this.cdr.detectChanges();
} catch (e) {
  if (/Could not find column with id/.test(e.message)) {
    console.error('Add a matching <ng-container matColumnDef> for the missing id:', e.message);
  }
}

When it happens

Trigger: _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.

Common situations: 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.

Related errors

• Could not find column with id "${columnId}".
• Conditional row definitions via the `when` input are not sup
• Missing definitions for header, footer, and row; cannot dete
• Duplicate column definition name provided: "${columnDef.name
• There can only be one default row without a when predicate f

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/d309484ab0e29eb8. Report an issue: GitHub.