Saltar al contenido

šŸŽ‰ v5 is out! Head to the documentation to get started.

Ayuda a traducir esta pƔgina

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.