Interface DataGridProProps<R>

The props users can give to the DataGridProProps component.

interface DataGridProProps<R> {
    apiRef?: MutableRefObject<GridApiPro>;
    aria-label?: string;
    aria-labelledby?: string;
    autoHeight?: boolean;
    autoPageSize?: boolean;
    autosizeOnMount?: boolean;
    autosizeOptions?: GridAutosizeOptions;
    cellModesModel?: GridCellModesModel;
    checkboxSelection?: boolean;
    checkboxSelectionVisibleOnly?: boolean;
    classes?: Partial<GridClasses>;
    className?: string;
    clipboardCopyCellDelimiter?: string;
    columnBufferPx?: number;
    columnGroupHeaderHeight?: number;
    columnGroupingModel?: GridColumnGroupingModel;
    columnHeaderHeight?: number;
    columns: readonly GridColDef<R>[];
    columnVisibilityModel?: GridColumnVisibilityModel;
    defaultGroupingExpansionDepth?: number;
    density?: GridDensity;
    detailPanelExpandedRowIds?: GridRowId[];
    disableAutosize?: boolean;
    disableChildrenFiltering?: boolean;
    disableChildrenSorting?: boolean;
    disableColumnFilter?: boolean;
    disableColumnMenu?: boolean;
    disableColumnPinning?: boolean;
    disableColumnReorder?: boolean;
    disableColumnResize?: boolean;
    disableColumnSelector?: boolean;
    disableColumnSorting?: boolean;
    disableDensitySelector?: boolean;
    disableEval?: boolean;
    disableMultipleColumnsFiltering?: boolean;
    disableMultipleColumnsSorting?: boolean;
    disableMultipleRowSelection?: boolean;
    disableRowSelectionOnClick?: boolean;
    disableVirtualization?: boolean;
    editMode?: GridEditMode;
    estimatedRowCount?: number;
    experimentalFeatures?: Partial<GridExperimentalProFeatures>;
    filterDebounceMs?: number;
    filterMode?: GridFeatureMode;
    filterModel?: GridFilterModel;
    getCellClassName?: ((params: GridCellParams<any, R, R, GridTreeNode>) => string);
    getDetailPanelContent?: ((params: GridRowParams<R>) => ReactNode);
    getDetailPanelHeight?: ((params: GridRowParams<any>) => number | "auto");
    getEstimatedRowHeight?: ((params: GridRowHeightParams) => null | number);
    getRowClassName?: ((params: GridRowClassNameParams<R>) => string);
    getRowHeight?: ((params: GridRowHeightParams) => GridRowHeightReturnValue);
    getRowId?: GridRowIdGetter<R>;
    getRowSpacing?: ((params: GridRowSpacingParams) => GridRowSpacing);
    getTreeDataPath?: ((row: R) => readonly string[]);
    groupingColDef?: GridGroupingColDefOverride<R> | ((params: GridGroupingColDefOverrideParams) => undefined | null | GridGroupingColDefOverride<R>);
    headerFilterHeight?: number;
    headerFilters?: boolean;
    hideFooter?: boolean;
    hideFooterPagination?: boolean;
    hideFooterRowCount?: boolean;
    hideFooterSelectedRowCount?: boolean;
    ignoreDiacritics?: boolean;
    ignoreValueFormatterDuringExport?: boolean | {
        clipboardExport?: boolean;
        csvExport?: boolean;
    };
    indeterminateCheckboxAction?: "select" | "deselect";
    initialState?: GridInitialStatePro;
    isCellEditable?: ((params: GridCellParams<any, R, R, GridTreeNode>) => boolean);
    isGroupExpandedByDefault?: ((node: GridGroupNode) => boolean);
    isRowSelectable?: ((params: GridRowParams<R>) => boolean);
    keepColumnPositionIfDraggedOutside?: boolean;
    keepNonExistentRowsSelected?: boolean;
    loading?: boolean;
    localeText?: Partial<GridLocaleText>;
    logger?: Logger;
    logLevel?: false | (keyof Logger);
    nonce?: string;
    onCellClick?: GridEventListener<"cellClick">;
    onCellDoubleClick?: GridEventListener<"cellDoubleClick">;
    onCellEditStart?: GridEventListener<"cellEditStart">;
    onCellEditStop?: GridEventListener<"cellEditStop">;
    onCellKeyDown?: GridEventListener<"cellKeyDown">;
    onCellModesModelChange?: ((cellModesModel: GridCellModesModel, details: GridCallbackDetails<any>) => void);
    onClipboardCopy?: GridEventListener<"clipboardCopy">;
    onColumnHeaderClick?: GridEventListener<"columnHeaderClick">;
    onColumnHeaderContextMenu?: GridEventListener<"columnHeaderContextMenu">;
    onColumnHeaderDoubleClick?: GridEventListener<"columnHeaderDoubleClick">;
    onColumnHeaderEnter?: GridEventListener<"columnHeaderEnter">;
    onColumnHeaderLeave?: GridEventListener<"columnHeaderLeave">;
    onColumnHeaderOut?: GridEventListener<"columnHeaderOut">;
    onColumnHeaderOver?: GridEventListener<"columnHeaderOver">;
    onColumnOrderChange?: GridEventListener<"columnOrderChange">;
    onColumnResize?: GridEventListener<"columnResize">;
    onColumnVisibilityModelChange?: ((model: GridColumnVisibilityModel, details: GridCallbackDetails<any>) => void);
    onColumnWidthChange?: GridEventListener<"columnWidthChange">;
    onDensityChange?: ((density: GridDensity) => void);
    onDetailPanelExpandedRowIdsChange?: ((ids: GridRowId[], details: GridCallbackDetails<any>) => void);
    onFetchRows?: GridEventListener<"fetchRows">;
    onFilterModelChange?: ((model: GridFilterModel, details: GridCallbackDetails<"filter">) => void);
    onMenuClose?: GridEventListener<"menuClose">;
    onMenuOpen?: GridEventListener<"menuOpen">;
    onPaginationMetaChange?: ((paginationMeta: GridPaginationMeta) => void);
    onPaginationModelChange?: ((model: GridPaginationModel, details: GridCallbackDetails<"pagination">) => void);
    onPinnedColumnsChange?: ((pinnedColumns: GridPinnedColumnFields, details: GridCallbackDetails<any>) => void);
    onPreferencePanelClose?: GridEventListener<"preferencePanelClose">;
    onPreferencePanelOpen?: GridEventListener<"preferencePanelOpen">;
    onProcessRowUpdateError?: ((error: any) => void);
    onResize?: GridEventListener<"debouncedResize">;
    onRowClick?: GridEventListener<"rowClick">;
    onRowCountChange?: ((count: number) => void);
    onRowDoubleClick?: GridEventListener<"rowDoubleClick">;
    onRowEditStart?: GridEventListener<"rowEditStart">;
    onRowEditStop?: GridEventListener<"rowEditStop">;
    onRowModesModelChange?: ((rowModesModel: GridRowModesModel, details: GridCallbackDetails<any>) => void);
    onRowOrderChange?: GridEventListener<"rowOrderChange">;
    onRowSelectionModelChange?: ((rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails<any>) => void);
    onRowsScrollEnd?: GridEventListener<"rowsScrollEnd">;
    onSortModelChange?: ((model: GridSortModel, details: GridCallbackDetails<any>) => void);
    pageSizeOptions?: readonly (number | {
        label: string;
        value: number;
    })[];
    pagination?: boolean;
    paginationMeta?: GridPaginationMeta;
    paginationMode?: GridFeatureMode;
    paginationModel?: GridPaginationModel;
    pinnedColumns?: GridPinnedColumnFields;
    pinnedRows?: GridPinnedRowsProp<R>;
    processRowUpdate?: ((newRow: R, oldRow: R, params: {
        rowId: GridRowId;
    }) => R | Promise<R>);
    resetPageOnSortFilter?: boolean;
    resizeThrottleMs?: number;
    rowBufferPx?: number;
    rowCount?: number;
    rowHeight?: number;
    rowModesModel?: GridRowModesModel;
    rowPositionsDebounceMs?: number;
    rowReordering?: boolean;
    rows?: readonly R[];
    rowSelection?: boolean;
    rowSelectionModel?: GridInputRowSelectionModel;
    rowSelectionPropagation?: GridRowSelectionPropagation;
    rowsLoadingMode?: GridFeatureMode;
    rowSpacingType?: "border" | "margin";
    scrollbarSize?: number;
    scrollEndThreshold?: number;
    showCellVerticalBorder?: boolean;
    showColumnVerticalBorder?: boolean;
    slotProps?: GridProSlotProps;
    slots?: Partial<GridSlots>;
    sortingMode?: GridFeatureMode;
    sortingOrder?: readonly GridSortDirection[];
    sortModel?: GridSortModel;
    style?: CSSProperties;
    sx?: SxProps<Theme>;
    throttleRowsMs?: number;
    treeData?: boolean;
    unstable_dataSource?: GridDataSource;
    unstable_dataSourceCache?: null | GridDataSourceCache;
    unstable_listColumn?: GridListColDef<R>;
    unstable_listView?: boolean;
    unstable_onDataSourceError?: ((error: Error, params: GridGetRowsParams) => void);
    unstable_rowSpanning?: boolean;
    virtualizeColumnsWithAutoRowHeight?: boolean;
}

Type Parameters

Hierarchy

  • Omit<Partial<DataGridProPropsWithDefaultValue<R>> & DataGridProPropsWithComplexDefaultValueBeforeProcessing & DataGridProPropsWithoutDefaultValue<R>, DataGridProForcedPropsKey>
    • DataGridProProps

Properties

apiRef? aria-label? aria-labelledby? autoHeight? autoPageSize? autosizeOnMount? autosizeOptions? cellModesModel? checkboxSelection? checkboxSelectionVisibleOnly? classes? className? clipboardCopyCellDelimiter? columnBufferPx? columnGroupHeaderHeight? columnGroupingModel? columnHeaderHeight? columns columnVisibilityModel? defaultGroupingExpansionDepth? density? detailPanelExpandedRowIds? disableAutosize? disableChildrenFiltering? disableChildrenSorting? disableColumnFilter? disableColumnMenu? disableColumnPinning? disableColumnReorder? disableColumnResize? disableColumnSelector? disableColumnSorting? disableDensitySelector? disableEval? disableMultipleColumnsFiltering? disableMultipleColumnsSorting? disableMultipleRowSelection? disableRowSelectionOnClick? disableVirtualization? editMode? estimatedRowCount? experimentalFeatures? filterDebounceMs? filterMode? filterModel? getCellClassName? getDetailPanelContent? getDetailPanelHeight? getEstimatedRowHeight? getRowClassName? getRowHeight? getRowId? getRowSpacing? getTreeDataPath? groupingColDef? headerFilterHeight? headerFilters? hideFooter? hideFooterPagination? hideFooterRowCount? hideFooterSelectedRowCount? ignoreDiacritics? ignoreValueFormatterDuringExport? indeterminateCheckboxAction? initialState? isCellEditable? isGroupExpandedByDefault? isRowSelectable? keepColumnPositionIfDraggedOutside? keepNonExistentRowsSelected? loading? localeText? logger? logLevel? nonce? onCellClick? onCellDoubleClick? onCellEditStart? onCellEditStop? onCellKeyDown? onCellModesModelChange? onClipboardCopy? onColumnHeaderClick? onColumnHeaderContextMenu? onColumnHeaderDoubleClick? onColumnHeaderEnter? onColumnHeaderLeave? onColumnHeaderOut? onColumnHeaderOver? onColumnOrderChange? onColumnResize? onColumnVisibilityModelChange? onColumnWidthChange? onDensityChange? onDetailPanelExpandedRowIdsChange? onFetchRows? onFilterModelChange? onMenuClose? onMenuOpen? onPaginationMetaChange? onPaginationModelChange? onPinnedColumnsChange? onPreferencePanelClose? onPreferencePanelOpen? onProcessRowUpdateError? onResize? onRowClick? onRowCountChange? onRowDoubleClick? onRowEditStart? onRowEditStop? onRowModesModelChange? onRowOrderChange? onRowSelectionModelChange? onRowsScrollEnd? onSortModelChange? pageSizeOptions? pagination? paginationMeta? paginationMode? paginationModel? pinnedColumns? pinnedRows? processRowUpdate? resetPageOnSortFilter? resizeThrottleMs? rowBufferPx? rowCount? rowHeight? rowModesModel? rowPositionsDebounceMs? rowReordering? rows? rowSelection? rowSelectionModel? rowSelectionPropagation? rowsLoadingMode? rowSpacingType? scrollbarSize? scrollEndThreshold? showCellVerticalBorder? showColumnVerticalBorder? slotProps? slots? sortingMode? sortingOrder? sortModel? style? sx? throttleRowsMs? treeData? unstable_dataSource? unstable_dataSourceCache? unstable_listColumn? unstable_listView? unstable_onDataSourceError? unstable_rowSpanning? virtualizeColumnsWithAutoRowHeight?

Properties

OptionalapiRef

apiRef?: MutableRefObject<GridApiPro>

The ref object that allows grid manipulation. Can be instantiated with useGridApiRef().

Optionalaria-label

aria-label?: string

The label of the Data Grid.

Optionalaria-labelledby

aria-labelledby?: string

The id of the element containing a label for the Data Grid.

OptionalautoHeight

autoHeight?: boolean

If true, the Data Grid height is dynamic and follows the number of rows in the Data Grid.

Default

false

Deprecated

Use flex parent container instead: https://mui.com/x/react-data-grid/layout/#flex-parent-container

Example

<div style={{ display: 'flex', flexDirection: 'column' }}>
  <DataGrid />
</div>

OptionalautoPageSize

autoPageSize?: boolean

If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.

Default

false

OptionalautosizeOnMount

autosizeOnMount?: boolean

If true, columns are autosized after the datagrid is mounted.

Default

false

OptionalautosizeOptions

autosizeOptions?: GridAutosizeOptions

The options for autosize when user-initiated.

OptionalcellModesModel

cellModesModel?: GridCellModesModel

Controls the modes of the cells.

OptionalcheckboxSelection

checkboxSelection?: boolean

If true, the Data Grid will display an extra column with checkboxes for selecting rows.

Default

false

OptionalcheckboxSelectionVisibleOnly

checkboxSelectionVisibleOnly?: boolean

If true, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with checkboxSelection. It only works if the pagination is enabled.

Default

false

Optionalclasses

classes?: Partial<GridClasses>

Override or extend the styles applied to the component.

OptionalclassName

className?: string

OptionalclipboardCopyCellDelimiter

clipboardCopyCellDelimiter?: string

The character used to separate cell values when copying to the clipboard.

Default

'\t'

OptionalcolumnBufferPx

columnBufferPx?: number

Column region in pixels to render before/after the viewport

Default

150

OptionalcolumnGroupHeaderHeight

columnGroupHeaderHeight?: number

Sets the height in pixels of the column group headers in the Data Grid. Inherits the columnHeaderHeight value if not set.

OptionalcolumnGroupingModel

columnGroupingModel?: GridColumnGroupingModel

OptionalcolumnHeaderHeight

columnHeaderHeight?: number

Sets the height in pixel of the column headers in the Data Grid.

Default

56

columns

columns: readonly GridColDef<R>[]

Set of columns of type [[GridColDef]][].

OptionalcolumnVisibilityModel

columnVisibilityModel?: GridColumnVisibilityModel

Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the hide property in [[GridColDef]].

OptionaldefaultGroupingExpansionDepth

defaultGroupingExpansionDepth?: number

If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.

Default

0

Optionaldensity

density?: GridDensity

Set the density of the Data Grid.

Default

"standard"

OptionaldetailPanelExpandedRowIds

detailPanelExpandedRowIds?: GridRowId[]

The row ids to show the detail panel.

OptionaldisableAutosize

disableAutosize?: boolean

If true, column autosizing on header separator double-click is disabled.

Default

false

OptionaldisableChildrenFiltering

disableChildrenFiltering?: boolean

If true, the filtering will only be applied to the top level rows when grouping rows with the treeData prop.

Default

false

OptionaldisableChildrenSorting

disableChildrenSorting?: boolean

If true, the sorting will only be applied to the top level rows when grouping rows with the treeData prop.

Default

false

OptionaldisableColumnFilter

disableColumnFilter?: boolean

If true, column filters are disabled.

Default

false

OptionaldisableColumnMenu

disableColumnMenu?: boolean

If true, the column menu is disabled.

Default

false

OptionaldisableColumnPinning

disableColumnPinning?: boolean

If true, the column pinning is disabled.

Default

false

OptionaldisableColumnReorder

disableColumnReorder?: boolean

If true, reordering columns is disabled.

Default

false

OptionaldisableColumnResize

disableColumnResize?: boolean

If true, resizing columns is disabled.

Default

false

OptionaldisableColumnSelector

disableColumnSelector?: boolean

If true, hiding/showing columns is disabled.

Default

false

OptionaldisableColumnSorting

disableColumnSorting?: boolean

If true, the column sorting feature will be disabled.

Default

false

OptionaldisableDensitySelector

disableDensitySelector?: boolean

If true, the density selector is disabled.

Default

false

OptionaldisableEval

disableEval?: boolean

If true, eval() is not used for performance optimization.

Default

false

OptionaldisableMultipleColumnsFiltering

disableMultipleColumnsFiltering?: boolean

If true, filtering with multiple columns is disabled.

Default

false

OptionaldisableMultipleColumnsSorting

disableMultipleColumnsSorting?: boolean

If true, the sorting with multiple columns is disabled.

Default

false

OptionaldisableMultipleRowSelection

disableMultipleRowSelection?: boolean

If true, multiple selection using the Ctrl/CMD or Shift key is disabled. The MIT DataGrid will ignore this prop, unless checkboxSelection is enabled.

Default

false (!props.checkboxSelection for MIT Data Grid)

OptionaldisableRowSelectionOnClick

disableRowSelectionOnClick?: boolean

If true, the selection on click on a row or cell is disabled.

Default

false

OptionaldisableVirtualization

disableVirtualization?: boolean

If true, the virtualization is disabled.

Default

false

OptionaleditMode

editMode?: GridEditMode

Controls whether to use the cell or row editing.

Default

"cell"

OptionalestimatedRowCount

estimatedRowCount?: number

Use if the actual rowCount is not known upfront, but an estimation is available. If some rows have children (for instance in the tree data), this number represents the amount of top level rows. Applicable only with paginationMode="server" and when rowCount="-1"

OptionalexperimentalFeatures

experimentalFeatures?: Partial<GridExperimentalProFeatures>

Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to true, the feature will be fully disabled and any property / method call will not have any effect.

OptionalfilterDebounceMs

filterDebounceMs?: number

The milliseconds delay to wait after a keystroke before triggering filtering.

Default

150

OptionalfilterMode

filterMode?: GridFeatureMode

Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.

Default

"client"

OptionalfilterModel

filterModel?: GridFilterModel

Set the filter model of the Data Grid.

OptionalgetCellClassName

getCellClassName?: ((params: GridCellParams<any, R, R, GridTreeNode>) => string)

Function that applies CSS classes dynamically on cells.

Type declaration

    • (params): string

    • Parameters

      Returns string

      The CSS class to apply to the cell.

OptionalgetDetailPanelContent

getDetailPanelContent?: ((params: GridRowParams<R>) => ReactNode)

Function that returns the element to render in row detail.

Type declaration

    • (params): ReactNode

    • Parameters

      Returns ReactNode

      The row detail element.

OptionalgetDetailPanelHeight

getDetailPanelHeight?: ((params: GridRowParams<any>) => number | "auto")

Function that returns the height of the row detail panel.

Type declaration

    • (params): number | "auto"

    • Parameters

      • params: GridRowParams<any>

        With all properties from [[GridRowParams]].

      Returns number | "auto"

      The height in pixels or "auto" to use the content height.

Default

"() => 500"

OptionalgetEstimatedRowHeight

getEstimatedRowHeight?: ((params: GridRowHeightParams) => null | number)

Function that returns the estimated height for a row. Only works if dynamic row height is used. Once the row height is measured this value is discarded.

Type declaration

    • (params): null | number

    • Parameters

      Returns null | number

      The estimated row height value. If null or undefined then the default row height, based on the density, is applied.

OptionalgetRowClassName

getRowClassName?: ((params: GridRowClassNameParams<R>) => string)

Function that applies CSS classes dynamically on rows.

Type declaration

    • (params): string

    • Parameters

      Returns string

      The CSS class to apply to the row.

OptionalgetRowHeight

getRowHeight?: ((params: GridRowHeightParams) => GridRowHeightReturnValue)

Function that sets the row height per row.

Type declaration

OptionalgetRowId

getRowId?: GridRowIdGetter<R>

Return the id of a given [[GridRowModel]]. Ensure the reference of this prop is stable to avoid performance implications. It could be done by either defining the prop outside of the component or by memoizing it.

OptionalgetRowSpacing

getRowSpacing?: ((params: GridRowSpacingParams) => GridRowSpacing)

Function that allows to specify the spacing between rows.

Type declaration

OptionalgetTreeDataPath

getTreeDataPath?: ((row: R) => readonly string[])

Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element.

Type declaration

    • (row): readonly string[]

    • Parameters

      • row: R

        The row from which we want the path.

      Returns readonly string[]

      The path to the row.

OptionalgroupingColDef

groupingColDef?: GridGroupingColDefOverride<R> | ((params: GridGroupingColDefOverrideParams) => undefined | null | GridGroupingColDefOverride<R>)

The grouping column used by the tree data.

OptionalheaderFilterHeight

headerFilterHeight?: number

Override the height of the header filters.

OptionalheaderFilters

headerFilters?: boolean

If true, the header filters feature is enabled.

Default

false

OptionalhideFooter

hideFooter?: boolean

If true, the footer component is hidden.

Default

false

OptionalhideFooterPagination

hideFooterPagination?: boolean

If true, the pagination component in the footer is hidden.

Default

false

OptionalhideFooterRowCount

hideFooterRowCount?: boolean

If true, the row count in the footer is hidden. It has no effect if the pagination is enabled.

Default

false

OptionalhideFooterSelectedRowCount

hideFooterSelectedRowCount?: boolean

If true, the selected row count in the footer is hidden.

Default

false

OptionalignoreDiacritics

ignoreDiacritics?: boolean

If true, the diacritics (accents) are ignored when filtering or quick filtering. E.g. when filter value is cafe, the rows with café will be visible.

Default

false

OptionalignoreValueFormatterDuringExport

ignoreValueFormatterDuringExport?: boolean | {
    clipboardExport?: boolean;
    csvExport?: boolean;
}

If true, the Data Grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export.

Default

false

OptionalindeterminateCheckboxAction

indeterminateCheckboxAction?: "select" | "deselect"

If select, a group header checkbox in indeterminate state (like "Select All" checkbox) will select all the rows under it. If deselect, it will deselect all the rows under it. Works only if checkboxSelection is enabled.

Default

"deselect"

Deprecated

select will be the default behavior from v8 onwards

OptionalinitialState

initialState?: GridInitialStatePro

The initial state of the DataGridPro. The data in it will be set in the state on initialization but will not be controlled. If one of the data in initialState is also being controlled, then the control state wins.

OptionalisCellEditable

isCellEditable?: ((params: GridCellParams<any, R, R, GridTreeNode>) => boolean)

Callback fired when a cell is rendered, returns true if the cell is editable.

Type declaration

    • (params): boolean

    • Parameters

      Returns boolean

      A boolean indicating if the cell is editable.

OptionalisGroupExpandedByDefault

isGroupExpandedByDefault?: ((node: GridGroupNode) => boolean)

Determines if a group should be expanded after its creation. This prop takes priority over the defaultGroupingExpansionDepth prop.

Type declaration

    • (node): boolean

    • Parameters

      Returns boolean

      A boolean indicating if the group is expanded.

OptionalisRowSelectable

isRowSelectable?: ((params: GridRowParams<R>) => boolean)

Determines if a row can be selected.

Type declaration

    • (params): boolean

    • Parameters

      Returns boolean

      A boolean indicating if the row is selectable.

OptionalkeepColumnPositionIfDraggedOutside

keepColumnPositionIfDraggedOutside?: boolean

If true, moving the mouse pointer outside the grid before releasing the mouse button in a column re-order action will not cause the column to jump back to its original position.

Default

false

OptionalkeepNonExistentRowsSelected

keepNonExistentRowsSelected?: boolean

If true, the selection model will retain selected rows that do not exist. Useful when using server side pagination and row selections need to be retained when changing pages.

Default

false

Optionalloading

loading?: boolean

If true, a loading overlay is displayed.

Default

false

OptionallocaleText

localeText?: Partial<GridLocaleText>

Set the locale text of the Data Grid. You can find all the translation keys supported in the source in the GitHub repository.

Optionallogger

logger?: Logger

Pass a custom logger in the components that implements the [[Logger]] interface.

Default

console

OptionallogLevel

logLevel?: false | (keyof Logger)

Allows to pass the logging level or false to turn off logging.

Default

"error" ("warn" in dev mode)

Optionalnonce

nonce?: string

Nonce of the inline styles for Content Security Policy.

OptionalonCellClick

onCellClick?: GridEventListener<"cellClick">

Callback fired when any cell is clicked.

Param: params

With all properties from [[GridCellParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonCellDoubleClick

onCellDoubleClick?: GridEventListener<"cellDoubleClick">

Callback fired when a double click event comes from a cell element.

Param: params

With all properties from [[GridCellParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonCellEditStart

onCellEditStart?: GridEventListener<"cellEditStart">

Callback fired when the cell turns to edit mode.

Param: params

With all properties from [[GridCellParams]].

Param: event

The event that caused this prop to be called.

OptionalonCellEditStop

onCellEditStop?: GridEventListener<"cellEditStop">

Callback fired when the cell turns to view mode.

Param: params

With all properties from [[GridCellParams]].

Param: event

The event that caused this prop to be called.

OptionalonCellKeyDown

onCellKeyDown?: GridEventListener<"cellKeyDown">

Callback fired when a keydown event comes from a cell element.

Param: params

With all properties from [[GridCellParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonCellModesModelChange

onCellModesModelChange?: ((cellModesModel: GridCellModesModel, details: GridCallbackDetails<any>) => void)

Callback fired when the cellModesModel prop changes.

Type declaration

    • (cellModesModel, details): void

    • Parameters

      Returns void

OptionalonClipboardCopy

onClipboardCopy?: GridEventListener<"clipboardCopy">

Callback called when the data is copied to the clipboard.

Param: data

The data copied to the clipboard.

OptionalonColumnHeaderClick

onColumnHeaderClick?: GridEventListener<"columnHeaderClick">

Callback fired when a click event comes from a column header element.

Param: params

With all properties from [[GridColumnHeaderParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonColumnHeaderContextMenu

onColumnHeaderContextMenu?: GridEventListener<"columnHeaderContextMenu">

Callback fired when a contextmenu event comes from a column header element.

Param: params

With all properties from [[GridColumnHeaderParams]].

Param: event

The event object.

OptionalonColumnHeaderDoubleClick

onColumnHeaderDoubleClick?: GridEventListener<"columnHeaderDoubleClick">

Callback fired when a double click event comes from a column header element.

Param: params

With all properties from [[GridColumnHeaderParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonColumnHeaderEnter

onColumnHeaderEnter?: GridEventListener<"columnHeaderEnter">

Callback fired when a mouse enter event comes from a column header element.

Param: params

With all properties from [[GridColumnHeaderParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonColumnHeaderLeave

onColumnHeaderLeave?: GridEventListener<"columnHeaderLeave">

Callback fired when a mouse leave event comes from a column header element.

Param: params

With all properties from [[GridColumnHeaderParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonColumnHeaderOut

onColumnHeaderOut?: GridEventListener<"columnHeaderOut">

Callback fired when a mouseout event comes from a column header element.

Param: params

With all properties from [[GridColumnHeaderParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonColumnHeaderOver

onColumnHeaderOver?: GridEventListener<"columnHeaderOver">

Callback fired when a mouseover event comes from a column header element.

Param: params

With all properties from [[GridColumnHeaderParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonColumnOrderChange

onColumnOrderChange?: GridEventListener<"columnOrderChange">

Callback fired when a column is reordered.

Param: params

With all properties from [[GridColumnOrderChangeParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonColumnResize

onColumnResize?: GridEventListener<"columnResize">

Callback fired while a column is being resized.

Param: params

With all properties from [[GridColumnResizeParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonColumnVisibilityModelChange

onColumnVisibilityModelChange?: ((model: GridColumnVisibilityModel, details: GridCallbackDetails<any>) => void)

Callback fired when the column visibility model changes.

Type declaration

OptionalonColumnWidthChange

onColumnWidthChange?: GridEventListener<"columnWidthChange">

Callback fired when the width of a column is changed.

Param: params

With all properties from [[GridColumnResizeParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonDensityChange

onDensityChange?: ((density: GridDensity) => void)

Callback fired when the density changes.

Type declaration

    • (density): void

    • Parameters

      Returns void

OptionalonDetailPanelExpandedRowIdsChange

onDetailPanelExpandedRowIdsChange?: ((ids: GridRowId[], details: GridCallbackDetails<any>) => void)

Callback fired when the detail panel of a row is opened or closed.

Type declaration

    • (ids, details): void

    • Parameters

      • ids: GridRowId[]

        The ids of the rows which have the detail panel open.

      • details: GridCallbackDetails<any>

        Additional details for this callback.

      Returns void

OptionalonFetchRows

onFetchRows?: GridEventListener<"fetchRows">

Callback fired when rowCount is set and the next batch of virtualized rows is rendered.

Param: params

With all properties from [[GridFetchRowsParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonFilterModelChange

onFilterModelChange?: ((model: GridFilterModel, details: GridCallbackDetails<"filter">) => void)

Callback fired when the Filter model changes before the filters are applied.

Type declaration

    • (model, details): void

    • Parameters

      Returns void

OptionalonMenuClose

onMenuClose?: GridEventListener<"menuClose">

Callback fired when the menu is closed.

Param: params

With all properties from [[GridMenuParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonMenuOpen

onMenuOpen?: GridEventListener<"menuOpen">

Callback fired when the menu is opened.

Param: params

With all properties from [[GridMenuParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonPaginationMetaChange

onPaginationMetaChange?: ((paginationMeta: GridPaginationMeta) => void)

Callback fired when the pagination meta has changed.

Type declaration

    • (paginationMeta): void

    • Parameters

      Returns void

OptionalonPaginationModelChange

onPaginationModelChange?: ((model: GridPaginationModel, details: GridCallbackDetails<"pagination">) => void)

Callback fired when the pagination model has changed.

Type declaration

OptionalonPinnedColumnsChange

onPinnedColumnsChange?: ((pinnedColumns: GridPinnedColumnFields, details: GridCallbackDetails<any>) => void)

Callback fired when the pinned columns have changed.

Type declaration

OptionalonPreferencePanelClose

onPreferencePanelClose?: GridEventListener<"preferencePanelClose">

Callback fired when the preferences panel is closed.

Param: params

With all properties from [[GridPreferencePanelParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonPreferencePanelOpen

onPreferencePanelOpen?: GridEventListener<"preferencePanelOpen">

Callback fired when the preferences panel is opened.

Param: params

With all properties from [[GridPreferencePanelParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonProcessRowUpdateError

onProcessRowUpdateError?: ((error: any) => void)

Callback called when processRowUpdate throws an error or rejects.

Type declaration

    • (error): void

    • Parameters

      • error: any

        The error thrown.

      Returns void

OptionalonResize

onResize?: GridEventListener<"debouncedResize">

Callback fired when the Data Grid is resized.

Param: containerSize

With all properties from [[ElementSize]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonRowClick

onRowClick?: GridEventListener<"rowClick">

Callback fired when a row is clicked. Not called if the target clicked is an interactive element added by the built-in columns.

Param: params

With all properties from [[GridRowParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonRowCountChange

onRowCountChange?: ((count: number) => void)

Callback fired when the row count has changed.

Type declaration

    • (count): void

    • Parameters

      • count: number

        Updated row count.

      Returns void

OptionalonRowDoubleClick

onRowDoubleClick?: GridEventListener<"rowDoubleClick">

Callback fired when a double click event comes from a row container element.

Param: params

With all properties from [[RowParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonRowEditStart

onRowEditStart?: GridEventListener<"rowEditStart">

Callback fired when the row turns to edit mode.

Param: params

With all properties from [[GridRowParams]].

Param: event

The event that caused this prop to be called.

OptionalonRowEditStop

onRowEditStop?: GridEventListener<"rowEditStop">

Callback fired when the row turns to view mode.

Param: params

With all properties from [[GridRowParams]].

Param: event

The event that caused this prop to be called.

OptionalonRowModesModelChange

onRowModesModelChange?: ((rowModesModel: GridRowModesModel, details: GridCallbackDetails<any>) => void)

Callback fired when the rowModesModel prop changes.

Type declaration

    • (rowModesModel, details): void

    • Parameters

      Returns void

OptionalonRowOrderChange

onRowOrderChange?: GridEventListener<"rowOrderChange">

Callback fired when a row is being reordered.

Param: params

With all properties from [[GridRowOrderChangeParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonRowSelectionModelChange

onRowSelectionModelChange?: ((rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails<any>) => void)

Callback fired when the selection state of one or multiple rows changes.

Type declaration

    • (rowSelectionModel, details): void

    • Parameters

      Returns void

OptionalonRowsScrollEnd

onRowsScrollEnd?: GridEventListener<"rowsScrollEnd">

Callback fired when scrolling to the bottom of the grid viewport.

Param: params

With all properties from [[GridRowScrollEndParams]].

Param: event

The event object.

Param: details

Additional details for this callback.

OptionalonSortModelChange

onSortModelChange?: ((model: GridSortModel, details: GridCallbackDetails<any>) => void)

Callback fired when the sort model changes before a column is sorted.

Type declaration

    • (model, details): void

    • Parameters

      Returns void

OptionalpageSizeOptions

pageSizeOptions?: readonly (number | {
    label: string;
    value: number;
})[]

Select the pageSize dynamically using the component UI.

Default

[25, 50, 100]

Optionalpagination

pagination?: boolean

If true, pagination is enabled.

Default

false

OptionalpaginationMeta

paginationMeta?: GridPaginationMeta

The extra information about the pagination state of the Data Grid. Only applicable with paginationMode="server".

OptionalpaginationMode

paginationMode?: GridFeatureMode

Pagination can be processed on the server or client-side. Set it to 'client' if you would like to handle the pagination on the client-side. Set it to 'server' if you would like to handle the pagination on the server-side.

Default

"client"

OptionalpaginationModel

paginationModel?: GridPaginationModel

The pagination model of type [[GridPaginationModel]] which refers to current page and pageSize.

OptionalpinnedColumns

pinnedColumns?: GridPinnedColumnFields

The column fields to display pinned to left or right.

OptionalpinnedRows

pinnedRows?: GridPinnedRowsProp<R>

Rows data to pin on top or bottom.

OptionalprocessRowUpdate

processRowUpdate?: ((newRow: R, oldRow: R, params: {
    rowId: GridRowId;
}) => R | Promise<R>)

Callback called before updating a row with new values in the row and cell editing.

Type declaration

    • (newRow, oldRow, params): R | Promise<R>

    • Parameters

      • newRow: R

        Row object with the new values.

      • oldRow: R

        Row object with the old values.

      • params: {
            rowId: GridRowId;
        }

        Additional parameters.

      Returns R | Promise<R>

      The final values to update the row.

OptionalresetPageOnSortFilter

resetPageOnSortFilter?: boolean

If true, the page is set to 0 after each sorting or filtering. This prop will be removed in the next major version and resetting the page will become the default behavior.

Default

false

OptionalresizeThrottleMs

resizeThrottleMs?: number

The milliseconds throttle delay for resizing the grid.

Default

60

OptionalrowBufferPx

rowBufferPx?: number

Row region in pixels to render before/after the viewport

Default

150

OptionalrowCount

rowCount?: number

Set the total number of rows, if it is different from the length of the value rows prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows. Only works with paginationMode="server", ignored when paginationMode="client".

OptionalrowHeight

rowHeight?: number

Sets the height in pixel of a row in the Data Grid.

Default

52

OptionalrowModesModel

rowModesModel?: GridRowModesModel

Controls the modes of the rows.

OptionalrowPositionsDebounceMs

rowPositionsDebounceMs?: number

The milliseconds delay to wait after measuring the row height before recalculating row positions. Setting it to a lower value could be useful when using dynamic row height, but might reduce performance when displaying a large number of rows.

Default

166

Deprecated

OptionalrowReordering

rowReordering?: boolean

If true, the reordering of rows is enabled.

Default

false

Optionalrows

rows?: readonly R[]

Set of rows of type [[GridRowsProp]].

Default

[]

OptionalrowSelection

rowSelection?: boolean

If false, the row selection mode is disabled.

Default

true

OptionalrowSelectionModel

rowSelectionModel?: GridInputRowSelectionModel

Sets the row selection model of the Data Grid.

OptionalrowSelectionPropagation

rowSelectionPropagation?: GridRowSelectionPropagation

When rowSelectionPropagation.descendants is set to true.

  • Selecting a parent selects all its filtered descendants automatically.
  • Deselecting a parent row deselects all its filtered descendants automatically.

When rowSelectionPropagation.parents is set to true

  • Selecting all the filtered descendants of a parent selects the parent automatically.
  • Deselecting a descendant of a selected parent deselects the parent automatically.

Works with tree data and row grouping on the client-side only.

Default

{ parents: false, descendants: false }

OptionalrowsLoadingMode

rowsLoadingMode?: GridFeatureMode

Loading rows can be processed on the server or client-side. Set it to 'client' if you would like enable infnite loading. Set it to 'server' if you would like to enable lazy loading. *

Default

"client"

OptionalrowSpacingType

rowSpacingType?: "border" | "margin"

Sets the type of space between rows added by getRowSpacing.

Default

"margin"

OptionalscrollbarSize

scrollbarSize?: number

Override the height/width of the Data Grid inner scrollbar.

OptionalscrollEndThreshold

scrollEndThreshold?: number

Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called.

Default

80

OptionalshowCellVerticalBorder

showCellVerticalBorder?: boolean

If true, vertical borders will be displayed between cells.

Default

false

OptionalshowColumnVerticalBorder

showColumnVerticalBorder?: boolean

If true, vertical borders will be displayed between column header items.

Default

false

OptionalslotProps

slotProps?: GridProSlotProps

Overridable components props dynamically passed to the component at rendering.

Optionalslots

slots?: Partial<GridSlots>

Overridable components.

OptionalsortingMode

sortingMode?: GridFeatureMode

Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.

Default

"client"

OptionalsortingOrder

sortingOrder?: readonly GridSortDirection[]

The order of the sorting sequence.

Default

['asc', 'desc', null]

OptionalsortModel

sortModel?: GridSortModel

Set the sort model of the Data Grid.

Optionalstyle

style?: CSSProperties

Optionalsx

sx?: SxProps<Theme>

The system prop that allows defining system overrides as well as additional CSS styles.

OptionalthrottleRowsMs

throttleRowsMs?: number

If positive, the Data Grid will throttle updates coming from apiRef.current.updateRows and apiRef.current.setRows. It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each individual update.

Default

0

OptionaltreeData

treeData?: boolean

If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop.

Default

false

Optionalunstable_dataSource

unstable_dataSource?: GridDataSource

Optionalunstable_dataSourceCache

unstable_dataSourceCache?: null | GridDataSourceCache

Optionalunstable_listColumn

unstable_listColumn?: GridListColDef<R>

Definition of the column rendered when the unstable_listView prop is enabled.

Optionalunstable_listView

unstable_listView?: boolean

If true, displays the data in a list view. Use in combination with unstable_listColumn.

Optionalunstable_onDataSourceError

unstable_onDataSourceError?: ((error: Error, params: GridGetRowsParams) => void)

Optionalunstable_rowSpanning

unstable_rowSpanning?: boolean

If true, the Data Grid will auto span the cells over the rows having the same value.

Default

false

OptionalvirtualizeColumnsWithAutoRowHeight

virtualizeColumnsWithAutoRowHeight?: boolean

If true, the Data Grid enables column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.

Default

false

Settings

Member Visibility

On This Page

Properties
apiRefaria-labelaria-labelledbyautoHeightautoPageSizeautosizeOnMountautosizeOptionscellModesModelcheckboxSelectioncheckboxSelectionVisibleOnlyclassesclassNameclipboardCopyCellDelimitercolumnBufferPxcolumnGroupHeaderHeightcolumnGroupingModelcolumnHeaderHeightcolumnscolumnVisibilityModeldefaultGroupingExpansionDepthdensitydetailPanelExpandedRowIdsdisableAutosizedisableChildrenFilteringdisableChildrenSortingdisableColumnFilterdisableColumnMenudisableColumnPinningdisableColumnReorderdisableColumnResizedisableColumnSelectordisableColumnSortingdisableDensitySelectordisableEvaldisableMultipleColumnsFilteringdisableMultipleColumnsSortingdisableMultipleRowSelectiondisableRowSelectionOnClickdisableVirtualizationeditModeestimatedRowCountexperimentalFeaturesfilterDebounceMsfilterModefilterModelgetCellClassNamegetDetailPanelContentgetDetailPanelHeightgetEstimatedRowHeightgetRowClassNamegetRowHeightgetRowIdgetRowSpacinggetTreeDataPathgroupingColDefheaderFilterHeightheaderFiltershideFooterhideFooterPaginationhideFooterRowCounthideFooterSelectedRowCountignoreDiacriticsignoreValueFormatterDuringExportindeterminateCheckboxActioninitialStateisCellEditableisGroupExpandedByDefaultisRowSelectablekeepColumnPositionIfDraggedOutsidekeepNonExistentRowsSelectedloadinglocaleTextloggerlogLevelnonceonCellClickonCellDoubleClickonCellEditStartonCellEditStoponCellKeyDownonCellModesModelChangeonClipboardCopyonColumnHeaderClickonColumnHeaderContextMenuonColumnHeaderDoubleClickonColumnHeaderEnteronColumnHeaderLeaveonColumnHeaderOutonColumnHeaderOveronColumnOrderChangeonColumnResizeonColumnVisibilityModelChangeonColumnWidthChangeonDensityChangeonDetailPanelExpandedRowIdsChangeonFetchRowsonFilterModelChangeonMenuCloseonMenuOpenonPaginationMetaChangeonPaginationModelChangeonPinnedColumnsChangeonPreferencePanelCloseonPreferencePanelOpenonProcessRowUpdateErroronResizeonRowClickonRowCountChangeonRowDoubleClickonRowEditStartonRowEditStoponRowModesModelChangeonRowOrderChangeonRowSelectionModelChangeonRowsScrollEndonSortModelChangepageSizeOptionspaginationpaginationMetapaginationModepaginationModelpinnedColumnspinnedRowsprocessRowUpdateresetPageOnSortFilterresizeThrottleMsrowBufferPxrowCountrowHeightrowModesModelrowPositionsDebounceMsrowReorderingrowsrowSelectionrowSelectionModelrowSelectionPropagationrowsLoadingModerowSpacingTypescrollbarSizescrollEndThresholdshowCellVerticalBordershowColumnVerticalBorderslotPropsslotssortingModesortingOrdersortModelstylesxthrottleRowsMstreeDataunstable_dataSourceunstable_dataSourceCacheunstable_listColumnunstable_listViewunstable_onDataSourceErrorunstable_rowSpanningvirtualizeColumnsWithAutoRowHeight