@mui/x-data-grid-premium
Version:
The Premium plan edition of the MUI X Data Grid Components.
1,093 lines (1,092 loc) • 64.6 kB
JavaScript
"use strict";
'use client';
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DataGridPremium = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _xLicense = require("@mui/x-license");
var _xDataGridPro = require("@mui/x-data-grid-pro");
var _internals = require("@mui/x-data-grid-pro/internals");
var _material = require("@mui/x-data-grid/material");
var _forwardRef = require("@mui/x-internals/forwardRef");
var _useDataGridPremiumComponent = require("./useDataGridPremiumComponent");
var _useDataGridPremiumProps = require("./useDataGridPremiumProps");
var _sidebar = require("../components/sidebar");
var _useGridAriaAttributes = require("../hooks/utils/useGridAriaAttributes");
var _useGridRowAriaAttributes = require("../hooks/features/rows/useGridRowAriaAttributes");
var _gridAggregationSelectors = require("../hooks/features/aggregation/gridAggregationSelectors");
var _useGridApiContext = require("../hooks/utils/useGridApiContext");
var _useGridRowsOverridableMethods = require("../hooks/features/rows/useGridRowsOverridableMethods");
var _useGridParamsOverridableMethods = require("../hooks/features/rows/useGridParamsOverridableMethods");
var _sidebar2 = require("../hooks/features/sidebar");
var _useGridCellEditable = require("../hooks/features/editing/useGridCellEditable");
var _jsxRuntime = require("react/jsx-runtime");
const configuration = {
hooks: {
useCSSVariables: _material.useMaterialCSSVariables,
useGridAriaAttributes: _useGridAriaAttributes.useGridAriaAttributesPremium,
useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributesPremium,
useCellAggregationResult: (id, field) => {
const apiRef = (0, _useGridApiContext.useGridApiContext)();
return (0, _xDataGridPro.useGridSelector)(apiRef, _gridAggregationSelectors.gridCellAggregationResultSelector, {
id,
field
});
},
useFilterValueGetter: (apiRef, props) => (row, column) => {
if (props.aggregationRowsScope === 'all') {
return apiRef.current.getRowValue(row, column);
}
return (0, _internals.getRowValue)(row, column, apiRef);
},
useIsCellEditable: _useGridCellEditable.useIsCellEditable,
useGridRowsOverridableMethods: _useGridRowsOverridableMethods.useGridRowsOverridableMethods,
useGridParamsOverridableMethods: _useGridParamsOverridableMethods.useGridParamsOverridableMethods
}
};
const releaseInfo = "MTc3NTAwMTYwMDAwMA==";
const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
packageName: "x-data-grid-premium",
releaseInfo: releaseInfo
});
let dataGridPremiumPropValidators;
if (process.env.NODE_ENV !== 'production') {
dataGridPremiumPropValidators = [..._internals.propValidatorsDataGrid, ..._internals.propValidatorsDataGridPro];
}
const DataGridPremiumRaw = (0, _forwardRef.forwardRef)(function DataGridPremium(inProps, ref) {
const initialProps = (0, _useDataGridPremiumProps.useDataGridPremiumProps)(inProps);
const privateApiRef = (0, _internals.useGridApiInitialization)(initialProps.apiRef, initialProps);
const props = (0, _useDataGridPremiumComponent.useDataGridPremiumComponent)(privateApiRef, initialProps, configuration);
(0, _xLicense.useLicenseVerifier)('x-data-grid-premium', releaseInfo);
if (process.env.NODE_ENV !== 'production') {
(0, _internals.validateProps)(props, dataGridPremiumPropValidators);
}
const sidebarOpen = (0, _xDataGridPro.useGridSelector)(privateApiRef, _sidebar2.gridSidebarOpenSelector);
const sidePanel = sidebarOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.Sidebar, {}) : null;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridContextProvider, {
privateApiRef: privateApiRef,
configuration: configuration,
props: props,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridRoot, (0, _extends2.default)({
className: props.className,
style: props.style,
sx: props.sx
}, props.slotProps?.root, {
ref: ref,
sidePanel: sidePanel,
children: watermark
}))
});
});
if (process.env.NODE_ENV !== "production") DataGridPremiumRaw.displayName = "DataGridPremiumRaw";
process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm proptypes" |
// ----------------------------------------------------------------------
/**
* The id of the active chart.
*/
activeChartId: _propTypes.default.string,
/**
* Aggregation functions available on the grid.
* @default GRID_AGGREGATION_FUNCTIONS when `dataSource` is not provided, `{}` when `dataSource` is provided
*/
aggregationFunctions: _propTypes.default.object,
/**
* Set the aggregation model of the grid.
*/
aggregationModel: _propTypes.default.object,
/**
* 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.
* @default "filtered"
*/
aggregationRowsScope: _propTypes.default.oneOf(['all', 'filtered']),
/**
* If `true`, the AI Assistant is enabled.
* @default false
*/
aiAssistant: _propTypes.default.bool,
/**
* The index of the active AI Assistant conversation.
*/
aiAssistantActiveConversationIndex: _propTypes.default.number,
/**
* The conversations with the AI Assistant.
*/
aiAssistantConversations: _propTypes.default.arrayOf(_propTypes.default.shape({
id: _propTypes.default.string,
prompts: _propTypes.default.arrayOf(_propTypes.default.shape({
createdAt: _propTypes.default.instanceOf(Date).isRequired,
helperText: _propTypes.default.string,
response: _propTypes.default.shape({
aggregation: _propTypes.default.object.isRequired,
chart: _propTypes.default.object,
conversationId: _propTypes.default.string.isRequired,
filterOperator: _propTypes.default.oneOf(['and', 'or']),
filters: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
grouping: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
pivoting: _propTypes.default.object.isRequired,
select: _propTypes.default.number.isRequired,
sorting: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
}),
value: _propTypes.default.string.isRequired,
variant: _propTypes.default.oneOf(['error', 'processing', 'success'])
})).isRequired,
title: _propTypes.default.string
})),
/**
* The suggestions of the AI Assistant.
*/
aiAssistantSuggestions: _propTypes.default.arrayOf(_propTypes.default.shape({
value: _propTypes.default.string.isRequired
})),
/**
* If `true`, the AI Assistant is allowed to pick up values from random cells from each column to build the prompt context.
*/
allowAiAssistantDataSampling: _propTypes.default.bool,
/**
* The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`.
*/
apiRef: _propTypes.default.shape({
current: _propTypes.default.object
}),
/**
* The `aria-label` of the Data Grid.
*/
'aria-label': _propTypes.default.string,
/**
* The `id` of the element containing a label for the Data Grid.
*/
'aria-labelledby': _propTypes.default.string,
/**
* 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
* @default false
*/
autoHeight: _propTypes.default.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.default.bool,
/**
* If `true`, columns are autosized after the datagrid is mounted.
* @default false
*/
autosizeOnMount: _propTypes.default.bool,
/**
* The options for autosize when user-initiated.
*/
autosizeOptions: _propTypes.default.shape({
columns: _propTypes.default.arrayOf(_propTypes.default.string),
disableColumnVirtualization: _propTypes.default.bool,
expand: _propTypes.default.bool,
includeHeaderFilters: _propTypes.default.bool,
includeHeaders: _propTypes.default.bool,
includeOutliers: _propTypes.default.bool,
outliersFactor: _propTypes.default.number
}),
/**
* Controls the modes of the cells.
*/
cellModesModel: _propTypes.default.object,
/**
* If `true`, the cell selection mode is enabled.
* @default false
*/
cellSelection: _propTypes.default.bool,
/**
* Set the cell selection model of the grid.
*/
cellSelectionModel: _propTypes.default.object,
/**
* If `true`, the charts integration feature is enabled.
* @default false
*/
chartsIntegration: _propTypes.default.bool,
/**
* If `true`, the Data Grid will display an extra column with checkboxes for selecting rows.
* @default false
*/
checkboxSelection: _propTypes.default.bool,
/**
* If `true`, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with `checkboxSelection`.
* It only works if the pagination is enabled.
* @default false
*/
checkboxSelectionVisibleOnly: _propTypes.default.bool,
/**
* Override or extend the styles applied to the component.
*/
classes: _propTypes.default.object,
className: _propTypes.default.string,
/**
* The character used to separate cell values when copying to the clipboard.
* @default '\t'
*/
clipboardCopyCellDelimiter: _propTypes.default.string,
/**
* Column region in pixels to render before/after the viewport
* @default 150
*/
columnBufferPx: _propTypes.default.number,
/**
* The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.
* @default 150
*/
columnFilterDebounceMs: _propTypes.default.number,
/**
* Sets the height in pixels of the column group headers in the Data Grid.
* Inherits the `columnHeaderHeight` value if not set.
*/
columnGroupHeaderHeight: _propTypes.default.number,
columnGroupingModel: _propTypes.default.arrayOf(_propTypes.default.object),
/**
* Sets the height in pixel of the column headers in the Data Grid.
* @default 56
*/
columnHeaderHeight: _propTypes.default.number,
/**
* Set of columns of type [[GridColDef]][].
*/
columns: _propTypes.default.arrayOf(_propTypes.default.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.default.object,
/**
* Data source object.
*/
dataSource: _propTypes.default.shape({
getAggregatedValue: _propTypes.default.func,
getChildrenCount: _propTypes.default.func,
getGroupKey: _propTypes.default.func,
getRows: _propTypes.default.func.isRequired,
updateRow: _propTypes.default.func
}),
/**
* Data source cache object.
*/
dataSourceCache: _propTypes.default.shape({
clear: _propTypes.default.func.isRequired,
get: _propTypes.default.func.isRequired,
set: _propTypes.default.func.isRequired
}),
/**
* 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.
* @default 0
*/
dataSourceRevalidateMs: _propTypes.default.number,
/**
* If above 0, the row children will be expanded up to this depth.
* If equal to -1, all the row children will be expanded.
* @default 0
*/
defaultGroupingExpansionDepth: _propTypes.default.number,
/**
* Set the density of the Data Grid.
* @default "standard"
*/
density: _propTypes.default.oneOf(['comfortable', 'compact', 'standard']),
/**
* The row ids to show the detail panel.
*/
detailPanelExpandedRowIds: _propTypes.default /* @typescript-to-proptypes-ignore */.instanceOf(Set),
/**
* If `true`, aggregation is disabled.
* @default false
*/
disableAggregation: _propTypes.default.bool,
/**
* If `true`, column autosizing on header separator double-click is disabled.
* @default false
*/
disableAutosize: _propTypes.default.bool,
/**
* If `true`, the filtering will only be applied to the top level rows when grouping rows with the `treeData` prop.
* @default false
*/
disableChildrenFiltering: _propTypes.default.bool,
/**
* If `true`, the sorting will only be applied to the top level rows when grouping rows with the `treeData` prop.
* @default false
*/
disableChildrenSorting: _propTypes.default.bool,
/**
* If `true`, the clipboard paste is disabled.
* @default false
*/
disableClipboardPaste: _propTypes.default.bool,
/**
* If `true`, column filters are disabled.
* @default false
*/
disableColumnFilter: _propTypes.default.bool,
/**
* If `true`, the column menu is disabled.
* @default false
*/
disableColumnMenu: _propTypes.default.bool,
/**
* If `true`, the column pinning is disabled.
* @default false
*/
disableColumnPinning: _propTypes.default.bool,
/**
* If `true`, reordering columns is disabled.
* @default false
*/
disableColumnReorder: _propTypes.default.bool,
/**
* If `true`, resizing columns is disabled.
* @default false
*/
disableColumnResize: _propTypes.default.bool,
/**
* If `true`, hiding/showing columns is disabled.
* @default false
*/
disableColumnSelector: _propTypes.default.bool,
/**
* If `true`, the column sorting feature will be disabled.
* @default false
*/
disableColumnSorting: _propTypes.default.bool,
/**
* If `true`, the density selector is disabled.
* @default false
*/
disableDensitySelector: _propTypes.default.bool,
/**
* If `true`, `eval()` is not used for performance optimization.
* @default false
*/
disableEval: _propTypes.default.bool,
/**
* If `true`, filtering with multiple columns is disabled.
* @default false
*/
disableMultipleColumnsFiltering: _propTypes.default.bool,
/**
* If `true`, the sorting with multiple columns is disabled.
* @default false
*/
disableMultipleColumnsSorting: _propTypes.default.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.default.bool,
/**
* If `true`, the pivoting feature is disabled.
* @default false
*/
disablePivoting: _propTypes.default.bool,
/**
* If `true`, the row grouping is disabled.
* @default false
*/
disableRowGrouping: _propTypes.default.bool,
/**
* If `true`, the Data Grid will not use the exclude model optimization when selecting all rows.
* @default false
*/
disableRowSelectionExcludeModel: _propTypes.default.bool,
/**
* If `true`, the selection on click on a row or cell is disabled.
* @default false
*/
disableRowSelectionOnClick: _propTypes.default.bool,
/**
* If `true`, the virtualization is disabled.
* @default false
*/
disableVirtualization: _propTypes.default.bool,
/**
* Controls whether to use the cell or row editing.
* @default "cell"
*/
editMode: _propTypes.default.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.default.number,
/**
* 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.
*/
experimentalFeatures: _propTypes.default.shape({
charts: _propTypes.default.bool,
warnIfFocusStateIsNotSynced: _propTypes.default.bool
}),
/**
* The milliseconds delay to wait after a keystroke before triggering filtering.
* @default 150
*/
filterDebounceMs: _propTypes.default.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.default.oneOf(['client', 'server']),
/**
* Set the filter model of the Data Grid.
*/
filterModel: _propTypes.default.shape({
items: _propTypes.default.arrayOf(_propTypes.default.shape({
field: _propTypes.default.string.isRequired,
id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
operator: _propTypes.default.string.isRequired,
value: _propTypes.default.any
})).isRequired,
logicOperator: _propTypes.default.oneOf(['and', 'or']),
quickFilterExcludeHiddenColumns: _propTypes.default.bool,
quickFilterLogicOperator: _propTypes.default.oneOf(['and', 'or']),
quickFilterValues: _propTypes.default.array
}),
/**
* Determines the position of an aggregated value.
* @param {GridGroupNode} groupNode The current group.
* @returns {GridAggregationPosition | null} Position of the aggregated value (if `null`, the group isn't aggregated).
* @default (groupNode) => (groupNode.depth === -1 ? 'footer' : 'inline')
*/
getAggregationPosition: _propTypes.default.func,
/**
* 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.default.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.default.func,
/**
* Function that returns the height of the row detail panel.
* @param {GridRowParams} params With all properties from [[GridRowParams]].
* @returns {number | string} The height in pixels or "auto" to use the content height.
* @default "() => 500"
*/
getDetailPanelHeight: _propTypes.default.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.default.func,
/**
* Allows to generate derived columns from actual columns that will be used for pivoting.
* Useful e.g. for date columns to generate year, quarter, month, etc.
* @param {GridColDef} column The column to generate derived columns for.
* @param {GridLocaleTextApi['getLocaleText']} getLocaleText The function to get the locale text.
* @returns {GridColDef[] | undefined} The derived columns.
* @default {defaultGetPivotDerivedColumns | undefined} Creates year and quarter columns for date columns if not in server side mode.
*/
getPivotDerivedColumns: _propTypes.default.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.default.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.default.func,
/**
* 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.
*/
getRowId: _propTypes.default.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.default.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.
* @template R
* @param {R} row The row from which we want the path.
* @returns {string[]} The path to the row.
*/
getTreeDataPath: _propTypes.default.func,
/**
* The grouping column used by the tree data.
*/
groupingColDef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
/**
* Override the height of the header filters.
*/
headerFilterHeight: _propTypes.default.number,
/**
* If `true`, the header filters feature is enabled.
* @default false
*/
headerFilters: _propTypes.default.bool,
/**
* If `true`, the footer component is hidden.
* @default false
*/
hideFooter: _propTypes.default.bool,
/**
* If `true`, the pagination component in the footer is hidden.
* @default false
*/
hideFooterPagination: _propTypes.default.bool,
/**
* If `true`, the row count in the footer is hidden.
* It has no effect if the pagination is enabled.
* @default false
*/
hideFooterRowCount: _propTypes.default.bool,
/**
* If `true`, the selected row count in the footer is hidden.
* @default false
*/
hideFooterSelectedRowCount: _propTypes.default.bool,
/**
* Map of grid events to their undo/redo handlers.
* @default Handlers for `rowEditStop`, `cellEditStop` and `clipboardPasteEnd` events
*/
historyEventHandlers: _propTypes.default.object,
/**
* The maximum size of the history stack.
* Set to 0 to disable the undo/redo feature.
* @default 30
*/
historyStackSize: _propTypes.default.number,
/**
* List of grid events after which the history stack items should be re-validated.
* @default ['columnsChange', 'rowsSet', 'sortedRowsSet', 'filteredRowsSet', 'paginationModelChange']
*/
historyValidationEvents: _propTypes.default.arrayOf(_propTypes.default.oneOf(['activeChartIdChange', 'activeStrategyProcessorChange', 'aggregationLookupSet', 'aggregationModelChange', 'aiAssistantActiveConversationIndexChange', 'aiAssistantConversationsChange', 'cellClick', 'cellDoubleClick', 'cellDragEnter', 'cellDragOver', 'cellEditStart', 'cellEditStop', 'cellFocusIn', 'cellFocusOut', 'cellKeyDown', 'cellKeyUp', 'cellModeChange', 'cellModesModelChange', 'cellMouseDown', 'cellMouseOver', 'cellMouseUp', 'cellSelectionChange', 'chartSynchronizationStateChange', 'clipboardCopy', 'clipboardPasteEnd', 'clipboardPasteStart', 'columnGroupHeaderBlur', 'columnGroupHeaderFocus', 'columnGroupHeaderKeyDown', 'columnHeaderBlur', 'columnHeaderClick', 'columnHeaderContextMenu', 'columnHeaderDoubleClick', 'columnHeaderDragEnd', 'columnHeaderDragEndNative', 'columnHeaderDragEnter', 'columnHeaderDragOver', 'columnHeaderDragStart', 'columnHeaderEnter', 'columnHeaderFocus', 'columnHeaderKeyDown', 'columnHeaderLeave', 'columnHeaderOut', 'columnHeaderOver', 'columnIndexChange', 'columnOrderChange', 'columnResize', 'columnResizeStart', 'columnResizeStop', 'columnsChange', 'columnSeparatorDoubleClick', 'columnSeparatorMouseDown', 'columnVisibilityModelChange', 'columnWidthChange', 'debouncedResize', 'densityChange', 'detailPanelsExpandedRowIdsChange', 'excelExportStateChange', 'fetchRows', 'filteredRowsSet', 'filterModelChange', 'headerFilterBlur', 'headerFilterClick', 'headerFilterKeyDown', 'headerFilterMouseDown', 'headerSelectionCheckboxChange', 'menuClose', 'menuOpen', 'paginationMetaChange', 'paginationModelChange', 'pinnedColumnsChange', 'pivotModeChange', 'pivotModelChange', 'pivotPanelOpenChange', 'preferencePanelClose', 'preferencePanelOpen', 'redo', 'renderedRowsIntervalChange', 'resize', 'rootMount', 'rowClick', 'rowCountChange', 'rowDoubleClick', 'rowDragEnd', 'rowDragOver', 'rowDragStart', 'rowEditStart', 'rowEditStop', 'rowExpansionChange', 'rowGroupingModelChange', 'rowModesModelChange', 'rowMouseEnter', 'rowMouseLeave', 'rowMouseOut', 'rowMouseOver', 'rowOrderChange', 'rowSelectionChange', 'rowSelectionCheckboxChange', 'rowsScrollEnd', 'rowsScrollEndIntersection', 'rowsSet', 'scrollPositionChange', 'sidebarClose', 'sidebarOpen', 'sortedRowsSet', 'sortModelChange', 'stateChange', 'strategyAvailabilityChange', 'undo', 'unmount', 'viewportInnerSizeChange', 'virtualScrollerContentSizeChange', 'virtualScrollerTouchMove', 'virtualScrollerWheel']).isRequired),
/**
* 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.default.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.default.oneOfType([_propTypes.default.shape({
clipboardExport: _propTypes.default.bool,
csvExport: _propTypes.default.bool
}), _propTypes.default.bool]),
/**
* The initial state of the DataGridPremium.
* The data in it is set in the state on initialization but isn't controlled.
* If one of the data in `initialState` is also being controlled, then the control state wins.
*/
initialState: _propTypes.default.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.default.func,
/**
* Determines if a group should be expanded after its creation.
* This prop takes priority over the `defaultGroupingExpansionDepth` prop.
* @param {GridGroupNode} node The node of the group to test.
* @returns {boolean} A boolean indicating if the group is expanded.
*/
isGroupExpandedByDefault: _propTypes.default.func,
/**
* Indicates whether a row is reorderable.
* @param {object} params With all properties from the row.
* @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.
* @returns {boolean} A boolean indicating if the row is reorderable.
*/
isRowReorderable: _propTypes.default.func,
/**
* Determines if a row can be selected.
* @param {GridRowParams} params With all properties from [[GridRowParams]].
* @returns {boolean} A boolean indicating if the row is selectable.
*/
isRowSelectable: _propTypes.default.func,
/**
* 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.
* @param {ReorderValidationContext} context The context object containing all information about the reorder operation.
* @returns {boolean} A boolean indicating if the reorder operation should go through.
*/
isValidRowReorder: _propTypes.default.func,
/**
* 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.
* @default false
*/
keepColumnPositionIfDraggedOutside: _propTypes.default.bool,
/**
* If `true`, the selection model will retain selected rows that do not exist.
* Useful when using server side pagination and row selections need to be retained
* when changing pages.
* @default false
*/
keepNonExistentRowsSelected: _propTypes.default.bool,
/**
* 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.
*/
label: _propTypes.default.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.
* @default false
*/
lazyLoading: _propTypes.default.bool,
/**
* If positive, the Data Grid will throttle data source requests on rendered rows interval change.
* @default 500
*/
lazyLoadingRequestThrottleMs: _propTypes.default.number,
/**
* If `true`, displays the data in a list view.
* Use in combination with `listViewColumn`.
*/
listView: _propTypes.default.bool,
/**
* Definition of the column rendered when the `listView` prop is enabled.
*/
listViewColumn: _propTypes.default.shape({
align: _propTypes.default.oneOf(['center', 'left', 'right']),
cellClassName: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
display: _propTypes.default.oneOf(['flex', 'text']),
field: _propTypes.default.string.isRequired,
renderCell: _propTypes.default.func
}),
/**
* If `true`, a loading overlay is displayed.
* @default false
*/
loading: _propTypes.default.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.default.object,
/**
* Pass a custom logger in the components that implements the [[Logger]] interface.
* @default console
*/
logger: _propTypes.default.shape({
debug: _propTypes.default.func.isRequired,
error: _propTypes.default.func.isRequired,
info: _propTypes.default.func.isRequired,
warn: _propTypes.default.func.isRequired
}),
/**
* Allows to pass the logging level or false to turn off logging.
* @default "error" ("warn" in dev mode)
*/
logLevel: _propTypes.default.oneOf(['debug', 'error', 'info', 'warn', false]),
/**
* If set to "always", the multi-sorting is applied without modifier key.
* Otherwise, the modifier key is required for multi-sorting to be applied.
* @see See https://mui.com/x/react-data-grid/sorting/#multi-sorting
* @default "withModifierKey"
*/
multipleColumnsSortingMode: _propTypes.default.oneOf(['always', 'withModifierKey']),
/**
* 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.default.string,
/**
* Callback fired when the active chart changes.
* @param {string} activeChartId The new active chart id.
*/
onActiveChartIdChange: _propTypes.default.func,
/**
* Callback fired when the row grouping model changes.
* @param {GridAggregationModel} model The aggregated columns.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onAggregationModelChange: _propTypes.default.func,
/**
* Callback fired when the AI Assistant active conversation index changes.
* @param {number} aiAssistantActiveConversationIndex The new active conversation index.
*/
onAiAssistantActiveConversationIndexChange: _propTypes.default.func,
/**
* Callback fired when the AI Assistant conversations change.
* @param {Conversation[]} conversations The new AI Assistant conversations.
*/
onAiAssistantConversationsChange: _propTypes.default.func,
/**
* Callback fired before the clipboard paste operation starts.
* Use it to confirm or cancel the paste operation.
* @param {object} params Params passed to the callback.
* @param {string[][]} params.data The raw pasted data split by rows and cells.
* @returns {Promise<any>} A promise that resolves to confirm the paste operation, and rejects to cancel it.
*/
onBeforeClipboardPasteStart: _propTypes.default.func,
/**
* 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.default.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.default.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.default.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.default.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.default.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.default.func,
/**
* Callback fired when the selection state of one or multiple cells changes.
* @param {GridCellSelectionModel} cellSelectionModel Object in the shape of [[GridCellSelectionModel]] containing the selected cells.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onCellSelectionModelChange: _propTypes.default.func,
/**
* Callback called when the data is copied to the clipboard.
* @param {string} data The data copied to the clipboard.
*/
onClipboardCopy: _propTypes.default.func,
/**
* Callback fired when the clipboard paste operation ends.
*/
onClipboardPasteEnd: _propTypes.default.func,
/**
* Callback fired when the clipboard paste operation starts.
*/
onClipboardPasteStart: _propTypes.default.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.default.func,
/**
* Callback fired when a contextmenu event comes from a column header element.
* @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
* @param {MuiEvent<React.MouseEvent>} event The event object.
*/
onColumnHeaderContextMenu: _propTypes.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.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.default.func,
/**
* Callback fired when a data source request fails.
* @param {GridGetRowsError | GridUpdateRowError} error The data source error object.
*/
onDataSourceError: _propTypes.default.func,
/**
* Callback fired when the density changes.
* @param {GridDensity} density New density value.
*/
onDensityChange: _propTypes.default.func,
/**
* Callback fired when the detail panel of a row is opened or closed.
* @param {GridRowId[]} ids The ids of the rows which have the detail panel open.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onDetailPanelExpandedRowIdsChange: _propTypes.default.func,
/**
* Callback fired when the state of the Excel export changes.
* @param {string} inProgress Indicates if the task is in progress.
*/
onExcelExportStateChange: _propTypes.default.func,
/**
* Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
* @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
* @param {MuiEvent<{}>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
* @deprecated Use the {@link https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead.
*/
onFetchRows: _propTypes.default.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.default.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.default.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.default.func,
/**
* Callback fired when the pagination meta has changed.
* @param {GridPaginationMeta} paginationMeta Updated pagination meta.
*/
onPaginationMetaChange: _propTypes.default.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.default.func,
/**
* Callback fired when the pinned columns have changed.
* @param {GridPinnedColumnFields} pinnedColumns The changed pinned columns.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onPinnedColumnsChange: _propTypes.default.func,
/**
* Callback fired when the pivot active state changes.
* @param {boolean} isPivotActive Whether the data grid is in pivot mode.
*/
onPivotActiveChange: _propTypes.default.func,
/**
* Callback fired when the pivot model changes.
* @param {GridPivotModel} pivotModel The new pivot model.
*/
onPivotModelChange: _propTypes.default.func,
/**
* Callback fired when the pivot side panel open state changes.
* @param {boolean} pivotPanelOpen Whether the pivot side panel is visible.
* @deprecated Use the `sidebarOpen` and `sidebarClose` events or corresponding event handlers `onSidebarOpen()` and `onSidebarClose()` instead.
*/
onPivotPanelOpenChange: _propTypes.default.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.default.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.default.func,
/**
* Callback called when `processRowUpdate()` throws an error or rejects.
* @param {any} error The error thrown.
*/
onProcessRowUpdateError: _propTypes.default.func,
/**
* The function to be used to process the prompt.
* @param {string} prompt The prompt to be processed.
* @param {string} promptContext The prompt context.
* @param {string} conversationId The id of the conversation the prompt is part of. If not passed, prompt response will return a new conversation id that can be used to continue the newly started conversation.
* @returns {Promise<PromptResponse>} The prompt response.
*/
onPrompt: _propTypes.default.func,
/**
* Callback fired when a redo operation is executed.
*/
onRedo: _propTypes.default.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.default.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.default.func,
/**
* Callback fired when the row count has changed.
* @param {number} count Updated row count.
*/
onRowCountChange: _propTypes.default.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.default.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.default.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.default.func,
/**
* Callback fired when the row grouping model changes.
* @param {GridRowGroupingModel} model Columns used as grouping criteria.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onRowGroupingModelChange: _propTypes.default.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.default.func,
/**
* Callback fired when a row is being reordered.
* @param {GridRowOrderChangeParams} params With all properties from [[GridRowOrderChangeParams]].
* @param {MuiEvent<{}>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onRowOrderChange: _propTypes.default.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.default.func,
/**
* Callback fired when scrolling to the bottom of the grid viewport.
* @param {GridRowScrollEndParams} params With all properties from [[GridRowScrollEndParams]].
* @param {MuiEvent<{}>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
* @deprecated Use the {@link https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading Server-side data-Infinite loading} instead.
*/
onRowsScrollEnd: _propTypes.default.func,
/**
* Callback fired when the sidebar is closed.
* @param {GridSidebarParams} params With all properties from [[GridSidebarParams]].
* @param {MuiEvent<{}>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onSidebarClose: _propTypes.default.func,
/**
* Callback fired when the sidebar is opened.
* @param {GridSidebarParams} params With all properties from [[GridSidebarParams]].
* @param {MuiEvent<{}>} event The event object.
* @param {GridCallbackDetails} details Additional details for this callback.
*/
onSidebarOpen: _propTypes.default.func,
/**
* Callback fired when the sort model changes before a column is sorted.
* @param {GridSortModel} model W