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 GridRowModel 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.
hideable?	boolean	true	If false, removes the buttons for hiding this column.
hideSortIcons?	boolean	false	Toggle the visibility of the sort icons.
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) => React.ReactNode		Allows to override the component rendered as cell for this column.
renderEditCell?	(params: GridRenderEditCellParams) => React.ReactNode		Allows to override the component rendered in edit cell mode for this column.
renderHeader?	(params: GridColumnHeaderParams) => 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		A comparator function used to sort rows.
sortingOrder?	GridSortDirection[]		The order of the sorting sequence.
type?	GridColType	'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?	Array<ValueOptions> | ((params: GridValueOptionsParams) => 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: GridCellValue, params?: GridCellParams) => GridCellValue		Function that takes the user-entered value and converts it to a value used internally.
valueSetter?	(params: GridValueSetterParams) => GridRowModel		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.