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^?	GetApplyQuickFilterFn<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.