Skip to content

GridActionsColDef API

Extended documentation for the GridActionsColDef interface with detailed information on the module's properties and available APIs.

Demos

Import

import { GridActionsColDef } from '@mui/x-data-grid';
// or
import { GridActionsColDef } from '@mui/x-data-grid-pro';
// or
import { GridActionsColDef } from '@mui/x-data-grid-premium';


Column Definition interface used for columns with the `actions` type.

Properties

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

Type:string


Function that returns the actions to be shown.

Type:(params: { id: number | string, row: R, columns: GridColDef[] }) => readonly ReactElement<GridActionsCellItemProps, string | JSXElementConstructor<any>>[]


The type of the column.

Type:'actions'

Default:'actions'


Optional

If `true`, the cells of the column can be aggregated based.

Type:boolean

Default:true


Optional

Align cell content.

Type:'center' | 'left' | 'right'


Optional

Limit the aggregation function usable on this column. By default, the column will have all the aggregation functions that are compatible with its type.

Type:string[]


Optional

Class name added to cells in this column.

Type:(params: GridCellParams<R, V, V, GridTreeNode>) => string | string


Optional

If `false`, the column will not be available for charts integration.

Type:boolean

Default:true


Optional

Number of columns a cell should span.

Type:(value: V, row: R, column: GridActionsColDef<R, V, F> | GridBaseColDef<R, V, F> | GridSingleSelectColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => number | number

Default:1


Optional

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

Type:string


Optional

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

Type:boolean

Default:false


Optional

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

Type:boolean

Default:false


Optional

If `true`, this column cannot be reordered.

Type:boolean

Default:false


Optional

Display mode for the cell: - 'text': For text-based cells (default) - 'flex': For cells with HTMLElement children

Type:'flex' | 'text'


Optional

If `true`, the cells of the column are editable.

Type:boolean

Default:false


Optional

Example values that can be used by the grid to get more context about the column.

Type:V[]


Optional

If `true`, the column is filterable.

Type:boolean

Default:true


Optional

Allows setting the filter operators for this column.

Type:readonly GridFilterOperator<R, V, F, any>[]


Optional

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

Type:number


Optional

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.

Type:GetApplyQuickFilterFn<R, V>


Optional

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

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


Optional

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).

Type:boolean

Default:true


Optional

Function that transforms a complex cell value into a key that be used for grouping the rows. Not supported with the server-side row grouping. Use `dataSource.getGroupKey()` instead.

Type:(value: never, row: R, column: GridActionsColDef<R, any, any> | GridBaseColDef<R, any, any> | GridSingleSelectColDef<R, any, any>, apiRef: RefObject<GridApiPremium>) => boolean | number | string


Optional

Function that takes a grouping value and updates the row data accordingly. This is the inverse operation of `groupingValueGetter`.

Type:(groupingValue: boolean | number | string, row: R, column: GridActionsColDef<R, any, any> | GridBaseColDef<R, any, any> | GridSingleSelectColDef<R, any, any>, apiRef: RefObject<GridApiPremium>) => R


Optional

Align column header content.

Type:'center' | 'left' | 'right'


Optional

Class name added to the column header cell.

Type:GridColumnHeaderClassNamePropType


Optional

The title displayed in the column header cell.

Type:string


Optional

If `false`, removes the option to hide this column.

Type:boolean

Default:true


Optional

Toggle the visibility of the sort icons.

Type:boolean

Default:false


Optional

The maximum width of the column in pixels.

Type:number

Default:Infinity


Optional

The minimum width of the column in pixels.

Type:number

Default:50


Optional

Function that takes the clipboard-pasted value and converts it to a value used internally.

Type:(value: string, row: R, column: GridActionsColDef<R, V, F> | GridBaseColDef<R, V, F> | GridSingleSelectColDef<R, V, F>, apiRef: RefObject<GridApiPremium>) => V


Optional

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).

Type:boolean

Default:true


Optional

If `false`, the column will not be available for pivoting in the pivot panel.

Type:boolean

Default:true


Optional

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

Type:(params: { id: number | string, row: any, props: { value?: any, isValidating?: boolean, isProcessingProps?: boolean, changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue' }, hasChanged?: boolean, otherFieldsProps?: Record<string, GridEditCellProps<any>> }) => Promise<GridEditCellProps<any>> | { value?: any, isValidating?: boolean, isProcessingProps?: boolean, changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue' }


Optional

Override the component rendered as cell for this column.

Type:(params: GridRenderCellParams<R, V, F, GridTreeNodeWithRender>) => Iterable<ReactNode> | Promise<AwaitedReactNode> | ReactElement<unknown, string | JSXElementConstructor<any>> | ReactPortal | bigint | boolean | number | string


Optional

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

Type:(params: GridRenderEditCellParams<R, V, F, GridTreeNodeWithRender>) => Iterable<ReactNode> | Promise<AwaitedReactNode> | ReactElement<unknown, string | JSXElementConstructor<any>> | ReactPortal | bigint | boolean | number | string


Optional

Override the component rendered in the column header cell.

Type:(params: GridColumnHeaderParams<R, V, F>) => React.ReactNode


Optional

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

Type:(params: GridRenderHeaderFilterProps) => Iterable<ReactNode> | Promise<AwaitedReactNode> | ReactElement<unknown, string | JSXElementConstructor<any>> | ReactPortal | bigint | boolean | number | string


Optional

If `false`, disables resizing for this column.

Type:boolean

Default:true


Optional

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

Type:(value: never, row: R, column: GridActionsColDef<R, V, F> | GridBaseColDef<R, V, F> | GridSingleSelectColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => V


Optional

If `false`, disables sorting for this column.

Type:boolean

Default:true


Optional

A comparator function used to sort rows.

Type:GridComparatorFn<V>


Optional

The order of the sorting sequence.

Type:readonly GridSortDirection[]


Optional

Formats the cell value before rendering.

Type:(value: never, row: R, column: GridActionsColDef<R, V, F> | GridBaseColDef<R, V, F> | GridSingleSelectColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => F


Optional

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

Type:(value: never, row: R, column: GridActionsColDef<R, V, F> | GridBaseColDef<R, V, F> | GridSingleSelectColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => V


Optional

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

Type:(value: F, row: R, column: GridActionsColDef<R, V, F> | GridBaseColDef<R, V, F> | GridSingleSelectColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => V


Optional

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

Type:(value: V, row: R, column: GridActionsColDef<R, V, F> | GridBaseColDef<R, V, F> | GridSingleSelectColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => R


Optional

The width of the column in pixels.

Type:number

Default:100