Skip to content
Edit this page
+

GridColDef Interface

Column Definition interface.

Demos

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<R, V> Class name that will be added in cells for that column.
colSpan? number | ((params: GridCellParams<R, V, 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? GetApplyQuickFilterFnLegacy<R, V, F> 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.
getApplyQuickFilterFnV7? GetApplyQuickFilterFnV7<R, V> 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<R, V>) => 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.
pastedValueParser? (value: string, params: GridCellParams<R, V, F>) => V | undefined Function that takes the clipboard-pasted value and converts it to a value used internally.
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<R, V, F>) => React.ReactNode Allows to override the component rendered as cell for this column.
renderEditCell? (params: GridRenderEditCellParams<R, V, F>) => React.ReactNode Allows to override the component rendered in edit cell mode for this column.
renderHeader? (params: GridColumnHeaderParams<R, V, F>) => React.ReactNode Allows to render a component in the column header cell.
renderHeaderFilter? (params: GridHeaderFilterCellProps) => React.ReactNode Allows to render a component in the column header filter 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 'singleSelect' The type of the column.
valueFormatter? (params: GridValueFormatterParams<V>) => F Function that allows to apply a formatter before rendering its value.
valueGetter? (params: GridValueGetterParams<R, any>) => V Function that allows to get a specific data instead of field to render in the cell.
valueParser? (value: F | undefined, params?: GridCellParams<R, V, 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.