Pinning

💡

BETA FEATURE This feature is currently in beta and may change in the future.

Use PinType enum to pin columns to set the position of the column.

You can pin columns to the left or right of the table. This is useful for keeping important columns in view while scrolling through the table.

const columnDefs: ColumnDef[] = [
  {
    headerName: 'COUNTRY',
    pinned: PinType.LEFT,
    field: 'country',
    width: 200,
    filterType: FilterType.STRING,
    menu: true,
    aggregationLevel: 1,
  },
  {
    headerName: 'USER',
    menu: false,
    children: [
      { headerName: 'NAME', field: 'name', width: 200, menu: { column: true, grid: true } },
      { headerName: 'AGE', field: 'age', width: 100, menu: true },
    ],
  },
  { headerName: 'USERS', field: 'id', aggregation: AggregationType.COUNT, flex: 1, pinned: PinType.LEFT },
  {
    headerName: 'MONTHS',
    menu: false,
    children: [
      ...months.map(
        (month): ColumnDef => ({
          headerName: month.toUpperCase(),
          field: month,
          aggregation: AggregationType.SUM,
          flex: 1,
          formatter: (value: number) => numeral(value).format('0,0 $'),
        })
      ),
    ],
  },
];

Overview Filtering