DataGridPremium API
Demos
For examples and details on the usage of this React component, visit the component demo pages:
Import
import DataGridPremium from '/packages/grid/x-data-grid-premium/src/DataGridPremium';
// or
import { DataGridPremium } from '/packages/grid/x-data-grid-premium/src';
Props
Aggregation functions available on the grid.
Type:
object
Default:
GRID_AGGREGATION_FUNCTIONS
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.
Type:
'all' | 'filtered'
Default:
"filtered"
The ref object that allows grid manipulation. Can be instantiated with useGridApiRef()
.
Type:
{ current: object }
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
If true
, the grid get a first column with a checkbox that allows to select rows.
Type:
bool
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 API below for more details.
Type:
object
The character used to separate cell values when copying to the clipboard.
Type:
string
Default:
'\t'
Number of extra columns to be rendered before/after the visible slice.
Type:
number
Default:
3
Number of rows from the columnBuffer
that can be visible before a new slice is rendered.
Type:
number
Default:
3
Set the column visibility model of the grid. If defined, the grid will ignore the hide
property in GridColDef.
Type:
object
Overridable components props dynamically passed to the component at rendering.
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
, the filtering will only be applied to the top level rows when grouping rows with the treeData
prop.
Type:
bool
If true
, the sorting will only be applied to the top level rows when grouping rows with the treeData
prop.
Type:
bool
If true
, multiple selection using the Ctrl or CMD key is disabled.
Type:
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.
Type:
{ ariaV7?: bool, clipboardPaste?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }
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 grid.
Type:
{ items: Array<{ field: string, id?: number | string, operator: string, value?: any }>, logicOperator?: 'and' | 'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and' | 'or', quickFilterValues?: array }
Determines the position of an aggregated value.
Type:
func
Default:
`(groupNode) => groupNode == null ? 'footer' : 'inline'`
Signature:
function(groupNode: GridGroupNode) => GridAggregationPosition | null
groupNode
The current group.
Returns: Position of the aggregated value (if null
, the group isn't aggregated).
Function that applies CSS classes dynamically on cells.
Type:
func
Signature:
function(params: GridCellParams) => string
params
With 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
Signature:
function(params: GridRowParams) => React.JSX.Element
params
With all properties from GridRowParams.
Returns: The row detail element.
Function that returns the height of the row detail panel.
Type:
func
Default:
"() => 500"
Signature:
function(params: GridRowParams) => number | string
params
With 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
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.
Function that applies CSS classes dynamically on rows.
Type:
func
Signature:
function(params: GridRowClassNameParams) => string
params
With all properties from GridRowClassNameParams.
Returns: The CSS class to apply to the row.
Function that sets the row height per row.
Type:
func
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.
Function that allows to specify the spacing between rows.
Type:
func
Signature:
function(params: GridRowSpacingParams) => GridRowSpacing
params
With 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
Signature:
function(row: R) => Array
row
The row from which we want the path.
Returns: The path to the row.
If true
, the footer component is hidden.
Type:
bool
If true
, the pagination component in the footer is hidden.
Type:
bool
If true
, the row count in the footer is hidden. It has no effect if the pagination is enabled.
Type:
bool
Default:
false
If true
, the selected row count in the footer is hidden.
Type:
bool
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.
Type:
object
Callback fired when a cell is rendered, returns true if the cell is editable.
Type:
func
Signature:
function(params: GridCellParams) => boolean
params
With 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
Signature:
function(node: GridGroupNode) => boolean
node
The node of the group to test.
Returns: A boolean indicating if the group is expanded.
Determines if a row can be selected.
Type:
func
Signature:
function(params: GridRowParams) => boolean
params
With all properties from GridRowParams.
Returns: A boolean indicating if the cell 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
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
Set the locale text of the 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 the row grouping model changes.
Type:
func
Signature:
function(model: GridAggregationModel, details: GridCallbackDetails) => void
model
The aggregated columns.details
Additional details for this callback.
Callback fired when any cell is clicked.
Type:
func
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.
Callback fired when a double click event comes from a cell element.
Type:
func
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.
Callback fired when the cell turns to edit mode.
Type:
func
Signature:
function(params: GridCellParams, event: MuiEvent) => void
params
With all properties from GridCellParams.event
The event that caused this prop to be called.
Callback fired when the cell turns to view mode.
Type:
func
Signature:
function(params: GridCellParams, event: MuiEvent) => void
params
With all properties from GridCellParams.event
The event that caused this prop to be called.
Callback fired when a keydown event comes from a cell element.
Type:
func
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.
Callback fired when the cellModesModel
prop changes.
Type:
func
Signature:
function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void
cellModesModel
Object containing which cells are in "edit" mode.details
Additional details for this callback.
Callback called when the data is copied to the clipboard.
Type:
func
Signature:
function(data: string) => void
data
The data copied to the clipboard.
Callback fired when a click event comes from a column header element.
Type:
func
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.
Callback fired when a double click event comes from a column header element.
Type:
func
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.
Callback fired when a mouse enter event comes from a column header element.
Type:
func
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.
Callback fired when a mouse leave event comes from a column header element.
Type:
func
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.
Callback fired when a mouseout event comes from a column header element.
Type:
func
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.
Callback fired when a mouseover event comes from a column header element.
Type:
func
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.
Callback fired when a column is reordered.
Type:
func
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.
Callback fired while a column is being resized.
Type:
func
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.
Callback fired when the column visibility model changes.
Type:
func
Signature:
function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => void
model
The new model.details
Additional details for this callback.
Callback fired when the width of a column is changed.
Type:
func
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.
Callback fired when the detail panel of a row is opened or closed.
Type:
func
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.
Callback fired when the state of the Excel export changes.
Type:
func
Signature:
function(inProgress: string) => void
inProgress
Indicates if the task is in progress.
Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
Type:
func
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.
Callback fired when the Filter model changes before the filters are applied.
Type:
func
Signature:
function(model: GridFilterModel, details: GridCallbackDetails) => void
model
With all properties from GridFilterModel.details
Additional details for this callback.
Callback fired when the menu is closed.
Type:
func
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.
Callback fired when the menu is opened.
Type:
func
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.
Callback fired when the pagination model has changed.
Type:
func
Signature:
function(model: GridPaginationModel, details: GridCallbackDetails) => void
model
Updated pagination model.details
Additional details for this callback.
Callback fired when the pinned columns have changed.
Type:
func
Signature:
function(pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => void
pinnedColumns
The changed pinned columns.details
Additional details for this callback.
Callback fired when the preferences panel is closed.
Type:
func
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.
Callback fired when the preferences panel is opened.
Type:
func
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.
Callback called when processRowUpdate
throws an error or rejects.
Type:
func
Signature:
function(error: any) => void
error
The error thrown.
Callback fired when the grid is resized.
Type:
func
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.
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
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.
Callback fired when a double click event comes from a row container element.
Type:
func
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.
Callback fired when the row changes are committed.
Type:
func
Signature:
function(id: GridRowId, event: MuiEvent) => void
id
The row id.event
The event that caused this prop to be called.
Callback fired when the row turns to edit mode.
Type:
func
Signature:
function(params: GridRowParams, event: MuiEvent) => void
params
With all properties from GridRowParams.event
The event that caused this prop to be called.
Callback fired when the row turns to view mode.
Type:
func
Signature:
function(params: GridRowParams, event: MuiEvent) => void
params
With all properties from GridRowParams.event
The event that caused this prop to be called.
Callback fired when the row grouping model changes.
Type:
func
Signature:
function(model: GridRowGroupingModel, details: GridCallbackDetails) => void
model
Columns used as grouping criteria.details
Additional details for this callback.
Callback fired when the rowModesModel
prop changes.
Type:
func
Signature:
function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void
rowModesModel
Object containing which rows are in "edit" mode.details
Additional details for this callback.
Callback fired when a row is being reordered.
Type:
func
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.
Callback fired when the selection state of one or multiple rows changes.
Type:
func
Signature:
function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void
rowSelectionModel
With all the row ids GridSelectionModel.details
Additional details for this callback.
Callback fired when scrolling to the bottom of the grid viewport.
Type:
func
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.
Callback fired when the sort model changes before a column is sorted.
Type:
func
Signature:
function(model: GridSortModel, details: GridCallbackDetails) => void
model
With all properties from GridSortModel.details
Additional details for this callback.
Select the pageSize dynamically using the component UI.
Type:
Array<number | { label: string, value: number }>
Default:
[25, 50, 100]
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 }
The column fields to display pinned to left or right.
Type:
{ left?: Array<string>, right?: Array<string> }
Callback called before updating a row with new values in the row and cell editing.
Type:
func
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.
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.
Type:
number
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.
Type:
'multiple' | 'single'
Default:
'single'
Sets the row selection model of the 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"
Number of rows from the rowBuffer
that can be visible before a new slice is rendered.
Type:
number
Default:
3
Set the area in px
at the bottom of the grid viewport where onRowsScrollEnd is called.
Type:
number
Default:
80
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 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
If true
, the rows will be gathered in a tree structure according to the getTreeDataPath
prop.
Type:
bool
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.
Type:
{ clipboardExport?: bool, csvExport?: bool } | bool
Default:
: false
Callback fired when the selection state of one or multiple cells changes.
Type:
func
Signature:
function(cellSelectionModel: GridCellSelectionModel, details: GridCallbackDetails) => void
cellSelectionModel
Object in the shape of GridCellSelectionModel containing the selected cells.details
Additional details for this callback.
ref
is forwarded to the root element.CSS
The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.
Styles applied to the root element of the cell with type="actions".
Styles applied to the root element of the column header when aggregated.
Styles applied to the root element of the header when aggregation if headerAlign="left"
.
Styles applied to the root element of the header when aggregation if headerAlign="center"
.
Styles applied to the root element of the header when aggregation if headerAlign="right"
.
Styles applied to the aggregation label in the column header when aggregated.
Styles applied to the cell element if the cell is editable.
Styles applied to the cell element if the cell is in edit mode.
Styles applied to the cell element if the cell has a custom renderer.
Styles applied to the cell element if it is at the top edge of a cell selection range.
Styles applied to the cell element if it is at the bottom edge of a cell selection range.
Styles applied to the cell element if it is at the left edge of a cell selection range.
Styles applied to the cell element if it is at the right edge of a cell selection range.
Styles applied to the column header if headerAlign="center"
.
Styles applied to the column header if headerAlign="left"
.
Styles applied to the column header if headerAlign="right"
.
Styles applied to the floating column header element when it is dragged.
Styles applied to the column header if it is being dragged.
Styles applied to the column header if the type of the column is number
.
Styles applied to the column header if the column is sortable.
Styles applied to the column header if the column is sorted.
Styles applied to the column header if the column has a filter applied to it.
Styles applied to the header checkbox cell element.
Styles applied to the column header's draggable container element.
Styles applied to the row's draggable placeholder element inside the special row reorder cell.
Styles applied to the column headers wrapper if a column is being dragged.
Styles applied to the column header's title container element.
Styles applied to the column header's title excepted buttons.
Styles applied to the column group header cell if not empty.
Styles applied to the empty column group header cell.
Styles applied to the column group header cell when show column border.
Styles applied to the column headers's inner element.
Styles applied to the column headers's inner element if there is a horizontal scrollbar.
Styles applied to the column header separator if the column is resizable.
Styles applied to the column header separator if the column is being resized.
Styles applied to the column header separator if the side is "left".
Styles applied to the column header separator if the side is "right".
Styles applied to the detail panel toggle cell element.
Styles applied to the detail panel toggle cell element if expanded.
Styles applied to the root element of the cell inside a footer row.
Styles applied to the panel footer element.
Styles applied to the delete icon of the filter form component.
Styles applied to the link operator input of the filter form component.
Styles applied to the column input of the filter form component.
Styles applied to the operator input of the filter form component.
Styles applied to the value input of the filter form component.
Styles applied to the footer container element.
Styles applied to the column header icon's container.
Styles applied to the menu element.
Styles applied to the menu icon element.
Styles applied to the menu icon button element.
Styles applied to the menu icon element if the menu is open.
Styles applied to the menu list element.
Styles applied to the overlay wrapper inner element.
Styles applied to the virtualization content.
Styles applied to the virtualization content when its height is bigger than the virtualization container.
Styles applied to the virtualization render zone.
Styles applied to the left pinned column headers.
Styles applied to the right pinned column headers.
Styles applied to the root element if density is "standard" (default).
Styles applied to the root element if density is "comfortable".
Styles applied to the root element if density is "compact".
Styles applied to the root element when user selection is disabled.
Styles applied to the floating special row reorder cell element when it is dragged.
Styles applied to the last visible row element on every page of the grid.
Styles applied to the row if it has dynamic row height.
Styles applied to the row if its detail panel is open.
Styles applied to the footer row count element to show the total number of rows. Only works when pagination is disabled.
Styles applied to the row reorder cell container element.
Styles applied to the root element of the row reorder cell when dragging is allowed
Styles applied to the footer selected row count element.
Styles applied to cells, column header and other elements that have border. Sets border color only.
Styles applied the cell if `showColumnVerticalBorder={true}`.
Styles applied the column header if `showColumnVerticalBorder={true}`.
Styles applied to the root of the grouping column of the tree data.
Styles applied to the toggle of the grouping cell of the tree data.
Styles applied to the root element of the grouping criteria cell
Styles applied to the toggle of the grouping criteria cell
Styles applied to the bottom pinned rows container.
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
styleOverrides
property in a custom theme.
Slots
Default: Checkbox
Description: The custom Checkbox component used in the grid for both header and cells.
Default: InputAdornment
Description: The custom InputAdornment component used in the grid.
Default: GridCloseIcon
Description: Icon displayed on the boolean cell to represent the false value.
Default: GridCheckIcon
Description: Icon displayed on the boolean cell to represent the true value.
Default: GridFilterAltIcon
Description: Icon displayed on the column header menu to show that a filter has been applied to the column.
Default: GridColumnHeaderFilterIconButton
Description: Filter icon component rendered in each column header.
Default: DataGridColumnHeaders
Description: Component responsible for rendering the column headers.
Default: GridColumnMenu
Description: Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
Default: GridFunctionsIcon
Description: Icon displayed in column menu for aggregation
Default: GridClearIcon
Description: Icon displayed in column menu for clearing values
Default: GridGroupWorkIcon
Description: Icon displayed in column menu for grouping
Default: GridVisibilityOffIcon
Description: Icon displayed in column menu for hiding column
Default: GridTripleDotsVerticalIcon
Description: Icon displayed on the side of the column header title to display the filter input component.
Default: GridViewColumnIcon
Description: Icon displayed in column menu for showing all columns
Default: GridPushPinLeftIcon
Description: Icon displayed in column menu for left pinning
Default: GridPushPinRightIcon
Description: Icon displayed in column menu for right pinning
Default: GridArrowUpwardIcon
Description: Icon displayed in column menu for ascending sort
Default: GridArrowDownwardIcon
Description: Icon displayed in column menu for descending sort
Default: GridWorkspacesIcon
Description: Icon displayed in column menu for ungrouping
Default: GridSeparatorIcon
Description: Icon displayed in between two column headers that allows to resize the column header.
Default: GridColumnIcon
Description: Icon displayed on the column menu selector tab.
Default: GridArrowUpwardIcon
Description: Icon displayed on the side of the column header title when sorted in ascending order.
Default: GridArrowDownwardIcon
Description: Icon displayed on the side of the column header title when sorted in descending order.
Default: GridColumnUnsortedIcon
Description: Icon displayed on the side of the column header title when unsorted.
Default: GridColumnsPanel
Description: GridColumns panel component rendered when clicking the columns button.
Default: GridViewStreamIcon
Description: Icon displayed on the "comfortable" density option in the toolbar.
Default: GridViewHeadlineIcon
Description: Icon displayed on the compact density option in the toolbar.
Default: GridTableRowsIcon
Description: Icon displayed on the standard density option in the toolbar.
Default: GridRemoveIcon
Description: Icon displayed on the detail panel toggle column when expanded.
Default: GridAddIcon
Description: Icon displayed on the detail panel toggle column when collapsed.
Default: GridSaveAltIcon
Description: Icon displayed on the open export button present in the toolbar by default.
Default: GridFilterPanel
Description: Filter panel component rendered when clicking the filter button.
Default: GridAddIcon
Description: Icon displayed for deleting the filter from filter panel.
Default: GridDeleteIcon
Description: Icon displayed for deleting the filter from filter panel.
Default: GridDeleteForeverIcon
Description: Icon displayed for deleting all the active filters from filter panel.
Default: GridExpandMoreIcon
Description: Icon displayed on the grouping column when the children are expanded
Default: GridKeyboardArrowRight
Description: Icon displayed on the grouping column when the children are collapsed
Default: GridHeaderFilterCell
Description: Component responsible for showing menu adornment in Header filter row
Default: GridHeaderFilterMenu
Description: Component responsible for showing menu in Header filter row
Default: GridLoadingOverlay
Description: Loading overlay component rendered when the grid is in a loading state.
Default: GridMoreVertIcon
Description: Icon displayed on the actions
column type to open the menu.
Default: GridNoResultsOverlay
Description: No results overlay component rendered when the grid has no results after filtering.
Default: GridNoRowsOverlay
Description: No rows overlay component rendered when the grid has no rows.
Default: GridFilterListIcon
Description: Icon displayed on the open filter button present in the toolbar by default.
Default: Pagination
Description: Pagination component rendered in the grid footer by default.
Default: GridPreferencesPanel
Description: PreferencesPanel component rendered inside the Header component.
Default: GridCloseIcon
Description: Icon displayed on the quick filter reset input.
Default: GridDragIcon
Description: Icon displayed on the reorder
column type to reorder a row.
Default: GridExpandMoreIcon
Description: Icon displayed on the tree data toggling column when the children are expanded
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
styleOverrides
property in a custom theme.