diff --git a/packages/grid/x-grid/src/tests/events.XGrid.test.tsx b/packages/grid/x-grid/src/tests/events.XGrid.test.tsx
index 41c0389a99c43..eb14124c24f55 100644
--- a/packages/grid/x-grid/src/tests/events.XGrid.test.tsx
+++ b/packages/grid/x-grid/src/tests/events.XGrid.test.tsx
@@ -85,8 +85,6 @@ describe('
- Events Params', () => {
expect(eventArgs!.params).to.deep.include({
colDef: apiRef!.current.getColumnFromField('age'),
- element: ageColumnElement,
- colIndex: 2,
field: 'age',
api: apiRef.current,
});
@@ -107,11 +105,10 @@ describe('
- Events Params', () => {
expect(eventArgs!.params).to.deep.include({
id: 2,
- element: row1,
row: baselineProps.rows[1],
- rowIndex: 1,
columns: apiRef!.current.getAllColumns(),
api: apiRef.current,
+ getValue: apiRef.current.getCellValue,
});
});
});
@@ -133,12 +130,12 @@ describe('
- Events Params', () => {
value: 'Jack',
formattedValue: 'Jack',
isEditable: true,
- element: cell11,
row: baselineProps.rows[1],
- rowIndex: 1,
colDef: apiRef!.current.getColumnFromField('first'),
- colIndex: 1,
api: apiRef.current,
+ hasFocus: false,
+ tabIndex: -1,
+ getValue: apiRef.current.getCellValue,
});
});
@@ -160,12 +157,12 @@ describe('
- Events Params', () => {
value: 'Jack',
formattedValue: 'Jack',
isEditable: true,
- element: cell01,
row: baselineProps.rows[1],
- rowIndex: 0,
colDef: apiRef!.current.getColumnFromField('first'),
- colIndex: 1,
api: apiRef.current,
+ hasFocus: false,
+ tabIndex: -1,
+ getValue: apiRef.current.getCellValue,
});
});
diff --git a/packages/grid/x-grid/src/tests/filtering.XGrid.test.tsx b/packages/grid/x-grid/src/tests/filtering.XGrid.test.tsx
index c00b775be5f25..ef7df70a1ebc7 100644
--- a/packages/grid/x-grid/src/tests/filtering.XGrid.test.tsx
+++ b/packages/grid/x-grid/src/tests/filtering.XGrid.test.tsx
@@ -20,8 +20,11 @@ import {
createClientRenderStrictMode,
// @ts-expect-error need to migrate helpers to TypeScript
fireEvent,
+ // @ts-expect-error need to migrate helpers to TypeScript
+ waitFor,
} from 'test/utils';
import { getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn';
+import { useData } from 'packages/storybook/src/hooks/useData';
const isJSDOM = /jsdom/.test(window.navigator.userAgent);
@@ -257,6 +260,50 @@ describe('
- Filter', () => {
expect(apiRef.current.getVisibleRowModels().get(1)).to.deep.equal({ id: 1, brand: 'Adidas' });
});
+ describe('performance', () => {
+ beforeEach(() => {
+ clock.restore();
+ });
+
+ it('should filter 5,000 rows in less than 100 ms', async function test() {
+ // It's simpler to only run the performance test in a single controlled environment.
+ if (!/HeadlessChrome/.test(window.navigator.userAgent)) {
+ this.skip();
+ return;
+ }
+
+ const TestCasePerf = () => {
+ const data = useData(5000, 10);
+ apiRef = useGridApiRef();
+ return (
+
+
+
+ );
+ };
+
+ render(
);
+ const newModel = {
+ items: [
+ {
+ columnField: 'currencyPair',
+ value: 'usd',
+ operatorValue: 'startsWith',
+ },
+ ],
+ };
+ const t0 = performance.now();
+ apiRef.current.setFilterModel(newModel);
+
+ await waitFor(() =>
+ expect(document.querySelector('.MuiDataGrid-filterIcon')).to.not.equal(null),
+ );
+ const t1 = performance.now();
+ const time = Math.round(t1 - t0);
+ expect(time).to.be.lessThan(100);
+ });
+ });
+
describe('Server', () => {
it('should refresh the filter panel when adding filters', () => {
function loadServerRows(commodityFilterValue) {
diff --git a/packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx b/packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx
index 374e6f695c3c4..b40ee441e5c99 100644
--- a/packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx
+++ b/packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { GridApiRef, GridSortModel, useGridApiRef } from '@material-ui/data-grid';
+import { GridApiRef, GridColDef, GridSortModel, useGridApiRef } from '@material-ui/data-grid';
import { XGrid } from '@material-ui/x-grid';
import { expect } from 'chai';
import { useFakeTimers } from 'sinon';
@@ -216,10 +216,56 @@ describe('
- Sorting', () => {
const t0 = performance.now();
fireEvent.click(header);
- await waitFor(() => expect(document.querySelector('.MuiDataGrid-sortIcon')).to.not.be.null);
+ await waitFor(() =>
+ expect(document.querySelector('.MuiDataGrid-sortIcon')).to.not.equal(null),
+ );
const t1 = performance.now();
const time = Math.round(t1 - t0);
expect(time).to.be.lessThan(300);
});
+
+ it('should render maximum twice', async function test() {
+ let renderCellCount = 0;
+ let renderHeaderCount = 0;
+ const TestCasePerf = () => {
+ const [cols, setCols] = React.useState
([]);
+ const data = useData(10, 10);
+
+ React.useEffect(() => {
+ if (data.columns.length) {
+ const newColumns = [...data.columns];
+ newColumns[1].renderHeader = (params) => {
+ renderHeaderCount += 1;
+
+ return {params.field};
+ };
+ newColumns[1].renderCell = (params) => {
+ if (params.id === 0) {
+ renderCellCount += 1;
+ }
+ return {params.value};
+ };
+ setCols(newColumns);
+ }
+ }, [data.columns]);
+
+ return (
+
+
+
+ );
+ };
+
+ render();
+ const header = getColumnHeaderCell(2);
+ renderHeaderCount = 0;
+ renderCellCount = 0;
+ fireEvent.click(header);
+ await waitFor(() =>
+ expect(document.querySelector('.MuiDataGrid-sortIcon')).to.not.equal(null),
+ );
+ expect(renderHeaderCount).to.equal(2);
+ expect(renderCellCount).to.equal(0);
+ });
});
});
diff --git a/packages/storybook/src/stories/grid-columns.stories.tsx b/packages/storybook/src/stories/grid-columns.stories.tsx
index 783eee43028b9..feed9714c8ddf 100644
--- a/packages/storybook/src/stories/grid-columns.stories.tsx
+++ b/packages/storybook/src/stories/grid-columns.stories.tsx
@@ -299,12 +299,12 @@ export const ValueGetterAndFormatter = () => {
{
field: 'firstAge',
valueGetter: (params: GridValueGetterParams) =>
- `${params.getValue('first')}_${params.getValue('age')}`,
+ `${params.getValue(params.id, 'first')}_${params.getValue(params.id, 'age')}`,
},
{
field: 'firstAgeFormatted',
valueGetter: (params: GridValueGetterParams) =>
- `${params.getValue('first')}_${params.getValue('age')}`,
+ `${params.getValue(params.id, 'first')}_${params.getValue(params.id, 'age')}`,
valueFormatter: (params) => `${params.value} yrs`,
},
],
diff --git a/packages/storybook/src/stories/grid-error.stories.tsx b/packages/storybook/src/stories/grid-error.stories.tsx
index a7eb54a1934f6..1c50ed7f9542a 100644
--- a/packages/storybook/src/stories/grid-error.stories.tsx
+++ b/packages/storybook/src/stories/grid-error.stories.tsx
@@ -26,7 +26,9 @@ const getColumns: () => GridColDef[] = () => [
description: 'this column has a value getter and is not sortable',
sortable: false,
valueGetter: (params) =>
- `${params.getValue('firstName') || ''} ${params.getValue('lastName') || ''}`,
+ `${params.getValue(params.id, 'firstName') || ''} ${
+ params.getValue(params.id, 'lastName') || ''
+ }`,
},
{
field: 'isRegistered',
diff --git a/packages/storybook/src/stories/grid-rows.stories.tsx b/packages/storybook/src/stories/grid-rows.stories.tsx
index 27ee55b9d085d..409753bfc4848 100644
--- a/packages/storybook/src/stories/grid-rows.stories.tsx
+++ b/packages/storybook/src/stories/grid-rows.stories.tsx
@@ -853,7 +853,7 @@ export function EditCellWithMessageGrid() {
return apiRef.current.subscribeEvent(
GRID_CELL_EDIT_ENTER,
(params: GridCellParams, event?: React.SyntheticEvent) => {
- setMessage(`Editing cell with value: ${params.value} at row: ${params.rowIndex}, column: ${
+ setMessage(`Editing cell with value: ${params.value} at row: ${params.id}, column: ${
params.field
},
triggered by ${event!.type}
diff --git a/packages/storybook/src/stories/grid-sorting.stories.tsx b/packages/storybook/src/stories/grid-sorting.stories.tsx
index 57d1cf7c4e0a4..007c4cf57406f 100644
--- a/packages/storybook/src/stories/grid-sorting.stories.tsx
+++ b/packages/storybook/src/stories/grid-sorting.stories.tsx
@@ -234,7 +234,9 @@ export const UnsortableLastCol = () => {
field: 'username',
sortable: false,
valueGetter: (params) =>
- `${params.getValue('name') || 'unknown'}_${params.getValue('age') || 'x'}`,
+ `${params.getValue(params.id, 'name') || 'unknown'}_${
+ params.getValue(params.id, 'age') || 'x'
+ }`,
width: 150,
};
@@ -250,8 +252,12 @@ export const CustomComparator = () => {
columns[columns.length] = {
field: 'username',
valueGetter: (params) =>
- `${params.getValue('name') || 'unknown'}_${params.getValue('age') || 'x'}`,
- sortComparator: (v1, v2, cellParams1, cellParams2) => cellParams1.row.age - cellParams2.row.age,
+ `${params.getValue(params.id, 'name') || 'unknown'}_${
+ params.getValue(params.id, 'age') || 'x'
+ }`,
+ sortComparator: (v1, v2, cellParams1, cellParams2) =>
+ cellParams1.api.getCellValue(cellParams1.id, 'age') -
+ cellParams2.api.getCellValue(cellParams2.id, 'age'),
width: 150,
};
diff --git a/packages/storybook/src/stories/grid-style.stories.tsx b/packages/storybook/src/stories/grid-style.stories.tsx
index 7cec9b0b27c69..4374ade8521ae 100644
--- a/packages/storybook/src/stories/grid-style.stories.tsx
+++ b/packages/storybook/src/stories/grid-style.stories.tsx
@@ -61,7 +61,9 @@ const getColumns: () => GridColDef[] = () => [
description: 'this column has a value getter and is not sortable',
sortable: false,
valueGetter: (params) =>
- `${params.getValue('firstName') || ''} ${params.getValue('lastName') || ''}`.trim(),
+ `${params.getValue(params.id, 'firstName') || ''} ${
+ params.getValue(params.id, 'lastName') || ''
+ }`.trim(),
},
{
field: 'isRegistered',
diff --git a/packages/storybook/src/stories/playground/customize-components.stories.tsx b/packages/storybook/src/stories/playground/customize-components.stories.tsx
index f2219bf6c9e50..2087fac527fc2 100644
--- a/packages/storybook/src/stories/playground/customize-components.stories.tsx
+++ b/packages/storybook/src/stories/playground/customize-components.stories.tsx
@@ -159,7 +159,9 @@ StyledColumns.args = {
headerClassName: 'highlight',
sortable: false,
valueGetter: (params) =>
- `${params.getValue('firstName') || ''} ${params.getValue('lastName') || ''}`,
+ `${params.getValue(params.id, 'firstName') || ''} ${
+ params.getValue(params.id, 'lastName') || ''
+ }`,
cellClassRules: {
common: (params) => params.row.lastName === 'Smith',
unknown: (params) => !params.row.lastName,
diff --git a/packages/storybook/src/stories/playground/real-data-demo.stories.tsx b/packages/storybook/src/stories/playground/real-data-demo.stories.tsx
index f8a91659190ba..0e1c47044e453 100644
--- a/packages/storybook/src/stories/playground/real-data-demo.stories.tsx
+++ b/packages/storybook/src/stories/playground/real-data-demo.stories.tsx
@@ -40,10 +40,10 @@ export default {
},
},
rowLength: {
- defaultValue: 2000,
+ defaultValue: 500,
control: {
type: 'select',
- options: [10, 50, 100, 500, 1000, 2000, 5000, 8000, 10000, 50000, 100000, 500000],
+ options: [1, 9, 10, 50, 100, 500, 1000, 2000, 5000, 8000, 10000, 50000, 100000, 500000],
},
},
multipleGrid: {