Interface GridActionsColDef<R, V, F>

Column Definition interface used for columns with the actions type.

Demos

Special column properties

interface GridActionsColDef<R, V, F> {
    align?: GridAlignment;
    cellClassName?: GridCellClassNamePropType<R, V>;
    colSpan?: number | GridColSpanFn<R, V, F>;
    description?: string;
    disableColumnMenu?: boolean;
    disableExport?: boolean;
    disableReorder?: boolean;
    display?: "flex" | "text";
    editable?: boolean;
    field: string;
    filterable?: boolean;
    filterOperators?: readonly GridFilterOperator<R, V, F>[];
    flex?: number;
    getActions: ((params: GridRowParams<R>) => readonly ReactElement<GridActionsCellItemProps, string | JSXElementConstructor<any>>[]);
    getApplyQuickFilterFn?: GetApplyQuickFilterFn<R, V>;
    getSortComparator?: ((sortDirection: GridSortDirection) => undefined | GridComparatorFn<V>);
    groupable?: boolean;
    headerAlign?: GridAlignment;
    headerClassName?: GridColumnHeaderClassNamePropType;
    headerName?: string;
    hideable?: boolean;
    hideSortIcons?: boolean;
    maxWidth?: number;
    minWidth?: number;
    pinnable?: boolean;
    preProcessEditCellProps?: ((params: GridPreProcessEditCellProps<any, any>) => GridEditCellProps<any> | Promise<GridEditCellProps<any>>);
    renderCell?: ((params: GridRenderCellParams<R, V, F, GridTreeNodeWithRender>) => ReactNode);
    renderEditCell?: ((params: GridRenderEditCellParams<R, V, F, GridTreeNodeWithRender>) => ReactNode);
    renderHeader?: ((params: GridColumnHeaderParams<R, V, F>) => ReactNode);
    renderHeaderFilter?: ((params: GridRenderHeaderFilterProps) => ReactNode);
    resizable?: boolean;
    rowSpanValueGetter?: GridValueGetter<R, V, F, never>;
    sortable?: boolean;
    sortComparator?: GridComparatorFn<V>;
    sortingOrder?: readonly GridSortDirection[];
    type: "actions";
    valueFormatter?: GridValueFormatter<R, V, F, never>;
    valueGetter?: GridValueGetter<R, V, F, never>;
    valueParser?: GridValueParser<R, V, F>;
    valueSetter?: GridValueSetter<R, V, F>;
    width?: number;
}

Type Parameters

R extends GridValidRowModel = any
V = any
F = V

Hierarchy

GridBaseColDef<R, V, F>
- GridActionsColDef

Properties

`Optional`align

align?: GridAlignment

Align cell content.

`Optional`cellClassName

cellClassName?: GridCellClassNamePropType<R, V>

Class name added to cells in this column.

`Optional`colSpan

colSpan?: number | GridColSpanFn<R, V, F>

Number of columns a cell should span.

Default

`Optional`description

description?: string

The tooltip text shown when the column header name is truncated.

`Optional`disableColumnMenu

disableColumnMenu?: boolean

If true, the column menu is disabled for this column.

Default

false

`Optional`disableExport

disableExport?: boolean

If true, this column will not be included in exports.

Default

false

`Optional`disableReorder

disableReorder?: boolean

If true, this column cannot be reordered.

Default

false

`Optional`display

display?: "flex" | "text"

Display mode for the cell:

'text': For text-based cells (default)
'flex': For cells with HTMLElement children

`Optional`editable

editable?: boolean

If true, the cells of the column are editable.

Default

false

field

field: string

The unique identifier of the column. Used to map with [[GridRowModel]] values.

`Optional`filterable

filterable?: boolean

If true, the column is filterable.

Default

true

`Optional`filterOperators

filterOperators?: readonly GridFilterOperator<R, V, F>[]

Allows setting the filter operators for this column.

`Optional`flex

flex?: number

The flex grow factor of the column. Must be a positive number.

getActions

getActions: ((params: GridRowParams<R>) => readonly ReactElement<GridActionsCellItemProps, string | JSXElementConstructor<any>>[])

Function that returns the actions to be shown.

Type declaration

- (params): readonly ReactElement<GridActionsCellItemProps, string | JSXElementConstructor<any>>[]
- Parameters
  - params: GridRowParams<R>
    The params for each row.
  Returns readonly ReactElement<GridActionsCellItemProps, string | JSXElementConstructor<any>>[]
  An array of [[GridActionsCell]] elements.

`Optional`getApplyQuickFilterFn

getApplyQuickFilterFn?: GetApplyQuickFilterFn<R, V>

The callback that generates a filtering function for a given quick filter value. This function can return null to skip filtering for this value and column.

Param: value

The value with which we want to filter the column.

Param: colDef

The column from which we want to filter the rows.

Param: apiRef

Deprecated: The API of the grid.

Returns

The function to call to check if a row pass this filter value or not.

`Optional`getSortComparator

getSortComparator?: ((sortDirection: GridSortDirection) => undefined | GridComparatorFn<V>)

Provide an alternative comparator function for sorting. Takes precedence over sortComparator.

Type declaration

- (sortDirection): undefined | GridComparatorFn<V>
- Parameters
  - sortDirection: GridSortDirection
    The direction of the sort.
  Returns undefined | GridComparatorFn<V>
  The comparator function to use.

`Optional`groupable

groupable?: boolean

If true, the rows can be grouped based on this column values (pro-plan only). Only available in DataGridPremium. TODO: Use module augmentation to move it to @mui/x-data-grid-premium (need to modify how we handle column types default values).

Default

true

`Optional`headerAlign

headerAlign?: GridAlignment

Align column header content.

`Optional`headerClassName

headerClassName?: GridColumnHeaderClassNamePropType

Class name added to the column header cell.

`Optional`headerName

headerName?: string

The title displayed in the column header cell.

`Optional`hideable

hideable?: boolean

If false, removes the option to hide this column.

Default

true

`Optional`hideSortIcons

hideSortIcons?: boolean

Toggle the visibility of the sort icons.

Default

false

`Optional`maxWidth

maxWidth?: number

The maximum width of the column in pixels.

Default

Infinity

`Optional`minWidth

minWidth?: number

The minimum width of the column in pixels.

Default

`Optional`pinnable

pinnable?: boolean

If false, the menu items for column pinning menu will not be rendered. Only available in DataGridPro. TODO: Use module augmentation to move it to @mui/x-data-grid-pro (need to modify how we handle column types default values).

Default

true

`Optional`preProcessEditCellProps

preProcessEditCellProps?: ((params: GridPreProcessEditCellProps<any, any>) => GridEditCellProps<any> | Promise<GridEditCellProps<any>>)

Callback fired when the edit props of the cell changes. Processes the props before being saved into the state.

Type declaration

- (params): GridEditCellProps<any> | Promise<GridEditCellProps<any>>
- Parameters
  - params: GridPreProcessEditCellProps<any, any>
    Object containing parameters of the cell being edited.
  Returns GridEditCellProps<any> | Promise<GridEditCellProps<any>>
  The new edit cell props.

`Optional`renderCell

renderCell?: ((params: GridRenderCellParams<R, V, F, GridTreeNodeWithRender>) => ReactNode)

Override the component rendered as cell for this column.

Type declaration

- (params): ReactNode
- Parameters
  - params: GridRenderCellParams<R, V, F, GridTreeNodeWithRender>
    Object containing parameters for the renderer.
  Returns ReactNode
  The element to be rendered.

`Optional`renderEditCell

renderEditCell?: ((params: GridRenderEditCellParams<R, V, F, GridTreeNodeWithRender>) => ReactNode)

Override the component rendered in edit cell mode for this column.

Type declaration

- (params): ReactNode
- Parameters
  - params: GridRenderEditCellParams<R, V, F, GridTreeNodeWithRender>
    Object containing parameters for the renderer.
  Returns ReactNode
  The element to be rendered.

`Optional`renderHeader

renderHeader?: ((params: GridColumnHeaderParams<R, V, F>) => ReactNode)

Override the component rendered in the column header cell.

Type declaration

- (params): ReactNode
- Parameters
  - params: GridColumnHeaderParams<R, V, F>
    Object containing parameters for the renderer.
  Returns ReactNode
  The element to be rendered.

`Optional`renderHeaderFilter

renderHeaderFilter?: ((params: GridRenderHeaderFilterProps) => ReactNode)

Allows to render a component in the column header filter cell.

Type declaration

- (params): ReactNode
- Parameters
  - params: GridRenderHeaderFilterProps
    Object containing parameters for the renderer and inputRef.
  Returns ReactNode
  The element to be rendered.

`Optional`resizable

resizable?: boolean

If false, disables resizing for this column.

Default

true

`Optional`rowSpanValueGetter

rowSpanValueGetter?: GridValueGetter<R, V, F, never>

Function that returns a specific value to be used in row spanning.

`Optional`sortable

sortable?: boolean

If false, disables sorting for this column.

Default

true

`Optional`sortComparator

sortComparator?: GridComparatorFn<V>

A comparator function used to sort rows.

`Optional`sortingOrder

sortingOrder?: readonly GridSortDirection[]

The order of the sorting sequence.

type

The type of the column.

Default

'actions'

`Optional`valueFormatter

valueFormatter?: GridValueFormatter<R, V, F, never>

Formats the cell value before rendering.

`Optional`valueGetter

valueGetter?: GridValueGetter<R, V, F, never>

Function that returns specific data to render in the cell instead of using the field value.

`Optional`valueParser

valueParser?: GridValueParser<R, V, F>

Function that takes the user-entered value and converts it to a value used internally.

Returns

The converted value to use internally.

`Optional`valueSetter

valueSetter?: GridValueSetter<R, V, F>

Function that customizes how the entered value is stored in the row. Only works with cell/row editing.

Returns

The row with the updated field.

`Optional`width

width?: number

The width of the column in pixels.

Interface GridActionsColDef<R, V, F>

Demos

Type Parameters

Hierarchy

Index

Properties

Properties

Optionalalign

OptionalcellClassName

OptionalcolSpan

Default

Optionaldescription

OptionaldisableColumnMenu

Default

OptionaldisableExport

Default

OptionaldisableReorder

Default

Optionaldisplay

Optionaleditable

Default

field

Optionalfilterable

Default

OptionalfilterOperators

Optionalflex

getActions

Type declaration

Parameters

Returns readonly ReactElement<GridActionsCellItemProps, string | JSXElementConstructor<any>>[]

OptionalgetApplyQuickFilterFn

Param: value

Param: colDef

Param: apiRef

Returns

OptionalgetSortComparator

Type declaration

Parameters

Returns undefined | GridComparatorFn<V>

Optionalgroupable

Default

OptionalheaderAlign

OptionalheaderClassName

OptionalheaderName

Optionalhideable

Default

OptionalhideSortIcons

Default

OptionalmaxWidth

Default

OptionalminWidth

Default

Optionalpinnable

Default

OptionalpreProcessEditCellProps

Type declaration

Parameters

Returns GridEditCellProps<any> | Promise<GridEditCellProps<any>>

OptionalrenderCell

Type declaration

Parameters

Returns ReactNode

OptionalrenderEditCell

Type declaration

Parameters

Returns ReactNode

OptionalrenderHeader

Type declaration

Parameters

Returns ReactNode

OptionalrenderHeaderFilter

Type declaration

Parameters

Returns ReactNode

Optionalresizable

Default

OptionalrowSpanValueGetter

Optionalsortable

Default

OptionalsortComparator

`Optional`align

`Optional`cellClassName

`Optional`colSpan

`Optional`description

`Optional`disableColumnMenu

`Optional`disableExport

`Optional`disableReorder

`Optional`display

`Optional`editable

`Optional`filterable

`Optional`filterOperators

`Optional`flex

`Optional`getApplyQuickFilterFn

`Optional`getSortComparator

`Optional`groupable

`Optional`headerAlign

`Optional`headerClassName

`Optional`headerName

`Optional`hideable

`Optional`hideSortIcons

`Optional`maxWidth

`Optional`minWidth

`Optional`pinnable

`Optional`preProcessEditCellProps

`Optional`renderCell

`Optional`renderEditCell

`Optional`renderHeader

`Optional`renderHeaderFilter

`Optional`resizable

`Optional`rowSpanValueGetter

`Optional`sortable

`Optional`sortComparator

`Optional`sortingOrder

`Optional`valueFormatter

`Optional`valueGetter

`Optional`valueParser

`Optional`valueSetter

`Optional`width