@mui/x-data-grid
Version:
The Community plan edition of the Data Grid components (MUI X).
724 lines (723 loc) • 28.8 kB
JavaScript
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import PropTypes from 'prop-types';
import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from '../components';
import { GridContextProvider } from '../context/GridContextProvider';
import { useDataGridComponent } from './useDataGridComponent';
import { useDataGridProps } from './useDataGridProps';
import { propValidatorsDataGrid, validateProps } from '../internals/utils/propValidation';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const propValidators = [...propValidatorsDataGrid,
// Only validate in MIT version
props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref) {
const props = useDataGridProps(inProps);
const privateApiRef = useDataGridComponent(props.apiRef, props);
validateProps(props, propValidators);
return /*#__PURE__*/_jsx(GridContextProvider, {
privateApiRef: privateApiRef,
props: props,
children: /*#__PURE__*/_jsxs(GridRoot, _extends({
className: props.className,
style: props.style,
sx: props.sx,
ref: ref
}, props.forwardedProps, {
children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {}), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
}))
});
});
/**
* Demos:
* - [DataGrid](https://mui.com/x/react-data-grid/demo/)
*
* API:
* - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
*/
export const DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
DataGridRaw.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The ref object that allows Data Grid manipulation. Can be instantiated with `useGridApiRef()`.
*/
apiRef: PropTypes.shape({
current: PropTypes.object.isRequired
}),
/**
* The label of the Data Grid.
*/
'aria-label': PropTypes.string,
/**
* The id of the element containing a label for the Data Grid.
*/
'aria-labelledby': PropTypes.string,
/**
* If `true`, the Data Grid height is dynamic and follow the number of rows in the Data Grid.
* @default false
*/
autoHeight: PropTypes.bool,
/**
* If `true`, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.
* @default false
*/
autoPageSize: PropTypes.bool,
/**
* If `true`, columns are autosized after the datagrid is mounted.
* @default false
*/
autosizeOnMount: PropTypes.bool,
/**
* The options for autosize when user-initiated.
*/
autosizeOptions: PropTypes.shape({
columns: PropTypes.arrayOf(PropTypes.string),
expand: PropTypes.bool,
includeHeaders: PropTypes.bool,
includeOutliers: PropTypes.bool,
outliersFactor: PropTypes.number
}),
/**
* Controls the modes of the cells.
*/
cellModesModel: PropTypes.object,
/**
* If `true`, the Data Grid will display an extra column with checkboxes for selecting rows.
* @default false
*/
checkboxSelection: PropTypes.bool,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* The character used to separate cell values when copying to the clipboard.
* @default '\t'
*/
clipboardCopyCellDelimiter: PropTypes.string,
/**
* Column region in pixels to render before/after the viewport
* @default 150
*/
columnBufferPx: PropTypes.number,
columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
/**
* Sets the height in pixel of the column headers in the Data Grid.
* @default 56
*/
columnHeaderHeight: PropTypes.number,
/**
* Set of columns of type [[GridColDef]][].
*/
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
/**
* Set the column visibility model of the Data Grid.
* If defined, the Data Grid will ignore the `hide` property in [[GridColDef]].
*/
columnVisibilityModel: PropTypes.object,
/**
* Set the density of the Data Grid.
* @default "standard"
*/
density: PropTypes.oneOf(['comfortable', 'compact', 'standard']),
/**
* If `true`, column autosizing on header separator double-click is disabled.
* @default false
*/
disableAutosize: PropTypes.bool,
/**
* If `true`, column filters are disabled.
* @default false
*/
disableColumnFilter: PropTypes.bool,
/**
* If `true`, the column menu is disabled.
* @default false
*/
disableColumnMenu: PropTypes.bool,
/**
* If `true`, resizing columns is disabled.
* @default false
*/
disableColumnResize: PropTypes.bool,
/**
* If `true`, hiding/showing columns is disabled.
* @default false
*/
disableColumnSelector: PropTypes.bool,
/**
* If `true`, the column sorting feature will be disabled.
* @default false
*/
disableColumnSorting: PropTypes.bool,
/**
* If `true`, the density selector is disabled.
* @default false
*/
disableDensitySelector: PropTypes.bool,
/**
* If `true`, `eval()` is not used for performance optimization.
* @default false
*/
disableEval: PropTypes.bool,
/**
* If `true`, multiple selection using the Ctrl/CMD or Shift key is disabled.
* The MIT DataGrid will ignore this prop, unless `checkboxSelection` is enabled.
* @default false (`!props.checkboxSelection` for MIT Data Grid)
*/
disableMultipleRowSelection: PropTypes.bool,
/**
* If `true`, the selection on click on a row or cell is disabled.
* @default false
*/
disableRowSelectionOnClick: PropTypes.bool,
/**
* If `true`, the virtualization is disabled.
* @default false
*/
disableVirtualization: PropTypes.bool,
/**
* Controls whether to use the cell or row editing.
* @default "cell"
*/
editMode: PropTypes.oneOf(['cell', 'row']),
/**
* 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"`
*/
estimatedRowCount: PropTypes.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.
*/
experimentalFeatures: PropTypes.shape({
warnIfFocusStateIsNotSynced: PropTypes.bool
}),
/**
* The milliseconds delay to wait after a keystroke before triggering filtering.
* @default 150
*/
filterDebounceMs: PropTypes.number,
/**
* 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.
* @default "client"
*/
filterMode: PropTypes.oneOf(['client', 'server']),
/**
* Set the filter model of the Data Grid.
*/
filterModel: PropTypes.shape({
items: PropTypes.arrayOf(PropTypes.shape({
field: PropTypes.string.isRequired,
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
operator: PropTypes.string.isRequired,
value: PropTypes.any
})).isRequired,
logicOperator: PropTypes.oneOf(['and', 'or']),
quickFilterExcludeHiddenColumns: PropTypes.bool,
quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
quickFilterValues: PropTypes.array
}),
/**
* Forwarded props for the Data Grid root element.
* @ignore - do not document.
*/
forwardedProps: PropTypes.object,
/**
* Function that applies CSS classes dynamically on cells.
* @param {GridCellParams} params With all properties from [[GridCellParams]].
* @returns {string} The CSS class to apply to the cell.
*/
getCellClassName: PropTypes.func,
/**
* Function that returns the element to render in row detail.
* @param {GridRowParams} params With all properties from [[GridRowParams]].
* @returns {React.JSX.Element} The row detail element.
*/
getDetailPanelContent: PropTypes.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.
* @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
* @returns {number | null} The estimated row height value. If `null` or `undefined` then the default row height, based on the density, is applied.
*/
getEstimatedRowHeight: PropTypes.func,
/**
* Function that applies CSS classes dynamically on rows.
* @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
* @returns {string} The CSS class to apply to the row.
*/
getRowClassName: PropTypes.func,
/**
* Function that sets the row height per row.
* @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
* @returns {GridRowHeightReturnValue} 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.
*/
getRowHeight: PropTypes.func,
/**
* Return the id of a given [[GridRowModel]].
*/
getRowId: PropTypes.func,
/**
* Function that allows to specify the spacing between rows.
* @param {GridRowSpacingParams} params With all properties from [[GridRowSpacingParams]].
* @returns {GridRowSpacing} The row spacing values.
*/
getRowSpacing: PropTypes.func,
/**
* If `true`, the footer component is hidden.
* @default false
*/
hideFooter: PropTypes.bool,
/**
* If `true`, the pagination component in the footer is hidden.
* @default false
*/
hideFooterPagination: PropTypes.bool,
/**
* If `true`, the selected row count in the footer is hidden.
* @default false
*/
hideFooterSelectedRowCount: PropTypes.bool,
/**
* 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.
* @default false
*/
ignoreDiacritics: PropTypes.bool,
/**
* 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.
* @default false
*/
ignoreValueFormatterDuringExport: PropTypes.oneOfType([PropTypes.shape({
clipboardExport: PropTypes.bool,
csvExport: PropTypes.bool
}), PropTypes.bool]),
/**
* The initial state of the DataGrid.
* 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.
*/
initialState: PropTypes.object,
/**
* Callback fired when a cell is rendered, returns true if the cell is editable.
* @param {GridCellParams} params With all properties from [[GridCellParams]].
* @returns {boolean} A boolean indicating if the cell is editable.
*/
isCellEditable: PropTypes.func,
/**
* Determines if a row can be selected.
* @param {GridRowParams} params With all properties from [[GridRowParams]].
* @returns {boolean} A boolean indicating if the cell is selectable.
*/
isRowSelectable: PropTypes.func,
/**
* 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.
* @default false
*/
keepNonExistentRowsSelected: PropTypes.bool,
/**
* If `true`, a loading overlay is displayed.
*/
loading: PropTypes.bool,
/**
* 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.
*/
localeText: PropTypes.object,
/**
* Pass a custom logger in the components that implements the [[Logger]] interface.
* @default console
*/
logger: PropTypes.shape({
debug: PropTypes.func.isRequired,
error: PropTypes.func.isRequired,
info: PropTypes.func.isRequired,
warn: PropTypes.func.isRequired
}),
/**
* Allows to pass the logging level or false to turn off logging.
* @default "error" ("warn" in dev mode)
*/
logLevel: PropTypes.oneOf(['debug', 'error', 'info', 'warn', false]),
/**
* Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute).
*/
nonce: PropTypes.string,
/**
* Callback fired when any cell is clicked.
* @param {GridCellParams} params With all properties from [[GridCellParams]].
* @param {MuiEvent<React.MouseEvent>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onCellClick: PropTypes.func,
/**
* Callback fired when a double click event comes from a cell element.
* @param {GridCellParams} params With all properties from [[GridCellParams]].
* @param {MuiEvent<React.MouseEvent>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onCellDoubleClick: PropTypes.func,
/**
* Callback fired when the cell turns to edit mode.
* @param {GridCellParams} params With all properties from [[GridCellParams]].
* @param {MuiEvent<React.KeyboardEvent | React.MouseEvent>} event The event that caused this prop to be called.
*/
onCellEditStart: PropTypes.func,
/**
* Callback fired when the cell turns to view mode.
* @param {GridCellParams} params With all properties from [[GridCellParams]].
* @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
*/
onCellEditStop: PropTypes.func,
/**
* Callback fired when a keydown event comes from a cell element.
* @param {GridCellParams} params With all properties from [[GridCellParams]].
* @param {MuiEvent<React.KeyboardEvent>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onCellKeyDown: PropTypes.func,
/**
* Callback fired when the `cellModesModel` prop changes.
* @param {GridCellModesModel} cellModesModel Object containing which cells are in "edit" mode.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onCellModesModelChange: PropTypes.func,
/**
* Callback called when the data is copied to the clipboard.
* @param {string} data The data copied to the clipboard.
*/
onClipboardCopy: PropTypes.func,
/**
* Callback fired when a click event comes from a column header element.
* @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
* @param {MuiEvent<React.MouseEvent>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onColumnHeaderClick: PropTypes.func,
/**
* Callback fired when a double click event comes from a column header element.
* @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
* @param {MuiEvent<React.MouseEvent>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onColumnHeaderDoubleClick: PropTypes.func,
/**
* Callback fired when a mouse enter event comes from a column header element.
* @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
* @param {MuiEvent<React.MouseEvent>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onColumnHeaderEnter: PropTypes.func,
/**
* Callback fired when a mouse leave event comes from a column header element.
* @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
* @param {MuiEvent<React.MouseEvent>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onColumnHeaderLeave: PropTypes.func,
/**
* Callback fired when a mouseout event comes from a column header element.
* @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
* @param {MuiEvent<React.MouseEvent>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onColumnHeaderOut: PropTypes.func,
/**
* Callback fired when a mouseover event comes from a column header element.
* @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
* @param {MuiEvent<React.MouseEvent>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onColumnHeaderOver: PropTypes.func,
/**
* Callback fired when a column is reordered.
* @param {GridColumnOrderChangeParams} params With all properties from [[GridColumnOrderChangeParams]].
* @param {MuiEvent<{}>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onColumnOrderChange: PropTypes.func,
/**
* Callback fired while a column is being resized.
* @param {GridColumnResizeParams} params With all properties from [[GridColumnResizeParams]].
* @param {MuiEvent<React.MouseEvent>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onColumnResize: PropTypes.func,
/**
* Callback fired when the column visibility model changes.
* @param {GridColumnVisibilityModel} model The new model.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onColumnVisibilityModelChange: PropTypes.func,
/**
* Callback fired when the width of a column is changed.
* @param {GridColumnResizeParams} params With all properties from [[GridColumnResizeParams]].
* @param {MuiEvent<React.MouseEvent>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onColumnWidthChange: PropTypes.func,
/**
* Callback fired when the density changes.
* @param {GridDensity} density New density value.
*/
onDensityChange: PropTypes.func,
/**
* Callback fired when the Filter model changes before the filters are applied.
* @param {GridFilterModel} model With all properties from [[GridFilterModel]].
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onFilterModelChange: PropTypes.func,
/**
* Callback fired when the menu is closed.
* @param {GridMenuParams} params With all properties from [[GridMenuParams]].
* @param {MuiEvent<{}>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onMenuClose: PropTypes.func,
/**
* Callback fired when the menu is opened.
* @param {GridMenuParams} params With all properties from [[GridMenuParams]].
* @param {MuiEvent<{}>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onMenuOpen: PropTypes.func,
/**
* Callback fired when the pagination meta has changed.
* @param {GridPaginationMeta} paginationMeta Updated pagination meta.
*/
onPaginationMetaChange: PropTypes.func,
/**
* Callback fired when the pagination model has changed.
* @param {GridPaginationModel} model Updated pagination model.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onPaginationModelChange: PropTypes.func,
/**
* Callback fired when the preferences panel is closed.
* @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
* @param {MuiEvent<{}>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onPreferencePanelClose: PropTypes.func,
/**
* Callback fired when the preferences panel is opened.
* @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
* @param {MuiEvent<{}>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onPreferencePanelOpen: PropTypes.func,
/**
* Callback called when `processRowUpdate` throws an error or rejects.
* @param {any} error The error thrown.
*/
onProcessRowUpdateError: PropTypes.func,
/**
* Callback fired when the Data Grid is resized.
* @param {ElementSize} containerSize With all properties from [[ElementSize]].
* @param {MuiEvent<{}>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onResize: PropTypes.func,
/**
* Callback fired when a row is clicked.
* Not called if the target clicked is an interactive element added by the built-in columns.
* @param {GridRowParams} params With all properties from [[GridRowParams]].
* @param {MuiEvent<React.MouseEvent>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onRowClick: PropTypes.func,
/**
* Callback fired when the row count has changed.
* @param {number} count Updated row count.
*/
onRowCountChange: PropTypes.func,
/**
* Callback fired when a double click event comes from a row container element.
* @param {GridRowParams} params With all properties from [[RowParams]].
* @param {MuiEvent<React.MouseEvent>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onRowDoubleClick: PropTypes.func,
/**
* Callback fired when the row turns to edit mode.
* @param {GridRowParams} params With all properties from [[GridRowParams]].
* @param {MuiEvent<React.KeyboardEvent | React.MouseEvent>} event The event that caused this prop to be called.
*/
onRowEditStart: PropTypes.func,
/**
* Callback fired when the row turns to view mode.
* @param {GridRowParams} params With all properties from [[GridRowParams]].
* @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
*/
onRowEditStop: PropTypes.func,
/**
* Callback fired when the `rowModesModel` prop changes.
* @param {GridRowModesModel} rowModesModel Object containing which rows are in "edit" mode.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onRowModesModelChange: PropTypes.func,
/**
* Callback fired when the selection state of one or multiple rows changes.
* @param {GridRowSelectionModel} rowSelectionModel With all the row ids [[GridSelectionModel]].
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onRowSelectionModelChange: PropTypes.func,
/**
* Callback fired when the sort model changes before a column is sorted.
* @param {GridSortModel} model With all properties from [[GridSortModel]].
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onSortModelChange: PropTypes.func,
/**
* Callback fired when the state of the Data Grid is updated.
* @param {GridState} state The new state.
* @param {MuiEvent<{}>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
* @ignore - do not document.
*/
onStateChange: PropTypes.func,
/**
* Select the pageSize dynamically using the component UI.
* @default [25, 50, 100]
*/
pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
label: PropTypes.string.isRequired,
value: PropTypes.number.isRequired
})]).isRequired),
pagination: PropTypes.oneOf([true]),
/**
* The extra information about the pagination state of the Data Grid.
* Only applicable with `paginationMode="server"`.
*/
paginationMeta: PropTypes.shape({
hasNextPage: PropTypes.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.
* @default "client"
*/
paginationMode: PropTypes.oneOf(['client', 'server']),
/**
* The pagination model of type [[GridPaginationModel]] which refers to current `page` and `pageSize`.
*/
paginationModel: PropTypes.shape({
page: PropTypes.number.isRequired,
pageSize: PropTypes.number.isRequired
}),
/**
* Callback called before updating a row with new values in the row and cell editing.
* @template R
* @param {R} newRow Row object with the new values.
* @param {R} oldRow Row object with the old values.
* @returns {Promise<R> | R} The final values to update the row.
*/
processRowUpdate: PropTypes.func,
/**
* The milliseconds throttle delay for resizing the grid.
* @default 60
*/
resizeThrottleMs: PropTypes.number,
/**
* Row region in pixels to render before/after the viewport
* @default 150
*/
rowBufferPx: PropTypes.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"`.
*/
rowCount: PropTypes.number,
/**
* Sets the height in pixel of a row in the Data Grid.
* @default 52
*/
rowHeight: PropTypes.number,
/**
* Controls the modes of the rows.
*/
rowModesModel: PropTypes.object,
/**
* 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.
* @default 166
*/
rowPositionsDebounceMs: PropTypes.number,
/**
* Set of rows of type [[GridRowsProp]].
* @default []
*/
rows: PropTypes.arrayOf(PropTypes.object),
/**
* If `false`, the row selection mode is disabled.
* @default true
*/
rowSelection: PropTypes.bool,
/**
* Sets the row selection model of the Data Grid.
*/
rowSelectionModel: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), PropTypes.number, PropTypes.string]),
/**
* Sets the type of space between rows added by `getRowSpacing`.
* @default "margin"
*/
rowSpacingType: PropTypes.oneOf(['border', 'margin']),
/**
* Override the height/width of the Data Grid inner scrollbar.
*/
scrollbarSize: PropTypes.number,
/**
* If `true`, the vertical borders of the cells are displayed.
* @default false
*/
showCellVerticalBorder: PropTypes.bool,
/**
* If `true`, the right border of the column headers are displayed.
* @default false
*/
showColumnVerticalBorder: PropTypes.bool,
/**
* Overridable components props dynamically passed to the component at rendering.
*/
slotProps: PropTypes.object,
/**
* Overridable components.
*/
slots: PropTypes.object,
/**
* 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.
* @default "client"
*/
sortingMode: PropTypes.oneOf(['client', 'server']),
/**
* The order of the sorting sequence.
* @default ['asc', 'desc', null]
*/
sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])),
/**
* Set the sort model of the Data Grid.
*/
sortModel: PropTypes.arrayOf(PropTypes.shape({
field: PropTypes.string.isRequired,
sort: PropTypes.oneOf(['asc', 'desc'])
})),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
};