We're getting this error when clicking "Filter" in the context menu of our DataGrid. We are attempting to implement this hierarchy of components for the DataGrid like so:
MigrationJobTable.tsx:
return (
<div data-testid='migrationJobTable' style={{ height: '100%', width: '100%' }}>
<ClientSideDataGrid
rows={rows}
columns={MigrationJobColumns({ setIsPageLoading, caseId, userId })}
setRows={setRows}
GetRowsFromResponseObject={GetRowsFromResponseObject}
apiString={apiString}
initialSortModel={[{ field: 'JobId', sort: 'desc' }]}
getRowId={(x: MigrationJob) => x.JobId}
isPageLoading={isPageLoading}
disableVirtualization={disableVirtualization}
// Tests for this component do not pass without this
columnBuffer={9}
/>
</div>
);
ClientSideDataGrid.tsx
interface Props extends DataGridProProps {
initialSortModel: GridSortModel | undefined;
disableVirtualization?: boolean | undefined;
setRows?: Function | undefined;
GetRowsFromResponseObject?: Function | undefined;
apiString?: string | undefined;
enablePagination?: boolean;
CustomNoRowsOverlay?: React.JSXElementConstructor<any> | undefined;
isPageLoading?: boolean | undefined;
pageSize?: number | undefined;
}
return (
<div className="data-grid-pro-class" data-testid="clientSideDataGrid" style={{ height: '100%', width: '100%' }}>
<BaseDataGrid
{...props}
rowCount={props.rows.length}
page={page}
componentsProps={{
pagination: {
dataLoadType: DataLoadType.CLIENT,
RefreshRows: LoadRows,
pageSize: props.pageSize ?? defaultPageSize,
page: page,
setPage: setPage
}
}}
/>
</div>
);
BaseDataGrid.tsx:
interface Props extends DataGridProProps {
initialSortModel: GridSortModel | undefined;
disableVirtualization?: boolean | undefined;
setRows?: Function | undefined;
GetRowsFromResponseObject?: Function | undefined;
apiString?: string | undefined;
enablePagination?: boolean;
CustomNoRowsOverlay?: React.JSXElementConstructor<any> | undefined;
isPageLoading?: boolean | undefined;
pageSize?: number | undefined;
}
return (
<div className="data-grid-pro-class" data-testid="serverSideDataGrid" style={{ height: '100%', width: '100%' }}>
<DataGridPro
{...props}
localeText={determineLocaleFromBrowserSetting()}
rowHeight={27}
headerHeight={47}
disableSelectionOnClick={true}
disableVirtualization={props.disableVirtualization ?? false}
pagination={props.enablePagination ?? true}
pageSize={props.pageSize ?? defaultPageSize}
rowsPerPageOptions={[props.pageSize ?? defaultPageSize]}
components={{
Pagination: DiscoverPagination,
NoRowsOverlay: props.CustomNoRowsOverlay ?? GridNoRowsOverlay
}}
disableMultipleColumnsSorting
initialState={{
sorting: {
sortModel: props.initialSortModel
}
}}
/>
<Backdrop sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} open={props.isPageLoading ?? false}>
<CircularProgress />
</Backdrop>
</div>
);
We did not get this issue before trying to use this modularized component hierarchy. We wanted to switch to this format to reuse and force other devs to use a base set of props. Any ideas?