From fecb43816304be602c585bd44a75ea444daf8fd2 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Fri, 13 Sep 2024 14:04:17 +0200 Subject: [PATCH 1/6] Stabilize random series in viryualized table --- .../components/table/ReactVirtualizedTable.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/docs/data/material/components/table/ReactVirtualizedTable.tsx b/docs/data/material/components/table/ReactVirtualizedTable.tsx index bff9541d511f81..3d2934a3befc59 100644 --- a/docs/data/material/components/table/ReactVirtualizedTable.tsx +++ b/docs/data/material/components/table/ReactVirtualizedTable.tsx @@ -8,6 +8,18 @@ import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; import { TableVirtuoso, TableComponents } from 'react-virtuoso'; +// Deterministic pseudo random number. See https://stackoverflow.com/a/47593316 +function mulberry32(a: number): () => number { + return () => { + /* eslint-disable */ + let t = (a += 0x6d2b79f5); + t = Math.imul(t ^ (t >>> 15), t | 1); + t ^= t + Math.imul(t ^ (t >>> 7), t | 61); + return ((t ^ (t >>> 14)) >>> 0) / 4294967296; + /* eslint-enable */ + }; +} + interface Data { calories: number; carbs: number; @@ -77,8 +89,9 @@ const columns: ColumnData[] = [ }, ]; +const random = mulberry32(1); const rows: Data[] = Array.from({ length: 200 }, (_, index) => { - const randomSelection = sample[Math.floor(Math.random() * sample.length)]; + const randomSelection = sample[Math.floor(random() * sample.length)]; return createData(index, ...randomSelection); }); From 2c13ea0f68e5b22a596d9451892a91a6978ff14d Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Fri, 13 Sep 2024 14:28:04 +0200 Subject: [PATCH 2/6] Update ReactVirtualizedTable.js --- .../components/table/ReactVirtualizedTable.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/docs/data/material/components/table/ReactVirtualizedTable.js b/docs/data/material/components/table/ReactVirtualizedTable.js index e39dbe378d5ac9..01b77492b59208 100644 --- a/docs/data/material/components/table/ReactVirtualizedTable.js +++ b/docs/data/material/components/table/ReactVirtualizedTable.js @@ -8,6 +8,18 @@ import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; import { TableVirtuoso } from 'react-virtuoso'; +// Deterministic pseudo random number. See https://stackoverflow.com/a/47593316 +function mulberry32(a) { + return () => { + /* eslint-disable */ + let t = (a += 0x6d2b79f5); + t = Math.imul(t ^ (t >>> 15), t | 1); + t ^= t + Math.imul(t ^ (t >>> 7), t | 61); + return ((t ^ (t >>> 14)) >>> 0) / 4294967296; + /* eslint-enable */ + }; +} + const sample = [ ['Frozen yoghurt', 159, 6.0, 24, 4.0], ['Ice cream sandwich', 237, 9.0, 37, 4.3], @@ -52,8 +64,9 @@ const columns = [ }, ]; +const random = mulberry32(1); const rows = Array.from({ length: 200 }, (_, index) => { - const randomSelection = sample[Math.floor(Math.random() * sample.length)]; + const randomSelection = sample[Math.floor(random() * sample.length)]; return createData(index, ...randomSelection); }); From 29759f3e5e4eb22142be06392e52522c30c16ef2 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Tue, 17 Sep 2024 12:19:30 +0200 Subject: [PATCH 3/6] update demo --- .../table/ReactVirtualizedTable.tsx | 27 ++++++------------- docs/package.json | 4 ++- pnpm-lock.yaml | 11 ++++++++ 3 files changed, 22 insertions(+), 20 deletions(-) diff --git a/docs/data/material/components/table/ReactVirtualizedTable.tsx b/docs/data/material/components/table/ReactVirtualizedTable.tsx index 3d2934a3befc59..0b49d86938783a 100644 --- a/docs/data/material/components/table/ReactVirtualizedTable.tsx +++ b/docs/data/material/components/table/ReactVirtualizedTable.tsx @@ -7,18 +7,7 @@ import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; import { TableVirtuoso, TableComponents } from 'react-virtuoso'; - -// Deterministic pseudo random number. See https://stackoverflow.com/a/47593316 -function mulberry32(a: number): () => number { - return () => { - /* eslint-disable */ - let t = (a += 0x6d2b79f5); - t = Math.imul(t ^ (t >>> 15), t | 1); - t ^= t + Math.imul(t ^ (t >>> 7), t | 61); - return ((t ^ (t >>> 14)) >>> 0) / 4294967296; - /* eslint-enable */ - }; -} +import Chance from 'chance'; interface Data { calories: number; @@ -36,9 +25,10 @@ interface ColumnData { width: number; } -type Sample = [string, number, number, number, number]; +type Sample = + Parameters extends [number, ...infer Rest] ? Rest : never; -const sample: readonly Sample[] = [ +const sample: Sample[] = [ ['Frozen yoghurt', 159, 6.0, 24, 4.0], ['Ice cream sandwich', 237, 9.0, 37, 4.3], ['Eclair', 262, 16.0, 24, 6.0], @@ -89,11 +79,10 @@ const columns: ColumnData[] = [ }, ]; -const random = mulberry32(1); -const rows: Data[] = Array.from({ length: 200 }, (_, index) => { - const randomSelection = sample[Math.floor(random() * sample.length)]; - return createData(index, ...randomSelection); -}); +const chance = new Chance(42); +const rows: Data[] = Array.from({ length: 200 }, (_, index) => + createData(index, ...chance.pickone(sample)), +); const VirtuosoTableComponents: TableComponents = { Scroller: React.forwardRef((props, ref) => ( diff --git a/docs/package.json b/docs/package.json index b8883b7e5ca74f..5111ea20fd25b8 100644 --- a/docs/package.json +++ b/docs/package.json @@ -61,6 +61,7 @@ "babel-plugin-optimize-clsx": "^2.6.2", "babel-plugin-react-remove-properties": "^0.3.0", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", + "chance": "^1.1.12", "clean-css": "^5.3.3", "clipboard-copy": "^4.0.1", "clsx": "^2.1.1", @@ -113,12 +114,13 @@ "devDependencies": { "@babel/plugin-transform-react-constant-elements": "^7.25.1", "@babel/preset-typescript": "^7.24.7", + "@mui-internal/api-docs-builder": "workspace:^", "@mui/internal-docs-utils": "workspace:^", "@mui/internal-scripts": "workspace:^", "@mui/internal-test-utils": "workspace:^", - "@mui-internal/api-docs-builder": "workspace:^", "@types/autosuggest-highlight": "^3.2.3", "@types/chai": "^4.3.19", + "@types/chance": "^1.1.6", "@types/css-mediaquery": "^0.1.4", "@types/gtag.js": "^0.0.20", "@types/json2mq": "^0.2.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index da89444f48b95a..1e44ec44d4dfe0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -677,6 +677,9 @@ importers: babel-plugin-transform-react-remove-prop-types: specifier: ^0.4.24 version: 0.4.24 + chance: + specifier: ^1.1.12 + version: 1.1.12 clean-css: specifier: ^5.3.3 version: 5.3.3 @@ -846,6 +849,9 @@ importers: '@types/chai': specifier: ^4.3.19 version: 4.3.19 + '@types/chance': + specifier: ^1.1.6 + version: 1.1.6 '@types/css-mediaquery': specifier: ^0.1.4 version: 0.1.4 @@ -5381,6 +5387,9 @@ packages: '@types/chai@4.3.19': resolution: {integrity: sha512-2hHHvQBVE2FiSK4eN0Br6snX9MtolHaTo/batnLjlGRhoQzlCL61iVpxoqO7SfFyOw+P/pwv+0zNHzKoGWz9Cw==} + '@types/chance@1.1.6': + resolution: {integrity: sha512-V+pm3stv1Mvz8fSKJJod6CglNGVqEQ6OyuqitoDkWywEODM/eJd1eSuIp9xt6DrX8BWZ2eDSIzbw1tPCUTvGbQ==} + '@types/connect@3.4.35': resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==} @@ -16679,6 +16688,8 @@ snapshots: '@types/chai@4.3.19': {} + '@types/chance@1.1.6': {} + '@types/connect@3.4.35': dependencies: '@types/node': 20.16.5 From 48007f3a3ea76f8b2ad6e03a957fbc0dd3fe1d38 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Tue, 17 Sep 2024 12:21:28 +0200 Subject: [PATCH 4/6] Update ReactVirtualizedTable.js --- .../components/table/ReactVirtualizedTable.js | 22 +++++-------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/docs/data/material/components/table/ReactVirtualizedTable.js b/docs/data/material/components/table/ReactVirtualizedTable.js index 01b77492b59208..4eab0b40fab648 100644 --- a/docs/data/material/components/table/ReactVirtualizedTable.js +++ b/docs/data/material/components/table/ReactVirtualizedTable.js @@ -7,18 +7,7 @@ import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; import { TableVirtuoso } from 'react-virtuoso'; - -// Deterministic pseudo random number. See https://stackoverflow.com/a/47593316 -function mulberry32(a) { - return () => { - /* eslint-disable */ - let t = (a += 0x6d2b79f5); - t = Math.imul(t ^ (t >>> 15), t | 1); - t ^= t + Math.imul(t ^ (t >>> 7), t | 61); - return ((t ^ (t >>> 14)) >>> 0) / 4294967296; - /* eslint-enable */ - }; -} +import Chance from 'chance'; const sample = [ ['Frozen yoghurt', 159, 6.0, 24, 4.0], @@ -64,11 +53,10 @@ const columns = [ }, ]; -const random = mulberry32(1); -const rows = Array.from({ length: 200 }, (_, index) => { - const randomSelection = sample[Math.floor(random() * sample.length)]; - return createData(index, ...randomSelection); -}); +const chance = new Chance(42); +const rows = Array.from({ length: 200 }, (_, index) => + createData(index, ...chance.pickone(sample)), +); const VirtuosoTableComponents = { Scroller: React.forwardRef((props, ref) => ( From 876453fa0ea31a64dcd0677abe2d7e8386208413 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Wed, 18 Sep 2024 10:57:40 +0200 Subject: [PATCH 5/6] Update ReactVirtualizedTable.tsx --- .../table/ReactVirtualizedTable.tsx | 79 ++++++++----------- 1 file changed, 32 insertions(+), 47 deletions(-) diff --git a/docs/data/material/components/table/ReactVirtualizedTable.tsx b/docs/data/material/components/table/ReactVirtualizedTable.tsx index 0b49d86938783a..6b041710cdc85c 100644 --- a/docs/data/material/components/table/ReactVirtualizedTable.tsx +++ b/docs/data/material/components/table/ReactVirtualizedTable.tsx @@ -10,79 +10,64 @@ import { TableVirtuoso, TableComponents } from 'react-virtuoso'; import Chance from 'chance'; interface Data { - calories: number; - carbs: number; - dessert: string; - fat: number; id: number; - protein: number; + firstName: string; + lastName: string; + age: number; + phone: string; + state: string; } interface ColumnData { dataKey: keyof Data; label: string; numeric?: boolean; - width: number; + width?: number; } -type Sample = - Parameters extends [number, ...infer Rest] ? Rest : never; - -const sample: Sample[] = [ - ['Frozen yoghurt', 159, 6.0, 24, 4.0], - ['Ice cream sandwich', 237, 9.0, 37, 4.3], - ['Eclair', 262, 16.0, 24, 6.0], - ['Cupcake', 305, 3.7, 67, 4.3], - ['Gingerbread', 356, 16.0, 49, 3.9], -]; +const chance = new Chance(42); -function createData( - id: number, - dessert: string, - calories: number, - fat: number, - carbs: number, - protein: number, -): Data { - return { id, dessert, calories, fat, carbs, protein }; +function createData(id: number): Data { + return { + id, + firstName: chance.first(), + lastName: chance.last(), + age: chance.age(), + phone: chance.phone(), + state: chance.state({ full: true }), + }; } const columns: ColumnData[] = [ { - width: 200, - label: 'Dessert', - dataKey: 'dessert', + width: 100, + label: 'First Name', + dataKey: 'firstName', }, { - width: 120, - label: 'Calories\u00A0(g)', - dataKey: 'calories', - numeric: true, + width: 100, + label: 'Last Name', + dataKey: 'lastName', }, { - width: 120, - label: 'Fat\u00A0(g)', - dataKey: 'fat', + width: 50, + label: 'Age', + dataKey: 'age', numeric: true, }, { - width: 120, - label: 'Carbs\u00A0(g)', - dataKey: 'carbs', - numeric: true, + width: 110, + label: 'State', + dataKey: 'state', }, { - width: 120, - label: 'Protein\u00A0(g)', - dataKey: 'protein', - numeric: true, + width: 130, + label: 'Phone Number', + dataKey: 'phone', }, ]; -const chance = new Chance(42); -const rows: Data[] = Array.from({ length: 200 }, (_, index) => - createData(index, ...chance.pickone(sample)), -); +const rows: Data[] = Array.from({ length: 200 }, (_, index) => createData(index)); const VirtuosoTableComponents: TableComponents = { Scroller: React.forwardRef((props, ref) => ( From ac90b9fdf13fe782434e53d5845354be71a46158 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Wed, 18 Sep 2024 11:00:59 +0200 Subject: [PATCH 6/6] Update ReactVirtualizedTable.js --- .../components/table/ReactVirtualizedTable.js | 57 +++++++++---------- 1 file changed, 26 insertions(+), 31 deletions(-) diff --git a/docs/data/material/components/table/ReactVirtualizedTable.js b/docs/data/material/components/table/ReactVirtualizedTable.js index 4eab0b40fab648..edf07da6576333 100644 --- a/docs/data/material/components/table/ReactVirtualizedTable.js +++ b/docs/data/material/components/table/ReactVirtualizedTable.js @@ -9,54 +9,49 @@ import Paper from '@mui/material/Paper'; import { TableVirtuoso } from 'react-virtuoso'; import Chance from 'chance'; -const sample = [ - ['Frozen yoghurt', 159, 6.0, 24, 4.0], - ['Ice cream sandwich', 237, 9.0, 37, 4.3], - ['Eclair', 262, 16.0, 24, 6.0], - ['Cupcake', 305, 3.7, 67, 4.3], - ['Gingerbread', 356, 16.0, 49, 3.9], -]; +const chance = new Chance(42); -function createData(id, dessert, calories, fat, carbs, protein) { - return { id, dessert, calories, fat, carbs, protein }; +function createData(id) { + return { + id, + firstName: chance.first(), + lastName: chance.last(), + age: chance.age(), + phone: chance.phone(), + state: chance.state({ full: true }), + }; } const columns = [ { - width: 200, - label: 'Dessert', - dataKey: 'dessert', + width: 100, + label: 'First Name', + dataKey: 'firstName', }, { - width: 120, - label: 'Calories\u00A0(g)', - dataKey: 'calories', - numeric: true, + width: 100, + label: 'Last Name', + dataKey: 'lastName', }, { - width: 120, - label: 'Fat\u00A0(g)', - dataKey: 'fat', + width: 50, + label: 'Age', + dataKey: 'age', numeric: true, }, { - width: 120, - label: 'Carbs\u00A0(g)', - dataKey: 'carbs', - numeric: true, + width: 110, + label: 'State', + dataKey: 'state', }, { - width: 120, - label: 'Protein\u00A0(g)', - dataKey: 'protein', - numeric: true, + width: 130, + label: 'Phone Number', + dataKey: 'phone', }, ]; -const chance = new Chance(42); -const rows = Array.from({ length: 200 }, (_, index) => - createData(index, ...chance.pickone(sample)), -); +const rows = Array.from({ length: 200 }, (_, index) => createData(index)); const VirtuosoTableComponents = { Scroller: React.forwardRef((props, ref) => (