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.