GridColDef Interface
Column Definition interface.
Import
import { GridColDef } from '@mui/x-data-grid-premium';
// or
import { GridColDef } from '@mui/x-data-grid-pro';
// or
import { GridColDef } from '@mui/x-data-grid';
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| aggregable? | boolean | true | If true, the cells of the column can be aggregated based. |
| align? | GridAlignment | Allows to align the column values in cells. | |
| availableAggregationFunctions? | string[] | Limit the aggregation function usable on this column. By default, the column will have all the aggregation functions that are compatible with its type. |
|
| cellClassName? | GridCellClassNamePropType | Class name that will be added in cells for that column. | |
| colSpan? | number | ((params: GridCellParams<V, R, F>) => number | undefined) | 1 | Number of columns a cell should span. |
| description? | string | The description of the column rendered as tooltip if the column header name is not fully displayed. | |
| disableColumnMenu? | boolean | false | If true, the column menu is disabled for this column. |
| disableExport? | boolean | false | If true, this column will not be included in exports. |
| disableReorder? | boolean | false | If true, this column cannot be reordered. |
| editable? | boolean | false | If true, the cells of the column are editable. |
| field | string | The column identifier. It's used to map with GridRowModel values. | |
| filterable? | boolean | true | If true, the column is filterable. |
| filterOperators? | GridFilterOperator<R, V, F>[] | Allows setting the filter operators for this column. | |
| flex? | number | If set, it indicates that a column has fluid width. Range [0, ∞). | |
| getApplyQuickFilterFn? | (value: any, colDef: GridStateColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => null | ((params: GridCellParams<V, R, F>) => boolean) | The callback that generates a filtering function for a given quick filter value. This function can return null to skip filtering for this value and column. |
|
| groupable? | boolean | true | If true, the rows can be grouped based on this column values (pro-plan only).Only available in DataGridPremium. |
| groupingValueGetter? | (params: GridGroupingValueGetterParams<V, R>) => GridKeyValue | null | undefined | Function that transforms a complex cell value into a key that be used for grouping the rows. | |
| headerAlign? | GridAlignment | Header cell element alignment. | |
| headerClassName? | GridColumnHeaderClassNamePropType | Class name that will be added in the column header cell. | |
| headerName? | string | The title of the column rendered in the column header cell. | |
| hideable? | boolean | true | If false, removes the buttons for hiding this column. |
| hideSortIcons? | boolean | false | Toggle the visibility of the sort icons. |
| maxWidth? | number | Infinity | Sets the maximum width of a column. |
| minWidth? | number | 50 | Sets the minimum width of a column. |
| pinnable? | boolean | true | If false, the menu items for column pinning menu will not be rendered.Only available in DataGridPro. |
| preProcessEditCellProps? | (params: GridPreProcessEditCellProps) => GridEditCellProps | Promise<GridEditCellProps> | Callback fired when the edit props of the cell changes. It allows to process the props that saved into the state. |
|
| renderCell? | (params: GridRenderCellParams<V, R, F>) => React.ReactNode | Allows to override the component rendered as cell for this column. | |
| renderEditCell? | (params: GridRenderEditCellParams<V>) => React.ReactNode | Allows to override the component rendered in edit cell mode for this column. | |
| renderHeader? | (params: GridColumnHeaderParams<V, R, F>) => React.ReactNode | Allows to render a component in the column header cell. | |
| resizable? | boolean | true | If true, the column is resizable. |
| sortable? | boolean | true | If true, the column is sortable. |
| sortComparator? | GridComparatorFn<V> | A comparator function used to sort rows. | |
| sortingOrder? | GridSortDirection[] | The order of the sorting sequence. | |
| type? | GridColType | 'actions' | Type allows to merge this object with a default definition GridColDef. |
| valueFormatter? | (params: GridValueFormatterParams<V>) => F | Function that allows to apply a formatter before rendering its value. | |
| valueGetter? | (params: GridValueGetterParams<any, R>) => V | Function that allows to get a specific data instead of field to render in the cell. | |
| valueOptions? | Array<ValueOptions> | ((params: GridValueOptionsParams<R>) => Array<ValueOptions>) | To be used in combination with type: 'singleSelect'. This is an array (or a function returning an array) of the possible cell values and labels. |
|
| valueParser? | (value: F | undefined, params?: GridCellParams<V, R, F>) => V | Function that takes the user-entered value and converts it to a value used internally. | |
| valueSetter? | (params: GridValueSetterParams<R, V>) => R | Function that allows to customize how the entered value is stored in the row. It only works with cell/row editing. |
|
| width? | number | 100 | Set the width of the column. |