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.