Column definitions

interface StyleProps {
  width: number;
  minWidth: number;
  maxWidth: number;
  hidden: boolean;
  flex: number;
}
export interface MenuProps {
  column: boolean;
  pin: boolean;
  filter: boolean;
  grid: boolean;
}
interface ColumnDef extends Partial<StyleProps> {
    headerName: string;
    field: string;
    pinned?: PinType;
    children?: ColumnDef[];
    formatter?: (value: unknown) => string;
    styleFormatter?: (value: string & number, row: Row) => CSSProperties;
    dateFormat?: string;
    menu?: Partial<MenuProps>;
    aggregationLevel?: number;
    aggregation?: AggregationType;
}

💡

The column definitions are used to define the columns of the grid. It is a recursive structure, so you can define columns inside columns.

Check the example in the Example section.

Properties

headerName

Type	Required
`string`	`true`

The name of the column.

field

Type	Required
`string`	`true`

The field to be displayed in the column. Must match the field name in the data.

pinned [BETA]

⚠️

BETA FEATURE! This feature is still in beta and may not work as expected.

Type	Required
`PinType`	`false`

Whether the column is pinned. The pin type is one of the following:

left
right
top
bottom

Only left is supported at the moment.

children

Type	Required
`ColumnDef[]`	`false`

The children columns of the column.

formatter

Type	Required
`(value: unknown) => string`	`false`

A function to format the value of the column.

styleFormatter

Type	Required
`(value: string & number, row: Row) => CSSProperties`	`false`

A function to format the style of the column.

dateFormat

Type	Required
`string`	`false`

The date format to be used in the column. It uses the dayjs format

width

Type	Required
`number`	`false`

The width of the column.

minWidth

Type	Required
`number`	`false`

The minimum width of the column.

maxWidth

Type	Required
`number`	`false`

The maximum width of the column.

hidden

Type	Required
`boolean`	`false`

Whether the column is hidden.

flex

Type	Required
`number`	`false`

The flex value of the column. Follows the same rules as the flex property in CSS.

Type	Required
`Partial<MenuProps>`	`false`

aggregationLevel

Type	Required
`number`	`false`

If this level is set, data will be grouped by this column, on the specified level.

aggregation

Type	Required
`AggregationType`	`false`

The type of aggregation to be used for this column. If not set, it will not show any data in the grouped row.

The aggregation type is one of the following:

sum
avg
min
max
count

Check how it works in the Row Grouping section.

ContextualMenu Example