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.
Props of the native component are also available.
If true, the Data Grid height is dynamic and takes as much space as it needs to display all rows.
Use it instead of a flex parent container approach, if:
- you don't need to set a minimum or maximum height for the Data Grid
- you want to avoid the scrollbar flickering when the content changes
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>, disableColumnVirtualization?: bool, expand?: bool, includeHeaderFilters?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }
Definition of the column rendered when the checkboxSelection prop is enabled.
Type:GridCheckboxSelectionColDef
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:Partial
The character used to separate cell values when copying to the clipboard.
Type:string
Default:'\t'
The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.
Type:number
Default:150
Sets the height in pixels of the column group headers in the Data Grid.
Inherits the columnHeaderHeight value if not set.
Type:number
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:GridColumnVisibilityModel
The data source of the Data Grid Pro.
Type:{ getChildrenCount?: func, getGroupKey?: func, getRows: func, updateRow?: func }
If positive, the Data Grid will periodically revalidate data source rows by re-fetching them from the server when the cache entry has expired.
If the refetched rows are different from the current rows, the grid will update the rows.
Set to 0 to disable polling.
Type:number
Default:0
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
The row ids to show the detail panel.
Type:{ add: func, clear: func, delete: func, difference: func, entries: func, forEach: func, has: func, intersection: func, isDisjointFrom: func, isSubsetOf: func, isSupersetOf: func, keys: func, size: number, symmetricDifference: func, union: func, values: func }
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 Data Grid will not use the exclude model optimization when selecting all rows.
Type:bool
Default:false
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:{ virtualizerLayoutMode?: 'controlled'
| 'uncontrolled', 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: '!='
| '<'
| '<='
| '='
| '>'
| '>='
| 'after'
| 'before'
| 'contains'
| 'doesNotContain'
| 'doesNotEqual'
| 'endsWith'
| 'equals'
| 'is'
| 'isAnyOf'
| 'isEmpty'
| 'isNotEmpty'
| 'not'
| 'onOrAfter'
| 'onOrBefore'
| 'startsWith'
| {}, value?: any }>, logicOperator?: 'and'
| 'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and'
| 'or', quickFilterValues?: Array<any> }
Function that applies CSS classes dynamically on cells.
Type:func
function(params: GridCellParams) => stringparamsWith all properties from GridCellParams.
Function that returns the element to render in row detail.
Type:func
function(params: GridRowParams) => ReactNodeparamsWith all properties from GridRowParams.
Function that returns the height of the row detail panel.
Type:func
Default:"() => 500"
function(params: GridRowParams) => number | 'auto'paramsWith all properties from GridRowParams.
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.
Function that applies CSS classes dynamically on rows.
Type:func
function(params: GridRowClassNameParams) => stringparamsWith all properties from GridRowClassNameParams.
Function that sets the row height per row.
Type:func
function(params: GridRowHeightParams) => GridRowHeightReturnValueparamsWith all properties from GridRowHeightParams.
Return the id of a given GridRowModel. Ensure the reference of this prop is stable to avoid performance implications. It could be done by either defining the prop outside of the component or by memoizing it.
Type:func
function(row: R) => GridRowIdFunction that allows to specify the spacing between rows.
Type:func
function(params: GridRowSpacingParams) => GridRowSpacingparamsWith all properties from GridRowSpacingParams.
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) => readonly ArrayrowThe row from which we want the path.
If true, the footer component is hidden.
Type:bool
Default:false
If true, the pagination component in the footer is hidden.
Type:bool
Default:false
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
Default:false
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:bool
| bool
| { clipboardExport?: bool, csvExport?: bool }
Default:false
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:GridInitialStatePro
Callback fired when a cell is rendered, returns true if the cell is editable.
Type:func
function(params: GridCellParams) => booleanparamsWith all properties from GridCellParams.
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.
Indicates whether a row is reorderable.
Type:func
function(params: @param {R} params.row The row model of the row that the current cell belongs to.
* @param {GridTreeNode} params.rowNode The node of the row that the current cell belongs to.
* ) => booleanparamsWith all properties from the row.
Determines if a row can be selected.
Type:func
function(params: GridRowParams) => booleanparamsWith all properties from GridRowParams.
Indicates if a row reorder attempt is valid.
Can be used to disable certain row reorder operations based on the context.
The internal validation is still applied, preventing unsupported use-cases.
Use isValidRowReorder() to add additional validation rules to the default ones.
Type:func
function(context: ReorderValidationContext) => booleancontextThe context object containing all information about the reorder operation.
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
The label of the Data Grid.
If the showToolbar prop is true, the label will be displayed in the toolbar and applied to the aria-label attribute of the grid.
If the showToolbar prop is false, the label will not be visible but will be applied to the aria-label attribute of the grid.
Type:string
Used together with dataSource to enable lazy loading.
If enabled, the grid stops adding paginationModel to the data requests (getRows)
and starts sending start and end values depending on the loading mode and the scroll position.
Type:bool
Default:false
If positive, the Data Grid will throttle data source requests on rendered rows interval change.
Type:number
Default:500
Definition of the column rendered when the listView prop is enabled.
Type:{ align?: 'center'
| 'left'
| 'right', cellClassName?: func
| string, display?: 'flex'
| 'text', field: string, renderCell?: func }
Set the locale text of the Data Grid. You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
Type:Partial
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'
| bool
Default:"error" ("warn" in dev mode)
If set to "always", the multi-sorting is applied without modifier key. Otherwise, the modifier key is required for multi-sorting to be applied.
Type:'always'
| 'withModifierKey'
Default:"withModifierKey"
Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute).
Type:string
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, details: GridCallbackDetails) => 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, details: GridCallbackDetails) => 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(params: string, event: { defaultMuiPrevented?: boolean | undefined; }, details: GridCallbackDetails) => void 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 contextmenu 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.
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 a data source request fails.
Type:func
function(error: GridGetRowsError | GridUpdateRowError) => voiderrorThe data source error object.
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(params: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => voideventThe 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, details: GridCallbackDetails) => 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, details: GridCallbackDetails) => 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. Prefer to use {@link https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading Server-side data-Infinite loading} unless it doesn't fulfill your needs.
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 }
Sets the type of separator between pinned columns and non-pinned columns.
Type:'border'
| 'border-and-shadow'
| 'shadow'
Default:'border-and-shadow'
Sets the type of separator between pinned rows and non-pinned rows.
Type:'border'
| 'border-and-shadow'
Default:'border-and-shadow'
Callback called before updating a row with new values in the row and cell editing.
Type:func
function(newRow: R, oldRow: R, params: { rowId: GridRowId }) => R | PromisenewRowRow object with the new values.oldRowRow object with the old values.paramsAdditional parameters.
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
Sets the row selection model of the Data Grid.
Type:{ ids: { add: func, clear: func, delete: func, difference: func, entries: func, forEach: func, has: func, intersection: func, isDisjointFrom: func, isSubsetOf: func, isSupersetOf: func, keys: func, size: number, symmetricDifference: func, union: func, values: func }, type: 'exclude'
| 'include' }
When rowSelectionPropagation.descendants is set to true.
- Selecting a parent selects all its filtered descendants automatically.
- Deselecting a parent row deselects all its filtered descendants automatically.
When rowSelectionPropagation.parents is set to true
- Selecting all the filtered descendants of a parent selects the parent automatically.
- Deselecting a descendant of a selected parent deselects the parent automatically.
Works with tree data and row grouping on the client-side only.
Type:{ descendants?: bool, parents?: bool }
Default:{ parents: true, descendants: true }
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.
Type:'client'
| 'server'
Default:"client"
Sets the type of space between rows added by getRowSpacing.
Type:'border'
| 'margin'
Default:"margin"
If true, the Data Grid will auto span the cells over the rows having the same value.
Type:bool
Default:false
Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called.
If combined with lazyLoading, it defines the area where the next data request is triggered.
Type:number
Default:80
Updates the tree path in a row model. Used when reordering rows across different parents in tree data.
Type:func
function(path: Array, row: R) => R pathThe new path for the row.rowThe row model to update.
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
Overridable components props dynamically passed to the component at rendering.
Type:GridProSlotProps
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
Sets the tab navigation behavior for the Data Grid. - "none": No Data Grid specific tab navigation. Pressing the tab key will move the focus to the next element in the tab sequence. - "content": Pressing the tab key will move the focus to the next cell in the same row or the first cell in the next row. Shift+Tab will move the focus to the previous cell in the same row or the last cell in the previous row. Tab navigation is not enabled for the header. - "header": Pressing the tab key will move the focus to the next column group, column header or header filter. Shift+Tab will move the focus to the previous column group, column header or header filter. Tab navigation is not enabled for the content. - "all": Combines the "content" and "header" behavior.
Type:'all'
| 'content'
| 'header'
| 'none'
Default:"none"
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
If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop.
Type:bool
Default:false
If true, the Data Grid enables column virtualization when getRowHeight is set to () => 'auto'.
By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.
For datasets with a large number of columns, this can cause performance issues.
The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.
Type:bool
Default:false
ref is forwarded to the root element.Theme default props
You can use MuiDataGridPro to change the default props of this component with the theme.
The custom Autocomplete component used in the grid for both header and cells.
Default component: Autocomplete
The custom Badge component used in the grid for both header and cells.
Default component: Badge
The custom Checkbox component used in the grid for both header and cells.
Default component: Checkbox
The custom CircularProgress component used in the grid.
Default component: CircularProgress
The custom LinearProgress component used in the grid.
Default component: LinearProgress
The custom Textarea component used in the grid for multiline text editing.
Default component: InputBase with multiline
Icon displayed on the boolean cell to represent the false value.
Default component: GridCloseIcon
Icon displayed on the boolean cell to represent the true value.
Default component: GridCheckIcon
Icon displayed on the column header menu to show that a filter has been applied to the column.
Default component: GridFilterAltIcon
Filter icon component rendered in each column header.
Default component: GridColumnHeaderFilterIconButton
Component responsible for rendering the column headers.
Default component: GridColumnHeaders
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
Icon displayed in column menu for clearing values
Default component: GridClearIcon
Icon displayed in column menu for hiding column
Default component: GridVisibilityOffIcon
Icon displayed on the side of the column header title to display the filter input component.
Default component: GridTripleDotsVerticalIcon
Icon displayed in column menu for showing all columns
Default component: GridViewColumnIcon
Icon displayed in column menu for left pinning
Default component: GridPushPinLeftIcon
Icon displayed in column menu for right pinning
Default component: GridPushPinRightIcon
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 between two column headers that allows to resize the column header.
Default component: GridSeparatorIcon
Component used inside Grid Columns panel to manage columns.
Default component: GridColumnsManagement
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
GridColumns panel component rendered when clicking the columns button.
Default component: GridColumnsPanel
Icon displayed on the side of the column header title when unsorted.
Default component: GridColumnUnsortedIcon
Icon displayed on the "comfortable" density option in the toolbar.
Default component: GridViewStreamIcon
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 detail panel toggle column when expanded.
Default component: GridRemoveIcon
Icon displayed on the detail panel toggle column when collapsed.
Default component: GridAddIcon
Component responsible for rendering the detail panels.
Default component: GridDetailPanels
Icon displayed on the open export button present in the toolbar by default.
Default component: GridDownloadIcon
Filter panel component rendered when clicking the filter button.
Default component: GridFilterPanel
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
Footer component rendered at the bottom of the grid viewport.
Default component: GridFooter
Row count component rendered in the footer
Default component: GridRowCount
Icon displayed on the grouping column when the children are expanded
Default component: GridExpandMoreIcon
Icon displayed on the grouping column when the children are collapsed
Default component: GridKeyboardArrowRight
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
Loading overlay component rendered when the grid is in a loading state.
Default component: GridLoadingOverlay
Icon displayed on the long text cell popup to collapse the content.
Default component: GridLongTextCellCollapseIcon
Icon displayed on the long text cell to expand the content.
Default component: GridLongTextCellExpandIcon
Icon displayed to indicate that a menu item is selected.
Default component: GridCheckIcon
Icon displayed on the `actions` column type to open the menu.
Default component: GridMoreVertIcon
No columns overlay component rendered when the grid has no columns.
Default component: GridNoColumnsOverlay
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
Icon displayed on the open filter button present in the toolbar by default.
Default component: GridFilterListIcon
Icon displayed on the `reorder` column type to reorder a row.
Default component: GridDragIcon
Icon displayed on the tree data toggling column when the children are expanded
Default component: GridExpandMoreIcon
Icon displayed on the tree data toggling column when the children are collapsed
Default component: GridKeyboardArrowRight
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.