Angular Data Grid Columns Overview

Columns are defined by the columns array. Each entry maps a key in your data to a header and a cell. This page covers the essentials; per-column features live on their own pages: sizing, pinning, ordering & visibility and the column menu.

Defining columns

readonly columns: DataGridColumn[] = [
  { key: 'name', label: 'Name' },
  { key: 'email', label: 'Email' },
  { key: 'role', label: 'Role' }
]

<c-data-grid [columns]="columns" [items]="items" />

key is the property read from each item and doubles as the column id. label is the header text — it falls back to key when omitted.

Formatting values

Use formatter to transform the displayed value. It’s cheap and stays on the scroll hot path, so it’s the right tool for dates, numbers and currency:

{
  key: 'createdAt',
  label: 'Created',
  formatter: (value) => new Date(String(value)).toLocaleDateString()
}

formatter output is also what CSV export writes.

Rich cell content

Use an <ng-template cDataGridCell="key"> for full custom cell content — action buttons, badges, links. The template receives the item (implicit), index and value in its context and is never used for CSV export:

<c-data-grid [columns]="columns" [items]="items">
  <ng-template cDataGridCell="actions" let-item>
    <button type="button" class="btn btn-sm btn-primary" (click)="edit(item)">Edit</button>
  </ng-template>
</c-data-grid>

Import DataGridCellDirective alongside DataGridComponent to use the template. Use formatter or a cell template per column — formatter for values on the hot path, the template for interactive content. See the column API for every key.

Row and cell classes

rowClass (an input) and cellClass (a column key) return classes the grid adds next to its own on data rows and cells: colour a row by status, flag a value, mark edited rows. Both run on every render of the row, so the classes follow sorting, selection and new items on their own:

<c-data-grid [columns]="columns" [items]="items" [rowClass]="rowClass" />

readonly columns: DataGridColumn[] = [
  { key: 'name', label: 'Name' },
  { key: 'status', label: 'Status' },
  { key: 'stock', label: 'Stock', cellClass: ({ value }) => (value === 0 ? 'text-danger-emphasis fw-semibold' : undefined) },
]
readonly rowClass = ({ item }: DataGridRowClassContext) => (item['status'] === 'blocked' ? 'table-danger' : undefined)

rowClass receives { item, row, rowIndex } and cellClass { value, item, row, cell, column }; row and cell are the TanStack objects, so state such as row.getIsSelected() is there too. Return a string with one or more classes, or undefined. The grid’s own classes (data-grid-row-odd, table-active, data-grid-cell-selected) reflect its state, and returning one of them is not supported: it does not change that state, and whether the row or cell shows it differs by edition. Only data rows and cells get the classes, not the header, the filter row or the empty state. To mark edited cells, see Tracking edits.

A class only paints the row or the cell. Keep the meaning in text as well, as the status column does above, so it does not rest on colour alone, screen readers announce it, and it survives forced colours, which drop backgrounds.