DataGridPro API
API reference docs for the React DataGridPro component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { DataGridPro } from '@mui/x-data-grid-pro/DataGridPro';
// or
import { DataGridPro } from '@mui/x-data-grid-pro';
// or
import { DataGridPro } from '@mui/x-data-grid-premium';Learn about the difference by reading this guide on minimizing bundle size.
The ref object that allows grid manipulation. Can be instantiated with useGridApiRef().
Type:{ current: object }
If true, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
Type:bool
Default:false
If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.
Type:bool
Default:false
The options for autosize when user-initiated.
Type:{ columns?: Array<string>, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }
If true, the Data Grid will display an extra column with checkboxes for selecting rows.
Type:bool
Default:false
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.
Type:bool
Default:false
Override or extend the styles applied to the component.
See CSS classes API below for more details.
Type:object
The character used to separate cell values when copying to the clipboard.
Type:string
Default:'\t'
Sets the height in pixel of the column headers in the Data Grid.
Type:number
Default:56
Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the hide property in GridColDef.
Type:object
If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.
Type:number
Default:0
If true, column autosizing on header separator double-click is disabled.
Type:bool
Default:false
If true, the filtering will only be applied to the top level rows when grouping rows with the treeData prop.
Type:bool
Default:false
If true, the sorting will only be applied to the top level rows when grouping rows with the treeData prop.
Type:bool
Default:false
If true, filtering with multiple columns is disabled.
Type:bool
Default:false
If true, the sorting with multiple columns is disabled.
Type:bool
Default:false
If true, multiple selection using the Ctrl/CMD or Shift key is disabled. The MIT DataGrid will ignore this prop, unless checkboxSelection is enabled.
Type:bool
Default:false (`!props.checkboxSelection` for MIT Data Grid)
If true, the selection on click on a row or cell is disabled.
Type:bool
Default:false
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"
Type:number
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.
Type:{ warnIfFocusStateIsNotSynced?: bool }
The milliseconds delay to wait after a keystroke before triggering filtering.
Type:number
Default:150
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.
Type:'client'
| 'server'
Default:"client"
Set the filter model of the Data Grid.
Type:{ items: Array<{ field: string, id?: number
| string, operator: string, value?: any }>, logicOperator?: 'and'
| 'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and'
| 'or', quickFilterValues?: array }
Function that applies CSS classes dynamically on cells.
Type:func
function(params: GridCellParams) => stringparamsWith all properties from GridCellParams.
Returns: The CSS class to apply to the cell.
Function that returns the element to render in row detail.
Type:func
function(params: GridRowParams) => React.JSX.ElementparamsWith all properties from GridRowParams.
Returns: The row detail element.
Function that returns the height of the row detail panel.
Type:func
Default:"() => 500"
function(params: GridRowParams) => number | stringparamsWith all properties from GridRowParams.
Returns: The height in pixels or "auto" to use the content height.
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:func
function(params: GridRowHeightParams) => number | nullparamsWith 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.
Function that applies CSS classes dynamically on rows.
Type:func
function(params: GridRowClassNameParams) => stringparamsWith all properties from GridRowClassNameParams.
Returns: The CSS class to apply to the row.
Function that sets the row height per row.
Type:func
function(params: GridRowHeightParams) => GridRowHeightReturnValueparamsWith 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.
Function that allows to specify the spacing between rows.
Type:func
function(params: GridRowSpacingParams) => GridRowSpacingparamsWith all properties from GridRowSpacingParams.
Returns: The row spacing values.
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:func
function(row: R) => ArrayrowThe row from which we want the path.
Returns: The path to the row.
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.
Type:bool
Default:false
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.
Type:{ clipboardExport?: bool, csvExport?: bool }
| bool
Default:false
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.
Type:'deselect'
| 'select'
Default:"deselect"
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.
Type:object
Callback fired when a cell is rendered, returns true if the cell is editable.
Type:func
function(params: GridCellParams) => booleanparamsWith all properties from GridCellParams.
Returns: A boolean indicating if the cell is editable.
Determines if a group should be expanded after its creation. This prop takes priority over the defaultGroupingExpansionDepth prop.
Type:func
function(node: GridGroupNode) => booleannodeThe node of the group to test.
Returns: A boolean indicating if the group is expanded.
Determines if a row can be selected.
Type:func
function(params: GridRowParams) => booleanparamsWith all properties from GridRowParams.
Returns: A boolean indicating if the row is selectable.
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.
Type:bool
Default:false
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.
Type:bool
Default:false
Set the locale text of the Data Grid. You can find all the translation keys supported in the source in the GitHub repository.
Type:object
Pass a custom logger in the components that implements the Logger interface.
Type:{ debug: func, error: func, info: func, warn: func }
Default:console
Allows to pass the logging level or false to turn off logging.
Type:'debug'
| 'error'
| 'info'
| 'warn'
| false
Default:"error" ("warn" in dev mode)
Callback fired when any cell is clicked.
Type:func
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridCellParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when a double click event comes from a cell element.
Type:func
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridCellParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the cell turns to edit mode.
Type:func
function(params: GridCellParams, event: MuiEvent) => void paramsWith all properties from GridCellParams.eventThe event that caused this prop to be called.
Callback fired when the cell turns to view mode.
Type:func
function(params: GridCellParams, event: MuiEvent) => void paramsWith all properties from GridCellParams.eventThe event that caused this prop to be called.
Callback fired when a keydown event comes from a cell element.
Type:func
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridCellParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the cellModesModel prop changes.
Type:func
function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => voidcellModesModelObject containing which cells are in "edit" mode.detailsAdditional details for this callback.
Callback called when the data is copied to the clipboard.
Type:func
function(data: string) => voiddataThe data copied to the clipboard.
Callback fired when a click event comes from a column header element.
Type:func
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnHeaderParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when a double click event comes from a column header element.
Type:func
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnHeaderParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when a mouse enter event comes from a column header element.
Type:func
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnHeaderParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when a mouse leave event comes from a column header element.
Type:func
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnHeaderParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when a mouseout event comes from a column header element.
Type:func
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnHeaderParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when a mouseover event comes from a column header element.
Type:func
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnHeaderParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when a column is reordered.
Type:func
function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridColumnOrderChangeParams.eventThe event object.detailsAdditional details for this callback.
Callback fired while a column is being resized.
Type:func
function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnResizeParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the column visibility model changes.
Type:func
function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => voidmodelThe new model.detailsAdditional details for this callback.
Callback fired when the width of a column is changed.
Type:func
function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnResizeParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the density changes.
Type:func
function(density: GridDensity) => voiddensityNew density value.
Callback fired when the detail panel of a row is opened or closed.
Type:func
function(ids: Array, details: GridCallbackDetails) => void idsThe ids of the rows which have the detail panel open.detailsAdditional details for this callback.
Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
Type:func
function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridFetchRowsParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the Filter model changes before the filters are applied.
Type:func
function(model: GridFilterModel, details: GridCallbackDetails) => voidmodelWith all properties from GridFilterModel.detailsAdditional details for this callback.
Callback fired when the menu is closed.
Type:func
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridMenuParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the menu is opened.
Type:func
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridMenuParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the pagination meta has changed.
Type:func
function(paginationMeta: GridPaginationMeta) => voidpaginationMetaUpdated pagination meta.
Callback fired when the pagination model has changed.
Type:func
function(model: GridPaginationModel, details: GridCallbackDetails) => voidmodelUpdated pagination model.detailsAdditional details for this callback.
Callback fired when the pinned columns have changed.
Type:func
function(pinnedColumns: GridPinnedColumnFields, details: GridCallbackDetails) => voidpinnedColumnsThe changed pinned columns.detailsAdditional details for this callback.
Callback fired when the preferences panel is closed.
Type:func
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridPreferencePanelParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the preferences panel is opened.
Type:func
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridPreferencePanelParams.eventThe event object.detailsAdditional details for this callback.
Callback called when processRowUpdate throws an error or rejects.
Type:func
function(error: any) => voiderrorThe error thrown.
Callback fired when the Data Grid is resized.
Type:func
function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => voidcontainerSizeWith all properties from ElementSize.eventThe event object.detailsAdditional details for this callback.
Callback fired when a row is clicked. Not called if the target clicked is an interactive element added by the built-in columns.
Type:func
function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridRowParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the row count has changed.
Type:func
function(count: number) => voidcountUpdated row count.
Callback fired when a double click event comes from a row container element.
Type:func
function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from RowParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the row turns to edit mode.
Type:func
function(params: GridRowParams, event: MuiEvent) => void paramsWith all properties from GridRowParams.eventThe event that caused this prop to be called.
Callback fired when the row turns to view mode.
Type:func
function(params: GridRowParams, event: MuiEvent) => void paramsWith all properties from GridRowParams.eventThe event that caused this prop to be called.
Callback fired when the rowModesModel prop changes.
Type:func
function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => voidrowModesModelObject containing which rows are in "edit" mode.detailsAdditional details for this callback.
Callback fired when a row is being reordered.
Type:func
function(params: GridRowOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridRowOrderChangeParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the selection state of one or multiple rows changes.
Type:func
function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => voidrowSelectionModelWith all the row ids GridSelectionModel.detailsAdditional details for this callback.
Callback fired when scrolling to the bottom of the grid viewport.
Type:func
function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridRowScrollEndParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the sort model changes before a column is sorted.
Type:func
function(model: GridSortModel, details: GridCallbackDetails) => voidmodelWith all properties from GridSortModel.detailsAdditional details for this callback.
Select the pageSize dynamically using the component UI.
Type:Array<number
| { label: string, value: number }>
Default:[25, 50, 100]
The extra information about the pagination state of the Data Grid. Only applicable with paginationMode="server".
Type:{ hasNextPage?: bool }
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.
Type:'client'
| 'server'
Default:"client"
The pagination model of type GridPaginationModel which refers to current page and pageSize.
Type:{ page: number, pageSize: number }
Callback called before updating a row with new values in the row and cell editing.
Type:func
function(newRow: R, oldRow: R) => Promise | R newRowRow object with the new values.oldRowRow object with the old values.
Returns: The final values to update the row.
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".
Type: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.
Type:number
Default:166
Sets the row selection model of the Data Grid.
Type:Array<number
| string>
| number
| string
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"
Type:'client'
| 'server'
Sets the type of space between rows added by getRowSpacing.
Type:'border'
| 'margin'
Default:"margin"
Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called.
Type:number
Default:80
If true, vertical borders will be displayed between cells.
Type:bool
Default:false
If true, vertical borders will be displayed between column header items.
Type:bool
Default:false
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.
Type:'client'
| 'server'
Default:"client"
The order of the sorting sequence.
Type:Array<'asc'
| 'desc'>
Default:['asc', 'desc', null]
The system prop that allows defining system overrides as well as additional CSS styles.
See the `sx` page for more details.
Type:Array<func
| object
| bool>
| func
| object
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.
Type:number
Default:0
ref is forwarded to the root element.Component responsible for showing menu adornment in Header filter row
Default component: GridHeaderFilterCell
Component responsible for showing menu in Header filter row
Default component: GridHeaderFilterMenu
Filter icon component rendered in each column header.
Default component: GridColumnHeaderFilterIconButton
Sort icon component rendered in each column header.
Default component: GridColumnHeaderSortIcon
Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
Default component: GridColumnMenu
Component responsible for rendering the column headers.
Class name: .MuiDataGridPro-columnHeaders
Default component: GridColumnHeaders
Component responsible for rendering the detail panels.
Class name: .MuiDataGridPro-detailPanels
Default component: GridDetailPanels
Loading overlay component rendered when the grid is in a loading state.
Default component: GridLoadingOverlay
No results overlay component rendered when the grid has no results after filtering.
Default component: GridNoResultsOverlay
No rows overlay component rendered when the grid has no rows.
Default component: GridNoRowsOverlay
Filter panel component rendered when clicking the filter button.
Default component: GridFilterPanel
GridColumns panel component rendered when clicking the columns button.
Default component: GridColumnsPanel
Component used inside Grid Columns panel to manage columns.
Class name: .MuiDataGridPro-columnsManagement
Default component: GridColumnsManagement
Panel component wrapping the filters and columns panels.
Class name: .MuiDataGridPro-panel
Default component: GridPanel
The custom Checkbox component used in the grid for both header and cells.
Default component: Checkbox
The custom InputAdornment component used in the grid.
Default component: InputAdornment
Icon displayed on the boolean cell to represent the true value.
Default component: GridCheckIcon
Icon displayed on the boolean cell to represent the false value.
Default component: GridCloseIcon
Icon displayed on the side of the column header title to display the filter input component.
Default component: GridTripleDotsVerticalIcon
Icon displayed on the open filter button present in the toolbar by default.
Default component: GridFilterListIcon
Icon displayed on the column header menu to show that a filter has been applied to the column.
Default component: GridFilterAltIcon
Icon displayed on the side of the column header title when unsorted.
Default component: GridColumnUnsortedIcon
Icon displayed on the side of the column header title when sorted in ascending order.
Default component: GridArrowUpwardIcon
Icon displayed on the side of the column header title when sorted in descending order.
Default component: GridArrowDownwardIcon
Icon displayed in between two column headers that allows to resize the column header.
Default component: GridSeparatorIcon
Icon displayed on the compact density option in the toolbar.
Default component: GridViewHeadlineIcon
Icon displayed on the standard density option in the toolbar.
Default component: GridTableRowsIcon
Icon displayed on the "comfortable" density option in the toolbar.
Default component: GridViewStreamIcon
Icon displayed on the open export button present in the toolbar by default.
Default component: GridSaveAltIcon
Icon displayed on the actions column type to open the menu.
Default component: GridMoreVertIcon
Icon displayed on the tree data toggling column when the children are collapsed
Default component: GridKeyboardArrowRight
Icon displayed on the tree data toggling column when the children are expanded
Default component: GridExpandMoreIcon
Icon displayed on the grouping column when the children are collapsed
Default component: GridKeyboardArrowRight
Icon displayed on the grouping column when the children are expanded
Default component: GridExpandMoreIcon
Icon displayed on the detail panel toggle column when collapsed.
Default component: GridAddIcon
Icon displayed on the detail panel toggle column when expanded.
Default component: GridRemoveIcon
Icon displayed for deleting the filter from filter panel.
Default component: GridAddIcon
Icon displayed for deleting the filter from filter panel.
Default component: GridDeleteIcon
Icon displayed for deleting all the active filters from filter panel.
Default component: GridDeleteForeverIcon
Icon displayed on the reorder column type to reorder a row.
Default component: GridDragIcon
Icon displayed in column menu for hiding column
Default component: GridVisibilityOffIcon
Icon displayed in column menu for ascending sort
Default component: GridArrowUpwardIcon
Icon displayed in column menu for descending sort
Default component: GridArrowDownwardIcon
Icon displayed in column menu for showing all columns
Default component: GridViewColumnIcon
Icon displayed in column menu for clearing values
Default component: GridClearIcon
Icon displayed in the pivot menu for adding a field to a pivot section.
Default component: GridAddIcon
Icon displayed in the pivot menu for moving a field up.
Default component: GridExpandLessIcon
Icon displayed in the pivot menu for moving a field down.
Default component: GridExpandMoreIcon
Icon displayed in the pivot menu for moving a field to the top.
Default component: GridMoveToTopIcon
Icon displayed in the pivot menu for moving a field to the bottom.
Default component: GridMoveToBottomIcon
Icon displayed in the pivot menu to signify a pivot section is selected.
Default component: GridCheckIcon
Icon displayed in the pivot menu for removing a field from the pivot.
Default component: GridDeleteIcon
Icon displayed in column menu for left pinning
Default component: GridPushPinLeftIcon
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
Styles applied to the root element of the cell with type="actions".
Rule name:actionsCell
Styles applied to the root element of the column header when aggregated.
Rule name:aggregationColumnHeader
Styles applied to the root element of the header when aggregation if headerAlign="center".
Rule name:aggregationColumnHeader--alignCenter
Styles applied to the root element of the header when aggregation if headerAlign="left".
Rule name:aggregationColumnHeader--alignLeft
Styles applied to the root element of the header when aggregation if headerAlign="right".
Rule name:aggregationColumnHeader--alignRight
Styles applied to the aggregation label in the column header when aggregated.
Rule name:aggregationColumnHeaderLabel
Styles applied to the root element if autoHeight={true}.
Rule name:autoHeight
Styles applied to the root element while it is being autosized.
Rule name:autosizing
Styles applied to the cell element if the cell is editable.
Rule name:cell--editable
Styles applied to the cell element if the cell is in edit mode.
Rule name:cell--editing
Styles applied to the cell element in flex display mode.
Rule name:cell--flex
Styles applied to the cell element if it is pinned to the left.
Rule name:cell--pinnedLeft
Styles applied to the cell element if it is pinned to the right.
Rule name:cell--pinnedRight
Styles applied to the cell element if it is at the bottom edge of a cell selection range.
Rule name:cell--rangeBottom
Styles applied to the cell element if it is at the left edge of a cell selection range.
Rule name:cell--rangeLeft
Styles applied to the cell element if it is at the right edge of a cell selection range.
Rule name:cell--rangeRight
Styles applied to the cell element if it is at the top edge of a cell selection range.
Rule name:cell--rangeTop
Styles applied to the cell element if it is in a cell selection range.
Rule name:cell--selectionMode
Styles applied to the cell element if align="center".
Rule name:cell--textCenter
Styles applied to the cell element if align="left".
Rule name:cell--textLeft
Styles applied to the cell element if align="right".
Rule name:cell--textRight
Styles applied the cell if showColumnVerticalBorder={true}.
Rule name:cell--withLeftBorder
Styles applied the cell if showColumnVerticalBorder={true}.
Rule name:cell--withRightBorder
Styles applied to the selection checkbox element.
Rule name:checkboxInput
Styles applied to the column header if headerAlign="center".
Rule name:columnHeader--alignCenter
Styles applied to the column header if headerAlign="left".
Rule name:columnHeader--alignLeft
Styles applied to the column header if headerAlign="right".
Rule name:columnHeader--alignRight
Styles applied to the floating column header element when it is dragged.
Rule name:columnHeader--dragging
Styles applied to the empty column group header cell.
Rule name:columnHeader--emptyGroup
Styles applied to the column group header cell if not empty.
Rule name:columnHeader--filledGroup
Styles applied to the column header if the column has a filter applied to it.
Rule name:columnHeader--filtered
Styles applied to the last column header element.
Rule name:columnHeader--last
Styles applied to the column header if it is being dragged.
Rule name:columnHeader--moving
Styles applied to the column header if the type of the column is number.
Rule name:columnHeader--numeric
Styles applied to the column header if the column is sortable.
Rule name:columnHeader--sortable
Styles applied to the column header if the column is sorted.
Rule name:columnHeader--sorted
Styles applied the column header if showColumnVerticalBorder={true}.
Rule name:columnHeader--withRightBorder
Styles applied to the header checkbox cell element.
Rule name:columnHeaderCheckbox
Styles applied to the column header's draggable container element.
Rule name:columnHeaderDraggableContainer
Styles applied to the column header's title element;
Rule name:columnHeaderTitle
Styles applied to the column header's title container element.
Rule name:columnHeaderTitleContainer
Styles applied to the column header's title excepted buttons.
Rule name:columnHeaderTitleContainerContent
Styles applied to the column header separator element.
Rule name:columnSeparator
Styles applied to the column header separator if the column is resizable.
Rule name:columnSeparator--resizable
Styles applied to the column header separator if the column is being resized.
Rule name:columnSeparator--resizing
Styles applied to the column header separator if the side is "left".
Rule name:columnSeparator--sideLeft
Styles applied to the column header separator if the side is "right".
Rule name:columnSeparator--sideRight
Styles applied to the columns management header element.
Rule name:columnsManagementHeader
Styles applied to the columns management row element.
Rule name:columnsManagementRow
Styles applied to the detail panel toggle cell element.
Rule name:detailPanelToggleCell
Styles applied to the detail panel toggle cell element if expanded.
Rule name:detailPanelToggleCell--expanded
Styles applied to root of the boolean edit component.
Rule name:editBooleanCell
Styles applied to the root of the input component.
Rule name:editInputCell
Styles applied to the root of the filter form component.
Rule name:filterForm
Styles applied to the column input of the filter form component.
Rule name:filterFormColumnInput
Styles applied to the delete icon of the filter form component.
Rule name:filterFormDeleteIcon
Styles applied to the link operator input of the filter form component.
Rule name:filterFormLogicOperatorInput
Styles applied to the operator input of the filter form component.
Rule name:filterFormOperatorInput
Styles applied to the value input of the filter form component.
Rule name:filterFormValueInput
Styles applied to the root element of the grouping criteria cell
Rule name:groupingCriteriaCell
Styles applied to the toggle of the grouping criteria cell
Rule name:groupingCriteriaCellToggle
Styles applied to the column header filter row.
Rule name:headerFilterRow
Styles applied to the column header icon's container.
Rule name:iconButtonContainer
Styles applied to the column header separator icon element.
Rule name:iconSeparator
Styles applied to the main container element when it has right pinned columns.
Rule name:main--hasPinnedRight
Styles applied to the overlay wrapper element.
Rule name:overlayWrapper
Styles applied to the overlay wrapper inner element.
Rule name:overlayWrapperInner
Styles applied to the bottom pinned rows container.
Rule name:pinnedRows--bottom
Styles applied to the top pinned rows container.
Rule name:pinnedRows--top
Styles applied to pinned rows render zones.
Rule name:pinnedRowsRenderZone
Styles applied to the root element if density is "comfortable".
Rule name:root--densityComfortable
Styles applied to the root element if density is "compact".
Rule name:root--densityCompact
Styles applied to the root element if density is "standard" (default).
Rule name:root--densityStandard
Styles applied to the root element when user selection is disabled.
Rule name:root--disableUserSelection
Styles applied to the row if its detail panel is open.
Rule name:row--detailPanelExpanded
Styles applied to the floating special row reorder cell element when it is dragged.
Rule name:row--dragging
Styles applied to the row if it has dynamic row height.
Rule name:row--dynamicHeight
Styles applied to the row element if the row is editable.
Rule name:row--editable
Styles applied to the row element if the row is in edit mode.
Rule name:row--editing
Styles applied to the first visible row element on every page of the grid.
Rule name:row--firstVisible
Styles applied to the last visible row element on every page of the grid.
Rule name:row--lastVisible
Styles applied to the footer row count element to show the total number of rows. Only works when pagination is disabled.
Rule name:rowCount
Styles applied to the root element of the row reorder cell
Rule name:rowReorderCell
Styles applied to the root element of the row reorder cell when dragging is allowed
Rule name:rowReorderCell--draggable
Styles applied to the row reorder cell container element.
Rule name:rowReorderCellContainer
Styles applied to the row's draggable placeholder element inside the special row reorder cell.
Rule name:rowReorderCellPlaceholder
Styles applied to the left scroll area element.
Rule name:scrollArea--left
Styles applied to the right scroll area element.
Rule name:scrollArea--right
Styles applied to the horizontal scrollbar.
Rule name:scrollbar--horizontal
Styles applied to the horizontal scrollbar.
Rule name:scrollbar--vertical
Styles applied to the footer selected row count element.
Rule name:selectedRowCount
Styles applied to the toolbar container element.
Rule name:toolbarContainer
Styles applied to the toolbar filter list element.
Rule name:toolbarFilterList
Styles applied to the root of the grouping column of the tree data.
Rule name:treeDataGroupingCell
Styles applied to the toggle of the grouping cell of the tree data.
Rule name:treeDataGroupingCellToggle
Styles applied to the virtualization container.
Rule name:virtualScroller
Styles applied to the virtualization content.
Rule name:virtualScrollerContent
Styles applied to the virtualization content when its height is bigger than the virtualization container.
Rule name:virtualScrollerContent--overflowed
Styles applied to the virtualization render zone.
Rule name:virtualScrollerRenderZone
Styles applied to cells, column header and other elements that have border. Sets border color only.
Rule name:withBorderColor
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.