data-grid-ultra

data-grid-ultra

This package is a full customized data grid component base on mui data grid library.

Installation

Install the package in your project directory with:

npm install data-grid-ultra

Usage

import * as React from 'react';
import { DataGrid, GridColDef } from '@mui/x-data-grid';

const columns: GridColDef<(typeof rows)[number]>[] = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
    editable: true,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
    editable: true,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
    editable: true,
  },
  {
    field: 'fullName',
    headerName: 'Full name',
    description: 'This column has a value getter and is not sortable.',
    sortable: false,
    width: 160,
    valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

export default function DataGridDemo() {
  return (
      <DataGrid
        rows={rows}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: {
              pageSize: 5,
            },
          },
        }}
        pageSizeOptions={[5]}
        checkboxSelection
        disableRowSelectionOnClick
      />
  );
}

Props

Name	Type	Default	Description
columns*	Array<object>	-	Set of columns of type GridColDef[].
aggregationFunctions	object	GRID_AGGREGATION_FUNCTIONS	Aggregation functions available on the grid.
aggregationModel	object	-	Set the aggregation model of the grid.
aggregationRowsScope	'all'| 'filtered'	"filtered"	Rows used to generate the aggregated value. If filtered, the aggregated values are generated using only the rows currently passing the filtering process. If all, the aggregated values are generated using all the rows.
apiRef	{ current: object }	-	The ref object that allows grid manipulation. Can be instantiated with useGridApiRef().
aria-label	string	-	The label of the Data Grid.
aria-labelledby	string	-	The id of the element containing a label for the Data Grid.
autoHeight	bool	false	If true, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
autoPageSize	bool	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.
autosizeOnMount	bool	false	If true, columns are autosized after the datagrid is mounted.
autosizeOptions	{ columns?: Array<string>, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }	-	The options for autosize when user-initiated.
cellModesModel	object	-	Controls the modes of the cells.
cellSelection	bool	false	If true, the cell selection mode is enabled.
cellSelectionModel	object	-	Set the cell selection model of the grid.
checkboxSelection	bool	false	If true, the Data Grid will display an extra column with checkboxes for selecting rows.
checkboxSelectionVisibleOnly	bool	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.
classes	object	-	Override or extend the styles applied to the component.See CSS classes API below for more details.
clipboardCopyCellDelimiter	string	' '	The character used to separate cell values when copying to the clipboard.
columnBufferPx	number	150	Column region in pixels to render before/after the viewport
columnHeaderHeight	number	56	Sets the height in pixel of the column headers in the Data Grid.
columnVisibilityModel	object	-	Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the hide property in GridColDef.
defaultGroupingExpansionDepth	number	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.
density	'comfortable'| 'compact'| 'standard'	"standard"	Set the density of the Data Grid.
detailPanelExpandedRowIds	Array<number | string>	-	The row ids to show the detail panel.
disableAggregation	bool	false	If true, aggregation is disabled.
disableAutosize	bool	false	If true, column autosizing on header separator double-click is disabled.
disableChildrenFiltering	bool	false	If true, the filtering will only be applied to the top level rows when grouping rows with the treeData prop.
disableChildrenSorting	bool	false	If true, the sorting will only be applied to the top level rows when grouping rows with the treeData prop.
disableClipboardPaste	bool	false	If true, the clipboard paste is disabled.
disableColumnFilter	bool	false	If true, column filters are disabled.
disableColumnMenu	bool	false	If true, the column menu is disabled.
disableColumnPinning	bool	false	If true, the column pinning is disabled.
disableColumnReorder	bool	false	If true, reordering columns is disabled.
disableColumnResize	bool	false	If true, resizing columns is disabled.
disableColumnSelector	bool	false	If true, hiding/showing columns is disabled.
disableColumnSorting	bool	false	If true, the column sorting feature will be disabled.
disableDensitySelector	bool	false	If true, the density selector is disabled.
disableEval	bool	false	If true, eval() is not used for performance optimization.
disableMultipleColumnsFiltering	bool	false	If true, filtering with multiple columns is disabled.
disableMultipleColumnsSorting	bool	false	If true, the sorting with multiple columns is disabled.
disableMultipleRowSelection	bool	false (!props.checkboxSelection for MIT Data Grid)	If true, multiple selection using the Ctrl/CMD or Shift key is disabled. The MIT DataGrid will ignore this prop, unless checkboxSelection is enabled.
disableRowGrouping	bool	false	If true, the row grouping is disabled.
disableRowSelectionOnClick	bool	false	If true, the selection on click on a row or cell is disabled.
disableVirtualization	bool	false	If true, the virtualization is disabled.
editMode	'cell' | 'row'	"cell"	Controls whether to use the cell or row editing.
estimatedRowCount	number	-	Use if the actual rowCount is not known upfront, but an estimation is available. If some rows have children (for instance in the tree data), this number represents the amount of top level rows. Applicable only with paginationMode="server" and when rowCount="-1"
experimentalFeatures	{ warnIfFocusStateIsNotSynced?: bool }	-	Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to true, then the feature is fully disabled, and neither property nor method calls will have any effect.
filterDebounceMs	number	150	The milliseconds delay to wait after a keystroke before triggering filtering.
filterMode	'client' | 'server'	"client"	Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.
filterModel	{ items: Array<{ field: string, id?: number	string, operator: string, value?: any }>, logicOperator?: 'and'	'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and'
getAggregationPosition	func	(groupNode) => groupNode == null ? 'footer' : 'inline'	Determines the position of an aggregated value.Signature:function(groupNode: GridGroupNode) => GridAggregationPosition
getCellClassName	func	-	Function that applies CSS classes dynamically on cells.Signature:function(params: GridCellParams) => stringparams With all properties from GridCellParams.Returns: The CSS class to apply to the cell.
getDetailPanelContent	func	-	Function that returns the element to render in row detail.Signature:function(params: GridRowParams) => React.JSX.Elementparams With all properties from GridRowParams.Returns: The row detail element.
getDetailPanelHeight	func	"() => 500"	Function that returns the height of the row detail panel.Signature:function(params: GridRowParams) => number
getEstimatedRowHeight	func	-	Function that returns the estimated height for a row. Only works if dynamic row height is used. Once the row height is measured this value is discarded.Signature:function(params: GridRowHeightParams) => number
getRowClassName	func	-	Function that applies CSS classes dynamically on rows.Signature:function(params: GridRowClassNameParams) => stringparams With all properties from GridRowClassNameParams.Returns: The CSS class to apply to the row.
getRowHeight	func	-	Function that sets the row height per row.Signature:function(params: GridRowHeightParams) => GridRowHeightReturnValueparams 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.
getRowId	func	-	Return the id of a given GridRowModel.
getRowSpacing	func	-	Function that allows to specify the spacing between rows.Signature:function(params: GridRowSpacingParams) => GridRowSpacingparams With all properties from GridRowSpacingParams.Returns: The row spacing values.
getTreeDataPath	func	-	Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element.Signature:function(row: R) => Arrayrow The row from which we want the path.Returns: The path to the row.
groupingColDef	func | object	-	The grouping column used by the tree data.
headerFilterHeight	number	-	Override the height of the header filters.
headerFilters	bool	false	If true, enables the data grid filtering on header feature.
hideFooter	bool	false	If true, the footer component is hidden.
hideFooterPagination	bool	false	If true, the pagination component in the footer is hidden.
hideFooterRowCount	bool	false	If true, the row count in the footer is hidden. It has no effect if the pagination is enabled.
hideFooterSelectedRowCount	bool	false	If true, the selected row count in the footer is hidden.
ignoreDiacritics	bool	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.
ignoreValueFormatterDuringExport	{ clipboardExport?: bool, csvExport?: bool } | bool	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.
initialState	object	-	The initial state of the DataGridUltra. 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.
isCellEditable	func	-	Callback fired when a cell is rendered, returns true if the cell is editable.Signature:function(params: GridCellParams) => booleanparams With all properties from GridCellParams.Returns: A boolean indicating if the cell is editable.
isGroupExpandedByDefault	func	-	Determines if a group should be expanded after its creation. This prop takes priority over the defaultGroupingExpansionDepth prop.Signature:function(node: GridGroupNode) => booleannode The node of the group to test.Returns: A boolean indicating if the group is expanded.
isRowSelectable	func	-	Determines if a row can be selected.Signature:function(params: GridRowParams) => booleanparams With all properties from GridRowParams.Returns: A boolean indicating if the cell is selectable.
keepColumnPositionIfDraggedOutside	bool	false	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.
keepNonExistentRowsSelected	bool	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.
loading	bool	-	If true, a loading overlay is displayed.
localeText	object	-	Set the locale text of the Data Grid. You can find all the translation keys supported in the source in the GitHub repository.
logger	{ debug: func, error: func, info: func, warn: func }	console	Pass a custom logger in the components that implements the Logger interface.
logLevel	'debug' | 'error' | 'info' | 'warn' | false	"error" ("warn" in dev mode)	Allows to pass the logging level or false to turn off logging.
nonce	string	-	Nonce of the inline styles for Content Security Policy.
onAggregationModelChange	func	-	Callback fired when the row grouping model changes.Signature:function(model: GridAggregationModel, details: GridCallbackDetails) => voidmodel The aggregated columns.details Additional details for this callback.
onBeforeClipboardPasteStart	func	-	Callback fired before the clipboard paste operation starts. Use it to confirm or cancel the paste operation.Signature:function(params: object) => voidparams Params passed to the callback.
onCellClick	func	-	Callback fired when any cell is clicked.Signature:function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridCellParams.event The event object.details Additional details for this callback.
onCellDoubleClick	func	-	Callback fired when a double click event comes from a cell element.Signature:function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridCellParams.event The event object.details Additional details for this callback.
onCellEditStart	func	-	Callback fired when the cell turns to edit mode.Signature:function(params: GridCellParams, event: MuiEvent) => voidparams With all properties from GridCellParams.event The event that caused this prop to be called.
onCellEditStop	func	-	Callback fired when the cell turns to view mode.Signature:function(params: GridCellParams, event: MuiEvent) => voidparams With all properties from GridCellParams.event The event that caused this prop to be called.
onCellKeyDown	func	-	Callback fired when a keydown event comes from a cell element.Signature:function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridCellParams.event The event object.details Additional details for this callback.
onCellModesModelChange	func	-	Callback fired when the cellModesModel prop changes.Signature:function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => voidcellModesModel Object containing which cells are in "edit" mode.details Additional details for this callback.
onCellSelectionModelChange	func	-	Callback fired when the selection state of one or multiple cells changes.Signature:function(cellSelectionModel: GridCellSelectionModel, details: GridCallbackDetails) => voidcellSelectionModel Object in the shape of GridCellSelectionModel containing the selected cells.details Additional details for this callback.
onClipboardCopy	func	-	Callback called when the data is copied to the clipboard.Signature:function(data: string) => voiddata The data copied to the clipboard.
onClipboardPasteEnd	func	-	Callback fired when the clipboard paste operation ends.
onClipboardPasteStart	func	-	Callback fired when the clipboard paste operation starts.
onColumnHeaderClick	func	-	Callback fired when a click event comes from a column header element.Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnHeaderParams.event The event object.details Additional details for this callback.
onColumnHeaderDoubleClick	func	-	Callback fired when a double click event comes from a column header element.Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnHeaderParams.event The event object.details Additional details for this callback.
onColumnHeaderEnter	func	-	Callback fired when a mouse enter event comes from a column header element.Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnHeaderParams.event The event object.details Additional details for this callback.
onColumnHeaderLeave	func	-	Callback fired when a mouse leave event comes from a column header element.Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnHeaderParams.event The event object.details Additional details for this callback.
onColumnHeaderOut	func	-	Callback fired when a mouseout event comes from a column header element.Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnHeaderParams.event The event object.details Additional details for this callback.
onColumnHeaderOver	func	-	Callback fired when a mouseover event comes from a column header element.Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnHeaderParams.event The event object.details Additional details for this callback.
onColumnOrderChange	func	-	Callback fired when a column is reordered.Signature:function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparams With all properties from GridColumnOrderChangeParams.event The event object.details Additional details for this callback.
onColumnResize	func	-	Callback fired while a column is being resized.Signature:function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnResizeParams.event The event object.details Additional details for this callback.
onColumnVisibilityModelChange	func	-	Callback fired when the column visibility model changes.Signature:function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => voidmodel The new model.details Additional details for this callback.
onColumnWidthChange	func	-	Callback fired when the width of a column is changed.Signature:function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnResizeParams.event The event object.details Additional details for this callback.
onDensityChange	func	-	Callback fired when the density changes.Signature:function(density: GridDensity) => voiddensity New density value.
onDetailPanelExpandedRowIdsChange	func	-	Callback fired when the detail panel of a row is opened or closed.Signature:function(ids: Array, details: GridCallbackDetails) => voidids The ids of the rows which have the detail panel open.details Additional details for this callback.
onExcelExportStateChange	func	-	Callback fired when the state of the Excel export changes.Signature:function(inProgress: string) => voidinProgress Indicates if the task is in progress.
onFetchRows	func	-	Callback fired when rowCount is set and the next batch of virtualized rows is rendered.Signature:function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparams With all properties from GridFetchRowsParams.event The event object.details Additional details for this callback.
onFilterModelChange	func	-	Callback fired when the Filter model changes before the filters are applied.Signature:function(model: GridFilterModel, details: GridCallbackDetails) => voidmodel With all properties from GridFilterModel.details Additional details for this callback.
onMenuClose	func	-	Callback fired when the menu is closed.Signature:function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparams With all properties from GridMenuParams.event The event object.details Additional details for this callback.
onMenuOpen	func	-	Callback fired when the menu is opened.Signature:function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparams With all properties from GridMenuParams.event The event object.details Additional details for this callback.
onPaginationMetaChange	func	-	Callback fired when the pagination meta has changed.Signature:function(paginationMeta: GridPaginationMeta) => voidpaginationMeta Updated pagination meta.
onPaginationModelChange	func	-	Callback fired when the pagination model has changed.Signature:function(model: GridPaginationModel, details: GridCallbackDetails) => voidmodel Updated pagination model.details Additional details for this callback.
onPinnedColumnsChange	func	-	Callback fired when the pinned columns have changed.Signature:function(pinnedColumns: GridPinnedColumnFields, details: GridCallbackDetails) => voidpinnedColumns The changed pinned columns.details Additional details for this callback.
onPreferencePanelClose	func	-	Callback fired when the preferences panel is closed.Signature:function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparams With all properties from GridPreferencePanelParams.event The event object.details Additional details for this callback.
onPreferencePanelOpen	func	-	Callback fired when the preferences panel is opened.Signature:function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparams With all properties from GridPreferencePanelParams.event The event object.details Additional details for this callback.
onProcessRowUpdateError	func	-	Callback called when processRowUpdate throws an error or rejects.Signature:function(error: any) => voiderror The error thrown.
onResize	func	-	Callback fired when the Data Grid is resized.Signature:function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => voidcontainerSize With all properties from ElementSize.event The event object.details Additional details for this callback.
onRowClick	func	-	Callback fired when a row is clicked. Not called if the target clicked is an interactive element added by the built-in columns.Signature:function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridRowParams.event The event object.details Additional details for this callback.
onRowCountChange	func	-	Callback fired when the row count has changed.Signature:function(count: number) => voidcount Updated row count.
onRowDoubleClick	func	-	Callback fired when a double click event comes from a row container element.Signature:function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from RowParams.event The event object.details Additional details for this callback.
onRowEditStart	func	-	Callback fired when the row turns to edit mode.Signature:function(params: GridRowParams, event: MuiEvent) => voidparams With all properties from GridRowParams.event The event that caused this prop to be called.
onRowEditStop	func	-	Callback fired when the row turns to view mode.Signature:function(params: GridRowParams, event: MuiEvent) => voidparams With all properties from GridRowParams.event The event that caused this prop to be called.
onRowGroupingModelChange	func	-	Callback fired when the row grouping model changes.Signature:function(model: GridRowGroupingModel, details: GridCallbackDetails) => voidmodel Columns used as grouping criteria.details Additional details for this callback.
onRowModesModelChange	func	-	Callback fired when the rowModesModel prop changes.Signature:function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => voidrowModesModel Object containing which rows are in "edit" mode.details Additional details for this callback.
onRowOrderChange	func	-	Callback fired when a row is being reordered.Signature:function(params: GridRowOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparams With all properties from GridRowOrderChangeParams.event The event object.details Additional details for this callback.
onRowSelectionModelChange	func	-	Callback fired when the selection state of one or multiple rows changes.Signature:function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => voidrowSelectionModel With all the row ids GridSelectionModel.details Additional details for this callback.
onRowsScrollEnd	func	-	Callback fired when scrolling to the bottom of the grid viewport.Signature:function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparams With all properties from GridRowScrollEndParams.event The event object.details Additional details for this callback.
onSortModelChange	func	-	Callback fired when the sort model changes before a column is sorted.Signature:function(model: GridSortModel, details: GridCallbackDetails) => voidmodel With all properties from GridSortModel.details Additional details for this callback.
pageSizeOptions	Array<number | { label: string, value: number }>	[25, 50, 100]	Select the pageSize dynamically using the component UI.
pagination	bool	false	If true, pagination is enabled.
paginationMeta	{ hasNextPage?: bool }	-	The extra information about the pagination state of the Data Grid. Only applicable with paginationMode="server".
paginationMode	'client' | 'server'	"client"	Pagination can be processed on the server or client-side. Set it to 'client' if you would like to handle the pagination on the client-side. Set it to 'server' if you would like to handle the pagination on the server-side.
paginationModel	{ page: number, pageSize: number }	-	The pagination model of type GridPaginationModel which refers to current page and pageSize.
pinnedColumns	object	-	The column fields to display pinned to left or right.
pinnedRows	{ bottom?: Array<object>, top?: Array<object> }	-	Rows data to pin on top or bottom.
processRowUpdate	func	-	Callback called before updating a row with new values in the row and cell editing.Signature:function(newRow: R, oldRow: R) => Promise
resizeThrottleMs	number	60	The milliseconds throttle delay for resizing the grid.
rowBufferPx	number	150	Row region in pixels to render before/after the viewport
rowCount	number	-	Set the total number of rows, if it is different from the length of the value rows prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows. Only works with paginationMode="server", ignored when paginationMode="client".
rowGroupingColumnMode	'multiple' | 'single'	'single'	If single, all the columns that are grouped are represented in the same grid column. If multiple, each column that is grouped is represented in its own grid column.
rowGroupingModel	Array<string>	-	Set the row grouping model of the grid.
rowHeight	number	52	Sets the height in pixel of a row in the Data Grid.
rowModesModel	object	-	Controls the modes of the rows.
rowPositionsDebounceMs	number	166	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.
rowReordering	bool	false	If true, the reordering of rows is enabled.
rows	Array<object>	[]	Set of rows of type GridRowsProp.
rowSelection	bool	true	If false, the row selection mode is disabled.
rowSelectionModel	Array<number | string> | number | string	-	Sets the row selection model of the Data Grid.
rowsLoadingMode	'client' | 'server'	-	Loading rows can be processed on the server or client-side. Set it to 'client' if you would like enable infnite loading. Set it to 'server' if you would like to enable lazy loading. * @default "client"
rowSpacingType	'border' | 'margin'	"margin"	Sets the type of space between rows added by getRowSpacing.
scrollbarSize	number	-	Override the height/width of the Data Grid inner scrollbar.
scrollEndThreshold	number	80	Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called.
showCellVerticalBorder	bool	false	If true, the vertical borders of the cells are displayed.
showColumnVerticalBorder	bool	false	If true, the right border of the column headers are displayed.
slotProps	object	-	Overridable components props dynamically passed to the component at rendering.
slots	object	-	Overridable components.See Slots API below for more details.
sortingMode	'client' | 'server'	"client"	Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.
sortingOrder	Array<'asc' | 'desc'>	['asc', 'desc', null]	The order of the sorting sequence.
sortModel	Array<{ field: string, sort?: 'asc' | 'desc' }>	-	Set the sort model of the Data Grid.
splitClipboardPastedText	func	-	The function is used to split the pasted text into rows and cells.Signature:function(text: string) => voidtext The text pasted from the clipboard.
sx	Array<func | object | bool> | func | object	-	The system prop that allows defining system overrides as well as additional CSS styles.See the sx page for more details.
throttleRowsMs	number	0	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.
treeData	bool	false	If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop.

Slots

Slot name	Class name	Default component	Description
headerFilterCell		GridHeaderFilterCell	Component responsible for showing menu adornment in Header filter row
headerFilterMenu		GridHeaderFilterMenu	Component responsible for showing menu in Header filter row
baseChip		Chip	The custom Chip component used in the grid.
cell	.MuiDataGridPremium-cell	GridCell	Component rendered for each cell.
skeletonCell		GridSkeletonCell	Component rendered for each skeleton cell.
columnHeaderFilterIconButton		GridColumnHeaderFilterIconButton	Filter icon component rendered in each column header.
columnMenu		GridColumnMenu	Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
columnHeaders	.MuiDataGridPremium-columnHeaders	GridColumnHeaders	Component responsible for rendering the column headers.
detailPanels	.MuiDataGridPremium-detailPanels	GridDetailPanels	Component responsible for rendering the detail panels.
footer		GridFooter	Footer component rendered at the bottom of the grid viewport.
footerRowCount		GridRowCount	Row count component rendered in the footer
toolbar		null	Toolbar component rendered inside the Header component.
loadingOverlay		GridLoadingOverlay	Loading overlay component rendered when the grid is in a loading state.
noResultsOverlay		GridNoResultsOverlay	No results overlay component rendered when the grid has no results after filtering.
noRowsOverlay		GridNoRowsOverlay	No rows overlay component rendered when the grid has no rows.
pagination		Pagination	Pagination component rendered in the grid footer by default.
filterPanel		GridFilterPanel	Filter panel component rendered when clicking the filter button.
columnsPanel		GridColumnsPanel	GridColumns panel component rendered when clicking the columns button.
columnsManagement	.MuiDataGridPremium-columnsManagement	GridColumnsManagement	Component used inside Grid Columns panel to manage columns.
panel	.MuiDataGridPremium-panel	GridPanel	Panel component wrapping the filters and columns panels.
row	.MuiDataGridPremium-row	GridRow	Component rendered for each row.
baseCheckbox		Checkbox	The custom Checkbox component used in the grid for both header and cells.
baseInputAdornment		InputAdornment	The custom InputAdornment component used in the grid.
baseTextField		TextField	The custom TextField component used in the grid.
baseFormControl		FormControl	The custom FormControl component used in the grid.
baseSelect		Select	The custom Select component used in the grid.
baseButton		Button	The custom Button component used in the grid.
baseIconButton		IconButton	The custom IconButton component used in the grid.
baseTooltip		Tooltip	The custom Tooltip component used in the grid.
basePopper		Popper	The custom Popper component used in the grid.
baseInputLabel		InputLabel	The custom InputLabel component used in the grid.
baseSelectOption		MenuItem	The custom SelectOption component used in the grid.
booleanCellTrueIcon		GridCheckIcon	Icon displayed on the boolean cell to represent the true value.
booleanCellFalseIcon		GridCloseIcon	Icon displayed on the boolean cell to represent the false value.
columnMenuIcon		GridTripleDotsVerticalIcon	Icon displayed on the side of the column header title to display the filter input component.
openFilterButtonIcon		GridFilterListIcon	Icon displayed on the open filter button present in the toolbar by default.
columnFilteredIcon		GridFilterAltIcon	Icon displayed on the column header menu to show that a filter has been applied to the column.
columnSelectorIcon		GridColumnIcon	Icon displayed on the column menu selector tab.
columnUnsortedIcon		GridColumnUnsortedIcon	Icon displayed on the side of the column header title when unsorted.
columnSortedAscendingIcon		GridArrowUpwardIcon	Icon displayed on the side of the column header title when sorted in ascending order.
columnSortedDescendingIcon		GridArrowDownwardIcon	Icon displayed on the side of the column header title when sorted in descending order.
columnResizeIcon		GridSeparatorIcon	Icon displayed in between two column headers that allows to resize the column header.
densityCompactIcon		GridViewHeadlineIcon	Icon displayed on the compact density option in the toolbar.
densityStandardIcon		GridTableRowsIcon	Icon displayed on the standard density option in the toolbar.
densityComfortableIcon		GridViewStreamIcon	Icon displayed on the "comfortable" density option in the toolbar.
exportIcon		GridSaveAltIcon	Icon displayed on the open export button present in the toolbar by default.
moreActionsIcon		GridMoreVertIcon	Icon displayed on the actions column type to open the menu.
treeDataExpandIcon		GridKeyboardArrowRight	Icon displayed on the tree data toggling column when the children are collapsed
treeDataCollapseIcon		GridExpandMoreIcon	Icon displayed on the tree data toggling column when the children are expanded
groupingCriteriaExpandIcon		GridKeyboardArrowRight	Icon displayed on the grouping column when the children are collapsed
groupingCriteriaCollapseIcon		GridExpandMoreIcon	Icon displayed on the grouping column when the children are expanded
detailPanelExpandIcon		GridAddIcon	Icon displayed on the detail panel toggle column when collapsed.
detailPanelCollapseIcon		GridRemoveIcon	Icon displayed on the detail panel toggle column when expanded.
filterPanelAddIcon		GridAddIcon	Icon displayed for deleting the filter from filter panel.
filterPanelDeleteIcon		GridDeleteIcon	Icon displayed for deleting the filter from filter panel.
filterPanelRemoveAllIcon		GridDeleteForeverIcon	Icon displayed for deleting all the active filters from filter panel.
rowReorderIcon		GridDragIcon	Icon displayed on the reorder column type to reorder a row.
quickFilterIcon		GridSearchIcon	Icon displayed on the quick filter input.
quickFilterClearIcon		GridCloseIcon	Icon displayed on the quick filter reset input.
columnMenuHideIcon		GridVisibilityOffIcon	Icon displayed in column menu for hiding column
columnMenuSortAscendingIcon		GridArrowUpwardIcon	Icon displayed in column menu for ascending sort
columnMenuSortDescendingIcon		GridArrowDownwardIcon	Icon displayed in column menu for descending sort
columnMenuFilterIcon		GridFilterAltIcon	Icon displayed in column menu for filter
columnMenuManageColumnsIcon		GridViewColumnIcon	Icon displayed in column menu for showing all columns
columnMenuClearIcon		GridClearIcon	Icon displayed in column menu for clearing values
loadIcon		GridLoadIcon	Icon displayed on the input while processing.
columnReorderIcon		GridDragIcon	Icon displayed on the column reorder button.
columnMenuPinLeftIcon		GridPushPinLeftIcon	Icon displayed in column menu for left pinning
columnMenuPinRightIcon		GridPushPinRightIcon	Icon displayed in column menu for right pinning
columnMenuUngroupIcon		GridWorkspacesIcon	Icon displayed in column menu for ungrouping
columnMenuGroupIcon		GridGroupWorkIcon	Icon displayed in column menu for grouping
columnMenuAggregationIcon		GridFunctionsIcon	Icon displayed in column menu for aggregation

CSS

Class name	Rule name	Description
.MuiDataGridPremium-actionsCell	actionsCell	Styles applied to the root element of the cell with type="actions".
.MuiDataGridPremium-aggregationColumnHeader	aggregationColumnHeader	Styles applied to the root element of the column header when aggregated.
.MuiDataGridPremium-aggregationColumnHeader--alignCenter	aggregationColumnHeader--alignCenter	Styles applied to the root element of the header when aggregation if headerAlign="center".
.MuiDataGridPremium-aggregationColumnHeader--alignLeft	aggregationColumnHeader--alignLeft	Styles applied to the root element of the header when aggregation if headerAlign="left".
.MuiDataGridPremium-aggregationColumnHeader--alignRight	aggregationColumnHeader--alignRight	Styles applied to the root element of the header when aggregation if headerAlign="right".
.MuiDataGridPremium-aggregationColumnHeaderLabel	aggregationColumnHeaderLabel	Styles applied to the aggregation label in the column header when aggregated.
.MuiDataGridPremium-autoHeight	autoHeight	Styles applied to the root element if autoHeight={true}.
.MuiDataGridPremium-autosizing	autosizing	Styles applied to the root element while it is being autosized.
.MuiDataGridPremium-booleanCell	booleanCell	Styles applied to the icon of the boolean cell.
.MuiDataGridPremium-cell--editable	cell--editable	Styles applied to the cell element if the cell is editable.
.MuiDataGridPremium-cell--editing	cell--editing	Styles applied to the cell element if the cell is in edit mode.
.MuiDataGridPremium-cell--flex	cell--flex	Styles applied to the cell element in flex display mode.
.MuiDataGridPremium-cell--pinnedLeft	cell--pinnedLeft	Styles applied to the cell element if it is pinned to the left.
.MuiDataGridPremium-cell--pinnedRight	cell--pinnedRight	Styles applied to the cell element if it is pinned to the right.
.MuiDataGridPremium-cell--rangeBottom	cell--rangeBottom	Styles applied to the cell element if it is at the bottom edge of a cell selection range.
.MuiDataGridPremium-cell--rangeLeft	cell--rangeLeft	Styles applied to the cell element if it is at the left edge of a cell selection range.
.MuiDataGridPremium-cell--rangeRight	cell--rangeRight	Styles applied to the cell element if it is at the right edge of a cell selection range.
.MuiDataGridPremium-cell--rangeTop	cell--rangeTop	Styles applied to the cell element if it is at the top edge of a cell selection range.
.MuiDataGridPremium-cell--selectionMode	cell--selectionMode	Styles applied to the cell element if it is in a cell selection range.
.MuiDataGridPremium-cell--textCenter	cell--textCenter	Styles applied to the cell element if align="center".
.MuiDataGridPremium-cell--textLeft	cell--textLeft	Styles applied to the cell element if align="left".
.MuiDataGridPremium-cell--textRight	cell--textRight	Styles applied to the cell element if align="right".
.MuiDataGridPremium-cell--withLeftBorder	cell--withLeftBorder	Styles applied the cell if showColumnVerticalBorder={true}.
.MuiDataGridPremium-cell--withRightBorder	cell--withRightBorder	Styles applied the cell if showColumnVerticalBorder={true}.
.MuiDataGridPremium-cellCheckbox	cellCheckbox	Styles applied to the cell checkbox element.
.MuiDataGridPremium-cellEmpty	cellEmpty	Styles applied to the empty cell element.
.MuiDataGridPremium-cellSkeleton	cellSkeleton	Styles applied to the skeleton cell element.
.MuiDataGridPremium-checkboxInput	checkboxInput	Styles applied to the selection checkbox element.
.MuiDataGridPremium-columnHeader	columnHeader	Styles applied to the column header element.
.MuiDataGridPremium-columnHeader--alignCenter	columnHeader--alignCenter	Styles applied to the column header if headerAlign="center".
.MuiDataGridPremium-columnHeader--alignLeft	columnHeader--alignLeft	Styles applied to the column header if headerAlign="left".
.MuiDataGridPremium-columnHeader--alignRight	columnHeader--alignRight	Styles applied to the column header if headerAlign="right".
.MuiDataGridPremium-columnHeader--dragging	columnHeader--dragging	Styles applied to the floating column header element when it is dragged.
.MuiDataGridPremium-columnHeader--emptyGroup	columnHeader--emptyGroup	Styles applied to the empty column group header cell.
.MuiDataGridPremium-columnHeader--filledGroup	columnHeader--filledGroup	Styles applied to the column group header cell if not empty.
.MuiDataGridPremium-columnHeader--filtered	columnHeader--filtered	Styles applied to the column header if the column has a filter applied to it.
.MuiDataGridPremium-columnHeader--last	columnHeader--last	Styles applied to the last column header element.
.MuiDataGridPremium-columnHeader--moving	columnHeader--moving	Styles applied to the column header if it is being dragged.
.MuiDataGridPremium-columnHeader--numeric	columnHeader--numeric	Styles applied to the column header if the type of the column is number.
.MuiDataGridPremium-columnHeader--pinnedLeft	columnHeader--pinnedLeft
.MuiDataGridPremium-columnHeader--pinnedRight	columnHeader--pinnedRight
.MuiDataGridPremium-columnHeader--sortable	columnHeader--sortable	Styles applied to the column header if the column is sortable.
.MuiDataGridPremium-columnHeader--sorted	columnHeader--sorted	Styles applied to the column header if the column is sorted.
.MuiDataGridPremium-columnHeader--withLeftBorder	columnHeader--withLeftBorder
.MuiDataGridPremium-columnHeader--withRightBorder	columnHeader--withRightBorder	Styles applied the column header if showColumnVerticalBorder={true}.
.MuiDataGridPremium-columnHeaderCheckbox	columnHeaderCheckbox	Styles applied to the header checkbox cell element.
.MuiDataGridPremium-columnHeaderDraggableContainer	columnHeaderDraggableContainer	Styles applied to the column header's draggable container element.
.MuiDataGridPremium-columnHeaderTitle	columnHeaderTitle	Styles applied to the column header's title element;
.MuiDataGridPremium-columnHeaderTitleContainer	columnHeaderTitleContainer	Styles applied to the column header's title container element.
.MuiDataGridPremium-columnHeaderTitleContainerContent	columnHeaderTitleContainerContent	Styles applied to the column header's title excepted buttons.
.MuiDataGridPremium-columnSeparator	columnSeparator	Styles applied to the column header separator element.
.MuiDataGridPremium-columnSeparator--resizable	columnSeparator--resizable	Styles applied to the column header separator if the column is resizable.
.MuiDataGridPremium-columnSeparator--resizing	columnSeparator--resizing	Styles applied to the column header separator if the column is being resized.
.MuiDataGridPremium-columnSeparator--sideLeft	columnSeparator--sideLeft	Styles applied to the column header separator if the side is "left".
.MuiDataGridPremium-columnSeparator--sideRight	columnSeparator--sideRight	Styles applied to the column header separator if the side is "right".
.MuiDataGridPremium-columnsManagementFooter	columnsManagementFooter	Styles applied to the columns management footer element.
.MuiDataGridPremium-columnsManagementHeader	columnsManagementHeader	Styles applied to the columns management header element.
.MuiDataGridPremium-columnsManagementRow	columnsManagementRow	Styles applied to the columns management row element.
.MuiDataGridPremium-container--bottom	container--bottom	Styles applied to the bottom container.
.MuiDataGridPremium-container--top	container--top	Styles applied to the top container.
.MuiDataGridPremium-detailPanel	detailPanel	Styles applied to the detail panel element.
.MuiDataGridPremium-detailPanelToggleCell	detailPanelToggleCell	Styles applied to the detail panel toggle cell element.
.MuiDataGridPremium-detailPanelToggleCell--expanded	detailPanelToggleCell--expanded	Styles applied to the detail panel toggle cell element if expanded.
.MuiDataGridPremium-editBooleanCell	editBooleanCell	Styles applied to root of the boolean edit component.
.MuiDataGridPremium-editInputCell	editInputCell	Styles applied to the root of the input component.
.MuiDataGridPremium-filterForm	filterForm	Styles applied to the root of the filter form component.
.MuiDataGridPremium-filterFormColumnInput	filterFormColumnInput	Styles applied to the column input of the filter form component.
.MuiDataGridPremium-filterFormDeleteIcon	filterFormDeleteIcon	Styles applied to the delete icon of the filter form component.
.MuiDataGridPremium-filterFormLogicOperatorInput	filterFormLogicOperatorInput	Styles applied to the link operator input of the filter form component.
.MuiDataGridPremium-filterFormOperatorInput	filterFormOperatorInput	Styles applied to the operator input of the filter form component.
.MuiDataGridPremium-filterFormValueInput	filterFormValueInput	Styles applied to the value input of the filter form component.
.MuiDataGridPremium-filterIcon	filterIcon	Styles applied to the filter icon element.
.MuiDataGridPremium-footerCell	footerCell	Styles applied to the root element of the cell inside a footer row.
.MuiDataGridPremium-footerContainer	footerContainer	Styles applied to the footer container element.
.MuiDataGridPremium-groupingCriteriaCell	groupingCriteriaCell	Styles applied to the root element of the grouping criteria cell
.MuiDataGridPremium-groupingCriteriaCellToggle	groupingCriteriaCellToggle	Styles applied to the toggle of the grouping criteria cell
.MuiDataGridPremium-headerFilterRow	headerFilterRow	Styles applied to the column header filter row.
.MuiDataGridPremium-iconButtonContainer	iconButtonContainer	Styles applied to the column header icon's container.
.MuiDataGridPremium-iconSeparator	iconSeparator	Styles applied to the column header separator icon element.
.MuiDataGridPremium-main	main	Styles applied to the main container element.
.MuiDataGridPremium-main--hasPinnedRight	main--hasPinnedRight	Styles applied to the main container element when it has right pinned columns.
.MuiDataGridPremium-menu	menu	Styles applied to the menu element.
.MuiDataGridPremium-menuIcon	menuIcon	Styles applied to the menu icon element.
.MuiDataGridPremium-menuIconButton	menuIconButton	Styles applied to the menu icon button element.
.MuiDataGridPremium-menuList	menuList	Styles applied to the menu list element.
.MuiDataGridPremium-menuOpen	menuOpen	Styles applied to the menu icon element if the menu is open.
.MuiDataGridPremium-overlay	overlay	Styles applied to the overlay element.
.MuiDataGridPremium-overlayWrapper	overlayWrapper	Styles applied to the overlay wrapper element.
.MuiDataGridPremium-overlayWrapperInner	overlayWrapperInner	Styles applied to the overlay wrapper inner element.
.MuiDataGridPremium-panelContent	panelContent	Styles applied to the panel content element.
.MuiDataGridPremium-panelFooter	panelFooter	Styles applied to the panel footer element.
.MuiDataGridPremium-panelHeader	panelHeader	Styles applied to the panel header element.
.MuiDataGridPremium-panelWrapper	panelWrapper	Styles applied to the panel wrapper element.
.MuiDataGridPremium-paper	paper	Styles applied to the paper element.
.MuiDataGridPremium-pinnedColumns	pinnedColumns	Styles applied to the pinned columns.
.MuiDataGridPremium-pinnedRows	pinnedRows	Styles applied to the pinned rows container.
.MuiDataGridPremium-pinnedRows--bottom	pinnedRows--bottom	Styles applied to the bottom pinned rows container.
.MuiDataGridPremium-pinnedRows--top	pinnedRows--top	Styles applied to the top pinned rows container.
.MuiDataGridPremium-pinnedRowsRenderZone	pinnedRowsRenderZone	Styles applied to pinned rows render zones.
.MuiDataGridPremium-root	root	Styles applied to the root element.
.MuiDataGridPremium-root--densityComfortable	root--densityComfortable	Styles applied to the root element if density is "comfortable".
.MuiDataGridPremium-root--densityCompact	root--densityCompact	Styles applied to the root element if density is "compact".
.MuiDataGridPremium-root--densityStandard	root--densityStandard	Styles applied to the root element if density is "standard" (default).
.MuiDataGridPremium-root--disableUserSelection	root--disableUserSelection	Styles applied to the root element when user selection is disabled.
.MuiDataGridPremium-row--detailPanelExpanded	row--detailPanelExpanded	Styles applied to the row if its detail panel is open.
.MuiDataGridPremium-row--dragging	row--dragging	Styles applied to the floating special row reorder cell element when it is dragged.
.MuiDataGridPremium-row--dynamicHeight	row--dynamicHeight	Styles applied to the row if it has dynamic row height.
.MuiDataGridPremium-row--editable	row--editable	Styles applied to the row element if the row is editable.
.MuiDataGridPremium-row--editing	row--editing	Styles applied to the row element if the row is in edit mode.
.MuiDataGridPremium-row--firstVisible	row--firstVisible	Styles applied to the first visible row element on every page of the grid.
.MuiDataGridPremium-row--lastVisible	row--lastVisible	Styles applied to the last visible row element on every page of the grid.
.MuiDataGridPremium-rowCount	rowCount	Styles applied to the footer row count element to show the total number of rows. Only works when pagination is disabled.
.MuiDataGridPremium-rowReorderCell	rowReorderCell	Styles applied to the root element of the row reorder cell
.MuiDataGridPremium-rowReorderCell--draggable	rowReorderCell--draggable	Styles applied to the root element of the row reorder cell when dragging is allowed
.MuiDataGridPremium-rowReorderCellContainer	rowReorderCellContainer	Styles applied to the row reorder cell container element.
.MuiDataGridPremium-rowReorderCellPlaceholder	rowReorderCellPlaceholder	Styles applied to the row's draggable placeholder element inside the special row reorder cell.
.MuiDataGridPremium-scrollArea	scrollArea	Styles applied to both scroll area elements.
.MuiDataGridPremium-scrollArea--left	scrollArea--left	Styles applied to the left scroll area element.
.MuiDataGridPremium-scrollArea--right	scrollArea--right	Styles applied to the right scroll area element.
.MuiDataGridPremium-scrollbar	scrollbar	Styles applied to the scrollbars.
.MuiDataGridPremium-scrollbar--horizontal	scrollbar--horizontal	Styles applied to the horizontal scrollbar.
.MuiDataGridPremium-scrollbar--vertical	scrollbar--vertical	Styles applied to the horizontal scrollbar.
.MuiDataGridPremium-selectedRowCount	selectedRowCount	Styles applied to the footer selected row count element.
.MuiDataGridPremium-sortIcon	sortIcon	Styles applied to the sort icon element.
.MuiDataGridPremium-toolbarContainer	toolbarContainer	Styles applied to the toolbar container element.
.MuiDataGridPremium-toolbarFilterList	toolbarFilterList	Styles applied to the toolbar filter list element.
.MuiDataGridPremium-treeDataGroupingCell	treeDataGroupingCell	Styles applied to the root of the grouping column of the tree data.
.MuiDataGridPremium-treeDataGroupingCellToggle	treeDataGroupingCellToggle	Styles applied to the toggle of the grouping cell of the tree data.
.MuiDataGridPremium-virtualScroller	virtualScroller	Styles applied to the virtualization container.
.MuiDataGridPremium-virtualScrollerContent	virtualScrollerContent	Styles applied to the virtualization content.
.MuiDataGridPremium-virtualScrollerContent--overflowed	virtualScrollerContent--overflowed	Styles applied to the virtualization content when its height is bigger than the virtualization container.
.MuiDataGridPremium-virtualScrollerRenderZone	virtualScrollerRenderZone	Styles applied to the virtualization render zone.
.MuiDataGridPremium-withBorderColor	withBorderColor	Styles applied to cells, column header and other elements that have border. Sets border color only.
.MuiDataGridPremium-withVerticalBorder	withVerticalBorder	Styles applied the grid if showColumnVerticalBorder={true}.