LiveLoveApp logo
ServicesArchitecture ReviewWorkshopsCase StudiesBlogContact

Default Column Definition

Default Column Definition

To avoid unnecessary repetition, we can set a default column definition.

  • Every column inherits the default column definition
  • Each column definition can override default values

Let's look at an example:

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

  defaultColDef = {
    sortable: true
  } as ColDef;
}

Let's quickly review:

  • First, we define a new defaultColDef property that is a ColDef object.
  • Next, we bind to the defaultColDef input binding on the <ag-grid-angular> component.

Exercise

  1. Open the exercise on Stackblitz.
  2. Define a new defaultColDef property in the component class. The defaultColDef will be an object of type ColDef.
  3. Set the sortable property to true.
  4. Bind the defaultColDef property to the defaultColDef input on the <ag-grid-angular> component.
  5. Override the sortable property to false for one of the columns.

Solution

@Component({
  standalone: true,
  imports: [AgGridModule, CommonModule],
  template: `
    <ag-grid-angular
      class="ag-theme-material"
      [columnDefs]="columnDefs"
      [rowData]="rowData"
      [defaultColDef]="defaultColDef"
    ></ag-grid-angular>
  `
})
export class GridComponent {
  columnDefs = [
    { headerName: 'Name', field: 'name' },
    { headerName: 'Color', field: 'color', sortable: false },
  ] as ColDef<RowData>[];

  defaultColDef = {
    sortable: true
  } as ColDef;

  rowData: RowData[] = products;
}