Skip to content

DataGridPremium API

API reference docs for the React DataGridPremium component. Learn about the props, CSS, and other APIs of this exported module.

Demos

Import

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

Learn about the difference by reading this guide on minimizing bundle size.

Props

NameTypeDefaultDescription
columns*Array<object>-

Set of columns of type GridColDef[].

rows*Array<object>-

Set of rows of type GridRowsProp.

aggregationFunctionsobjectGRID_AGGREGATION_FUNCTIONS

Aggregation functions available on the grid.

aggregationModelobject-

Set the aggregation model of the grid.

aggregationRowsScope'all'
| 'filtered'
"filtered"

Rows used to generate the aggregated value. If filtered, the aggregated values are generated using only the rows currently passing the filtering process. If all, the aggregated values are generated using all the rows.

apiRef{ current: object }-

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

aria-labelstring-

The label of the grid.

aria-labelledbystring-

The id of the element containing a label for the grid.

autoHeightbool-

If true, the grid height is dynamic and follow the number of rows in the grid.

autoPageSizebool-

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

cellModesModelobject-

Controls the modes of the cells.

checkboxSelectionbool-

If true, the grid get a first column with a checkbox that allows to select rows.

checkboxSelectionVisibleOnlyboolfalse

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.

classesobject-

Override or extend the styles applied to the component.

See CSS classes API below for more details.

clipboardCopyCellDelimiterstring'\t'

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

columnBuffernumber3

Number of extra columns to be rendered before/after the visible slice.

columnHeaderHeightnumber56

Sets the height in pixel of the column headers in the grid.

columnThresholdnumber3

Number of rows from the columnBuffer that can be visible before a new slice is rendered.

columnVisibilityModelobject-

Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.

componentsobject-

Overridable components.

componentsPropsobject-

Overridable components props dynamically passed to the component at rendering.

defaultGroupingExpansionDepthnumber0

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

density'comfortable'
| 'compact'
| 'standard'
"standard"

Set the density of the grid.

detailPanelExpandedRowIdsArray<number
| string>
-

The row ids to show the detail panel.

disableAggregationbool-

If true, aggregation is disabled.

disableChildrenFilteringbool-

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

disableChildrenSortingbool-

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

disableClipboardPastebool-

If true, the clipboard paste is disabled.

disableColumnFilterbool-

If true, column filters are disabled.

disableColumnMenubool-

If true, the column menu is disabled.

disableColumnPinningbool-

If true, the column pinning is disabled.

disableColumnReorderbool-

If true, reordering columns is disabled.

disableColumnResizebool-

If true, resizing columns is disabled.

disableColumnSelectorbool-

If true, hiding/showing columns is disabled.

disableDensitySelectorbool-

If true, the density selector is disabled.

disableMultipleColumnsFilteringbool-

If true, filtering with multiple columns is disabled.

disableMultipleColumnsSortingbool-

If true, sorting with multiple columns is disabled.

disableMultipleRowSelectionbool-

If true, multiple selection using the Ctrl or CMD key is disabled.

disableRowGroupingbool-

If true, the row grouping is disabled.

disableRowSelectionOnClickbool-

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

disableVirtualizationbool-

If true, the virtualization is disabled.

editMode'cell'
| 'row'
"cell"

Controls whether to use the cell or row editing.

experimentalFeatures{ ariaV7?: bool, clipboardPaste?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }-

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

filterDebounceMsnumber150

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

filterMode'client'
| 'server'
"client"

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.

filterModel{ items: Array<{ field: string, id?: number
| string, operator: string, value?: any }>, logicOperator?: 'and'
| 'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and'
| 'or', quickFilterValues?: array }
-

Set the filter model of the grid.

getAggregationPositionfunc`(groupNode) => groupNode == null ? 'footer' : 'inline'`

Determines the position of an aggregated value.

Signature:function(groupNode: GridGroupNode) => GridAggregationPosition | null
  • groupNode The current group.

Returns: Position of the aggregated value (if null, the group isn't aggregated).

getCellClassNamefunc-

Function that applies CSS classes dynamically on cells.

Signature:function(params: GridCellParams) => string

Returns: The CSS class to apply to the cell.

getDetailPanelContentfunc-

Function that returns the element to render in row detail.

Signature:function(params: GridRowParams) => React.JSX.Element

Returns: The row detail element.

getDetailPanelHeightfunc"() => 500"

Function that returns the height of the row detail panel.

Signature:function(params: GridRowParams) => number | string

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

getEstimatedRowHeightfunc-

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.

Signature:function(params: GridRowHeightParams) => number | null
  • params With all properties from GridRowHeightParams.

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

getRowClassNamefunc-

Function that applies CSS classes dynamically on rows.

Signature:function(params: GridRowClassNameParams) => string

Returns: The CSS class to apply to the row.

getRowHeightfunc-

Function that sets the row height per row.

Signature:function(params: GridRowHeightParams) => GridRowHeightReturnValue
  • params With all properties from GridRowHeightParams.

Returns: The row height value. If null or undefined then the default row height is applied. If "auto" then the row height is calculated based on the content.

getRowIdfunc-

Return the id of a given GridRowModel.

getRowSpacingfunc-

Function that allows to specify the spacing between rows.

Signature:function(params: GridRowSpacingParams) => GridRowSpacing

Returns: The row spacing values.

getTreeDataPathfunc-

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.

Signature:function(row: R) => Array
  • row The row from which we want the path.

Returns: The path to the row.

groupingColDeffunc
| object
-

The grouping column used by the tree data.

hideFooterbool-

If true, the footer component is hidden.

hideFooterPaginationbool-

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

hideFooterRowCountboolfalse

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

hideFooterSelectedRowCountbool-

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

initialStateobject-

The initial state of the DataGridPremium. The data in it is set in the state on initialization but isn't controlled. If one of the data in initialState is also being controlled, then the control state wins.

isCellEditablefunc-

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

Signature:function(params: GridCellParams) => boolean

Returns: A boolean indicating if the cell is editable.

isGroupExpandedByDefaultfunc-

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

Signature:function(node: GridGroupNode) => boolean
  • node The node of the group to test.

Returns: A boolean indicating if the group is expanded.

isRowSelectablefunc-

Determines if a row can be selected.

Signature:function(params: GridRowParams) => boolean

Returns: A boolean indicating if the cell is selectable.

keepColumnPositionIfDraggedOutsidebool-

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.

keepNonExistentRowsSelectedbool-

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.

loadingbool-

If true, a loading overlay is displayed.

localeTextobject-

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

logger{ debug: func, error: func, info: func, warn: func }console

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

logLevel'debug'
| 'error'
| 'info'
| 'warn'
| false
"error" ("warn" in dev mode)

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

noncestring-

Nonce of the inline styles for Content Security Policy.

onAggregationModelChangefunc-

Callback fired when the row grouping model changes.

Signature:function(model: GridAggregationModel, details: GridCallbackDetails) => void
  • model The aggregated columns.
  • details Additional details for this callback.
onCellClickfunc-

Callback fired when any cell is clicked.

Signature:function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridCellParams.
  • event The event object.
  • details Additional details for this callback.
onCellDoubleClickfunc-

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

Signature:function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridCellParams.
  • event The event object.
  • details Additional details for this callback.
onCellEditStartfunc-

Callback fired when the cell turns to edit mode.

Signature:function(params: GridCellParams, event: MuiEvent) => void
  • params With all properties from GridCellParams.
  • event The event that caused this prop to be called.
onCellEditStopfunc-

Callback fired when the cell turns to view mode.

Signature:function(params: GridCellParams, event: MuiEvent) => void
  • params With all properties from GridCellParams.
  • event The event that caused this prop to be called.
onCellKeyDownfunc-

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

Signature:function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridCellParams.
  • event The event object.
  • details Additional details for this callback.
onCellModesModelChangefunc-

Callback fired when the cellModesModel prop changes.

Signature:function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void
  • cellModesModel Object containing which cells are in "edit" mode.
  • details Additional details for this callback.
onClipboardCopyfunc-

Callback called when the data is copied to the clipboard.

Signature:function(data: string) => void
  • data The data copied to the clipboard.
onClipboardPasteEndfunc-

Callback fired when the clipboard paste operation ends.

onClipboardPasteStartfunc-

Callback fired when the clipboard paste operation starts.

onColumnHeaderClickfunc-

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

Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridColumnHeaderParams.
  • event The event object.
  • details Additional details for this callback.
onColumnHeaderDoubleClickfunc-

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

Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridColumnHeaderParams.
  • event The event object.
  • details Additional details for this callback.
onColumnHeaderEnterfunc-

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

Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridColumnHeaderParams.
  • event The event object.
  • details Additional details for this callback.
onColumnHeaderLeavefunc-

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

Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridColumnHeaderParams.
  • event The event object.
  • details Additional details for this callback.
onColumnHeaderOutfunc-

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

Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridColumnHeaderParams.
  • event The event object.
  • details Additional details for this callback.
onColumnHeaderOverfunc-

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

Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridColumnHeaderParams.
  • event The event object.
  • details Additional details for this callback.
onColumnOrderChangefunc-

Callback fired when a column is reordered.

Signature:function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params With all properties from GridColumnOrderChangeParams.
  • event The event object.
  • details Additional details for this callback.
onColumnResizefunc-

Callback fired while a column is being resized.

Signature:function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridColumnResizeParams.
  • event The event object.
  • details Additional details for this callback.
onColumnVisibilityModelChangefunc-

Callback fired when the column visibility model changes.

Signature:function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => void
  • model The new model.
  • details Additional details for this callback.
onColumnWidthChangefunc-

Callback fired when the width of a column is changed.

Signature:function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridColumnResizeParams.
  • event The event object.
  • details Additional details for this callback.
onDetailPanelExpandedRowIdsChangefunc-

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

Signature:function(ids: Array, details: GridCallbackDetails) => void
  • ids The ids of the rows which have the detail panel open.
  • details Additional details for this callback.
onExcelExportStateChangefunc-

Callback fired when the state of the Excel export changes.

Signature:function(inProgress: string) => void
  • inProgress Indicates if the task is in progress.
onFetchRowsfunc-

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

Signature:function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params With all properties from GridFetchRowsParams.
  • event The event object.
  • details Additional details for this callback.
onFilterModelChangefunc-

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

Signature:function(model: GridFilterModel, details: GridCallbackDetails) => void
  • model With all properties from GridFilterModel.
  • details Additional details for this callback.
onMenuClosefunc-

Callback fired when the menu is closed.

Signature:function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params With all properties from GridMenuParams.
  • event The event object.
  • details Additional details for this callback.
onMenuOpenfunc-

Callback fired when the menu is opened.

Signature:function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params With all properties from GridMenuParams.
  • event The event object.
  • details Additional details for this callback.
onPaginationModelChangefunc-

Callback fired when the pagination model has changed.

Signature:function(model: GridPaginationModel, details: GridCallbackDetails) => void
  • model Updated pagination model.
  • details Additional details for this callback.
onPinnedColumnsChangefunc-

Callback fired when the pinned columns have changed.

Signature:function(pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => void
  • pinnedColumns The changed pinned columns.
  • details Additional details for this callback.
onPreferencePanelClosefunc-

Callback fired when the preferences panel is closed.

Signature:function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params With all properties from GridPreferencePanelParams.
  • event The event object.
  • details Additional details for this callback.
onPreferencePanelOpenfunc-

Callback fired when the preferences panel is opened.

Signature:function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params With all properties from GridPreferencePanelParams.
  • event The event object.
  • details Additional details for this callback.
onProcessRowUpdateErrorfunc-

Callback called when processRowUpdate throws an error or rejects.

Signature:function(error: any) => void
  • error The error thrown.
onResizefunc-

Callback fired when the grid is resized.

Signature:function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • containerSize With all properties from ElementSize.
  • event The event object.
  • details Additional details for this callback.
onRowClickfunc-

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

Signature:function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridRowParams.
  • event The event object.
  • details Additional details for this callback.
onRowDoubleClickfunc-

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

Signature:function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from RowParams.
  • event The event object.
  • details Additional details for this callback.
onRowEditCommitfunc-

Callback fired when the row changes are committed.

Signature:function(id: GridRowId, event: MuiEvent) => void
  • id The row id.
  • event The event that caused this prop to be called.
onRowEditStartfunc-

Callback fired when the row turns to edit mode.

Signature:function(params: GridRowParams, event: MuiEvent) => void
  • params With all properties from GridRowParams.
  • event The event that caused this prop to be called.
onRowEditStopfunc-

Callback fired when the row turns to view mode.

Signature:function(params: GridRowParams, event: MuiEvent) => void
  • params With all properties from GridRowParams.
  • event The event that caused this prop to be called.
onRowGroupingModelChangefunc-

Callback fired when the row grouping model changes.

Signature:function(model: GridRowGroupingModel, details: GridCallbackDetails) => void
  • model Columns used as grouping criteria.
  • details Additional details for this callback.
onRowModesModelChangefunc-

Callback fired when the rowModesModel prop changes.

Signature:function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void
  • rowModesModel Object containing which rows are in "edit" mode.
  • details Additional details for this callback.
onRowOrderChangefunc-

Callback fired when a row is being reordered.

Signature:function(params: GridRowOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params With all properties from GridRowOrderChangeParams.
  • event The event object.
  • details Additional details for this callback.
onRowSelectionModelChangefunc-

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

Signature:function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void
  • rowSelectionModel With all the row ids GridSelectionModel.
  • details Additional details for this callback.
onRowsScrollEndfunc-

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

Signature:function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params With all properties from GridRowScrollEndParams.
  • event The event object.
  • details Additional details for this callback.
onSortModelChangefunc-

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

Signature:function(model: GridSortModel, details: GridCallbackDetails) => void
  • model With all properties from GridSortModel.
  • details Additional details for this callback.
pageSizeOptionsArray<number
| { label: string, value: number }>
[25, 50, 100]

Select the pageSize dynamically using the component UI.

paginationbool-

If true, pagination is enabled.

paginationMode'client'
| 'server'
"client"

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.

paginationModel{ page: number, pageSize: number }-

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

pinnedColumns{ left?: Array<string>, right?: Array<string> }-

The column fields to display pinned to left or right.

pinnedRows{ bottom?: Array<object>, top?: Array<object> }-

Rows data to pin on top or bottom.

processRowUpdatefunc-

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

Signature:function(newRow: R, oldRow: R) => Promise | R
  • newRow Row object with the new values.
  • oldRow Row object with the old values.

Returns: The final values to update the row.

rowBuffernumber3

Number of extra rows to be rendered before/after the visible slice.

rowCountnumber-

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.

rowGroupingColumnMode'multiple'
| 'single'
'single'

If single, all the columns that are grouped are represented in the same grid column. If multiple, each column that is grouped is represented in its own grid column.

rowGroupingModelArray<string>-

Set the row grouping model of the grid.

rowHeightnumber52

Sets the height in pixel of a row in the grid.

rowModesModelobject-

Controls the modes of the rows.

rowReorderingbool-

If true, the reordering of rows is enabled.

rowSelectionbooltrue

If false, the row selection mode is disabled.

rowSelectionModelArray<number
| string>
| number
| string
-

Sets the row selection model of the grid.

rowsLoadingMode'client'
| 'server'
-

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"

rowSpacingType'border'
| 'margin'
"margin"

Sets the type of space between rows added by getRowSpacing.

rowThresholdnumber3

Number of rows from the rowBuffer that can be visible before a new slice is rendered.

scrollbarSizenumber-

Override the height/width of the grid inner scrollbar.

scrollEndThresholdnumber80

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

showCellVerticalBorderbool-

If true, the vertical borders of the cells are displayed.

showColumnVerticalBorderbool-

If true, the right border of the column headers are displayed.

slotPropsobject-

Overridable components props dynamically passed to the component at rendering.

slotsobject-

Overridable components.

sortingMode'client'
| 'server'
"client"

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.

sortingOrderArray<'asc'
| 'desc'>
['asc', 'desc', null]

The order of the sorting sequence.

sortModelArray<{ field: string, sort?: 'asc'
| 'desc' }>
-

Set the sort model of the grid.

sxArray<func
| object
| bool>
| func
| object
-

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

See the `sx` page for more details.

throttleRowsMsnumber0

If positive, the 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.

treeDatabool-

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

unstable_cellSelectionbool-

If true, the cell selection mode is enabled.

unstable_cellSelectionModelobject-

Set the cell selection model of the grid.

unstable_headerFiltersbool-

If true, enables the data grid filtering on header feature.

unstable_ignoreValueFormatterDuringExport{ clipboardExport?: bool, csvExport?: bool }
| bool
: false

If true, the 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.

unstable_onCellSelectionModelChangefunc-

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

Signature:function(cellSelectionModel: GridCellSelectionModel, details: GridCallbackDetails) => void
  • cellSelectionModel Object in the shape of GridCellSelectionModel containing the selected cells.
  • details Additional details for this callback.
unstable_splitClipboardPastedTextfunc-

The function is used to split the pasted text into rows and cells.

Signature:function(text: string) => void
  • text The text pasted from the clipboard.
The ref is forwarded to the root element.

Slots

Slot nameClass nameDefault componentDescription
baseButtonButtonThe custom Button component used in the grid.
baseCheckboxCheckboxThe custom Checkbox component used in the grid for both header and cells.
baseChipChipThe custom Chip component used in the grid.
baseFormControlFormControlThe custom FormControl component used in the grid.
baseIconButtonIconButtonThe custom IconButton component used in the grid.
baseInputAdornmentInputAdornmentThe custom InputAdornment component used in the grid.
baseInputLabelInputLabelThe custom InputLabel component used in the grid.
basePopperPopperThe custom Popper component used in the grid.
baseSelectSelectThe custom Select component used in the grid.
baseSelectOptionMenuItemThe custom SelectOption component used in the grid.
baseSwitchSwitchThe custom Switch component used in the grid.
baseTextFieldTextFieldThe custom TextField component used in the grid.
baseTooltipTooltipThe custom Tooltip component used in the grid.
booleanCellFalseIconGridCloseIconIcon displayed on the boolean cell to represent the false value.
booleanCellTrueIconGridCheckIconIcon displayed on the boolean cell to represent the true value.
cellGridCellComponent rendered for each cell.
columnFilteredIconGridFilterAltIconIcon displayed on the column header menu to show that a filter has been applied to the column.
columnHeaderFilterIconButtonGridColumnHeaderFilterIconButtonFilter icon component rendered in each column header.
columnHeadersDataGridColumnHeadersComponent responsible for rendering the column headers.
columnMenuGridColumnMenuColumn menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
columnMenuAggregationIconGridFunctionsIconIcon displayed in column menu for aggregation
columnMenuClearIconGridClearIconIcon displayed in column menu for clearing values
columnMenuFilterIconGridFilterAltIconIcon displayed in column menu for filter
columnMenuGroupIconGridGroupWorkIconIcon displayed in column menu for grouping
columnMenuHideIconGridVisibilityOffIconIcon displayed in column menu for hiding column
columnMenuIconGridTripleDotsVerticalIconIcon displayed on the side of the column header title to display the filter input component.
columnMenuManageColumnsIconGridViewColumnIconIcon displayed in column menu for showing all columns
columnMenuPinLeftIconGridPushPinLeftIconIcon displayed in column menu for left pinning
columnMenuPinRightIconGridPushPinRightIconIcon displayed in column menu for right pinning
columnMenuSortAscendingIconGridArrowUpwardIconIcon displayed in column menu for ascending sort
columnMenuSortDescendingIconGridArrowDownwardIconIcon displayed in column menu for descending sort
columnMenuUngroupIconGridWorkspacesIconIcon displayed in column menu for ungrouping
columnReorderIconGridDragIconIcon displayed on the column reorder button.
columnResizeIconGridSeparatorIconIcon displayed in between two column headers that allows to resize the column header.
columnSelectorIconGridColumnIconIcon displayed on the column menu selector tab.
columnSortedAscendingIconGridArrowUpwardIconIcon displayed on the side of the column header title when sorted in ascending order.
columnSortedDescendingIconGridArrowDownwardIconIcon displayed on the side of the column header title when sorted in descending order.
columnUnsortedIconGridColumnUnsortedIconIcon displayed on the side of the column header title when unsorted.
columnsPanelGridColumnsPanelGridColumns panel component rendered when clicking the columns button.
densityComfortableIconGridViewStreamIconIcon displayed on the "comfortable" density option in the toolbar.
densityCompactIconGridViewHeadlineIconIcon displayed on the compact density option in the toolbar.
densityStandardIconGridTableRowsIconIcon displayed on the standard density option in the toolbar.
detailPanelCollapseIconGridRemoveIconIcon displayed on the detail panel toggle column when expanded.
detailPanelExpandIconGridAddIconIcon displayed on the detail panel toggle column when collapsed.
exportIconGridSaveAltIconIcon displayed on the open export button present in the toolbar by default.
filterPanelGridFilterPanelFilter panel component rendered when clicking the filter button.
filterPanelAddIconGridAddIconIcon displayed for deleting the filter from filter panel.
filterPanelDeleteIconGridDeleteIconIcon displayed for deleting the filter from filter panel.
filterPanelRemoveAllIconGridDeleteForeverIconIcon displayed for deleting all the active filters from filter panel.
footerGridFooterFooter component rendered at the bottom of the grid viewport.
footerRowCountGridRowCountRow count component rendered in the footer
groupingCriteriaCollapseIconGridExpandMoreIconIcon displayed on the grouping column when the children are expanded
groupingCriteriaExpandIconGridKeyboardArrowRightIcon displayed on the grouping column when the children are collapsed
headerFilterCellGridHeaderFilterCellComponent responsible for showing menu adornment in Header filter row
headerFilterMenuGridHeaderFilterMenuComponent responsible for showing menu in Header filter row
loadIconGridLoadIconIcon displayed on the input while processing.
loadingOverlayGridLoadingOverlayLoading overlay component rendered when the grid is in a loading state.
moreActionsIconGridMoreVertIconIcon displayed on the actions column type to open the menu.
noResultsOverlayGridNoResultsOverlayNo results overlay component rendered when the grid has no results after filtering.
noRowsOverlayGridNoRowsOverlayNo rows overlay component rendered when the grid has no rows.
openFilterButtonIconGridFilterListIconIcon displayed on the open filter button present in the toolbar by default.
paginationPaginationPagination component rendered in the grid footer by default.
panelGridPanelPanel component wrapping the filters and columns panels.
preferencesPanelGridPreferencesPanelPreferencesPanel component rendered inside the Header component.
quickFilterClearIconGridCloseIconIcon displayed on the quick filter reset input.
quickFilterIconGridSearchIconIcon displayed on the quick filter input.
rowGridRowComponent rendered for each row.
rowReorderIconGridDragIconIcon displayed on the reorder column type to reorder a row.
skeletonCellGridSkeletonCellComponent rendered for each skeleton cell.
toolbarnullToolbar component rendered inside the Header component.
treeDataCollapseIconGridExpandMoreIconIcon displayed on the tree data toggling column when the children are expanded
treeDataExpandIconGridKeyboardArrowRightIcon displayed on the tree data toggling column when the children are collapsed