GridColDef API

Column Definition interface.

Demos

For examples and details on the usage, check the following pages:

Column definition

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

field

The column identifier. It's used to map with GridRowModel values.

Type:string

aggregableOptional

If true, the cells of the column can be aggregated based.

Type:boolean

Default:true

alignOptional

Allows to align the column values in cells.

Type:GridAlignment

availableAggregationFunctionsOptional

Limit the aggregation function usable on this column.
By default, the column will have all the aggregation functions that are compatible with its type.

Type:string[]

cellClassNameOptional

Class name that will be added in cells for that column.

Type:GridCellClassNamePropType<R, V>

colSpanOptional

Number of columns a cell should span.

Type:number | GridColSpanFn<R, V, F>

Default:1

descriptionOptional

The description of the column rendered as tooltip if the column header name is not fully displayed.

Type:string

disableColumnMenuOptional

If true, the column menu is disabled for this column.

Type:boolean

Default:false

disableExportOptional

If true, this column will not be included in exports.

Type:boolean

Default:false

disableReorderOptional

If true, this column cannot be reordered.

Type:boolean

Default:false

displayOptional

Display mode for the cell:
- 'text': For text-based cells (default)
- 'flex': For cells with HTMLElement children

Type:'text' | 'flex'

editableOptional

If true, the cells of the column are editable.

Type:boolean

Default:false

filterableOptional

If true, the column is filterable.

Type:boolean

Default:true

filterOperatorsOptional

Allows setting the filter operators for this column.

Type:GridFilterOperator<R, V, F>[]

flexOptional

If set, it indicates that a column has fluid width. Range [0, ∞).

Type:number

getApplyQuickFilterFnOptional

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.

Type:GetApplyQuickFilterFn<R, V>

getSortComparatorOptional

Allows to use a different comparator function depending on the sort direction.
Takes precedence over sortComparator.

Type:(sortDirection: GridSortDirection) => GridComparatorFn<V> | undefined

groupableOptional

If true, the rows can be grouped based on this column values (pro-plan only).
Only available in DataGridPremium.

Type:boolean

Default:true

groupingValueGetterOptional

Function that transforms a complex cell value into a key that be used for grouping the rows.

Type:GridGroupingValueGetter<R>

headerAlignOptional

Header cell element alignment.

Type:GridAlignment

headerClassNameOptional

Class name that will be added in the column header cell.

Type:GridColumnHeaderClassNamePropType

headerNameOptional

The title of the column rendered in the column header cell.

Type:string

hideableOptional

If false, removes the buttons for hiding this column.

Type:boolean

Default:true

hideSortIconsOptional

Toggle the visibility of the sort icons.

Type:boolean

Default:false

maxWidthOptional

Sets the maximum width of a column.

Type:number

Default:Infinity

minWidthOptional

Sets the minimum width of a column.

Type:number

Default:50

pastedValueParserOptional

Function that takes the clipboard-pasted value and converts it to a value used internally.

Type:GridPastedValueParser<R, V, F>

pinnableOptional

If false, the menu items for column pinning menu will not be rendered.
Only available in DataGridPro.

Type:boolean

Default:true

preProcessEditCellPropsOptional

Callback fired when the edit props of the cell changes.
It allows to process the props that saved into the state.

Type:(params: GridPreProcessEditCellProps) => GridEditCellProps | Promise<GridEditCellProps>

renderCellOptional

Allows to override the component rendered as cell for this column.

Type:(params: GridRenderCellParams<R, V, F>) => React.ReactNode

renderEditCellOptional

Allows to override the component rendered in edit cell mode for this column.

Type:(params: GridRenderEditCellParams<R, V, F>) => React.ReactNode

renderHeaderOptional

Allows to render a component in the column header cell.

Type:(params: GridColumnHeaderParams<R, V, F>) => React.ReactNode

renderHeaderFilterOptional

Allows to render a component in the column header filter cell.

Type:(params: GridRenderHeaderFilterProps) => React.ReactNode

resizableOptional

If true, the column is resizable.

Type:boolean

Default:true

sortableOptional

If true, the column is sortable.

Type:boolean

Default:true

sortComparatorOptional

A comparator function used to sort rows.

Type:GridComparatorFn<V>

sortingOrderOptional

The order of the sorting sequence.

Type:GridSortDirection[]

typeOptional

The type of the column.

Type:GridColType

Default:'singleSelect'

valueFormatterOptional

Function that allows to apply a formatter before rendering its value.

Type:GridValueFormatter<R, V, F>

valueGetterOptional

Function that allows to get a specific data instead of field to render in the cell.

Type:GridValueGetter<R, V, F>

valueParserOptional

Function that takes the user-entered value and converts it to a value used internally.

Type:GridValueParser<R, V, F>

valueSetterOptional

Function that allows to customize how the entered value is stored in the row.
It only works with cell/row editing.

Type:GridValueSetter<R, V, F>

widthOptional

Set the width of the column.

Type:number

Default:100