GridColDef Interface
Column Definition interface.
Import
import { GridColDef } from '@mui/x-data-grid-pro';
// or
import { GridColDef } from '@mui/x-data-grid';
Properties
Name | Type | Default | Description |
---|---|---|---|
align? | GridAlignment | Allows to align the column values in cells. | |
cellClassName? | GridCellClassNamePropType | Class name that will be added in cells for that column. | |
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 GridRowData values. | |
filterable? | boolean | true |
If true , the column is filterable. |
filterOperators? | GridFilterOperator[] | Allows setting the filter operators for this column. | |
flex? | number | If set, it indicates that a column has fluid width. Range [0, ∞). | |
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. | |
hide? | boolean | false |
If true , hide the column. |
hideSortIcons? | boolean | false |
Toggle the visibility of the sort icons. |
minWidth? | number | 50 |
Sets the minimum width of a column. |
renderCell? | (params: GridRenderCellParams) => ReactNode | Allows to override the component rendered as cell for this column. | |
renderEditCell? | (params: GridRenderEditCellParams) => ReactNode | Allows to override the component rendered in edit cell mode for this column. | |
renderHeader? | (params: GridColumnHeaderParams) => 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 | A comparator function used to sort rows. | |
type? | string | 'string' |
Type allows to merge this object with a default definition GridColDef. |
valueFormatter? | (params: GridValueFormatterParams) => GridCellValue | Function that allows to apply a formatter before rendering its value. | |
valueGetter? | (params: GridValueGetterParams) => GridCellValue | Function that allows to get a specific data instead of field to render in the cell. | |
valueOptions? | (string | number | { label: string; value: any })[] | To be used in combination with type: 'singleSelect' . This is an array of the possible cell values and labels. |
|
valueParser? | (value: GridCellValue, params?: GridCellParams) => GridCellValue | Function that takes the user-entered value and converts it to a value used internally. | |
width? | number | 100 |
Set the width of the column. |