跳转到内容

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.
hideSortIcons? boolean false
Toggle the visibility of the sort icons.
minWidth? number 50
Sets the minimum width of a column.
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<any, any, any>) => 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? ValueOptions[] | ((params: GridValueOptionsParams) => 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<any, any, any>) => GridCellValue Function that takes the user-entered value and converts it to a value used internally.
valueSetter? (params: GridValueSetterParams) => { [key: string]: any } 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.