LiveLoveApp logo
ServicesArchitecture ReviewWorkshopsCase StudiesBlogContact

Column Definition

Goals

  • Learn how to define columns in AG Grid.
  • Learn how to define a column's sorting behavior.
  • Learn how to define a column's filtering behavior.
  • Learn how to define a column's dragging behavior.
  • Learn how to define a column's pinning behavior.
  • Learn how to define a column's spanning behavior.

Column Definition

Each column is defined be a ColDef object.

By default, columns are positioned in the order that matches the column definition specified.

First, we bind the columnDefs input:

@Component({
  selector: 'app-grid',
  standalone: true,
  imports: [AgGridModule],
  template: `
    <ag-grid-angular
      class="ag-theme-material"
      [columnDefs]="columnDefs"
    ></ag-grid-angular>
  `
})
export class GridComponent {}

Next, we define the column definition:

interface RowData {
  name: string;
  price: string;
}

@Component({
  // code omitted
})
export class GridComponent {
  columnDefs = [
    { headerName: 'Name', field: 'name' },
    { headerName: 'Color', field: 'color' }
  ] as ColDef<RowData>[]
}

In the simplest form, a column definition specifies:

  • The headerName to be displayed as the column header
  • The field of the row object to get the data from. This can also accept a deep reference within the rowData object using dot-notation, e.g. user.account.firstName

Better TypeScript support in version 28+

Further, note we have specified the RowData interface for the TData generic type when using the ColDef interface.

This was recently introduced in version 28, and enables better type checking. 🎉