跳转到内容

🎉 v5 is out! Head to the documentation to get started.

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.