[docs][table] Stabilize random series in virtualized table demo

docs/data/material/components/table/ReactVirtualizedTable.js

@@ -7,55 +7,51 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 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 rows = Array.from({ length: 200 }, (_, index) => {
-  const randomSelection = sample[Math.floor(Math.random() * sample.length)];
-  return createData(index, ...randomSelection);
-});
+const rows = Array.from({ length: 200 }, (_, index) => createData(index));
 
 const VirtuosoTableComponents = {
   Scroller: React.forwardRef((props, ref) => (

docs/data/material/components/table/ReactVirtualizedTable.tsx

@@ -7,80 +7,67 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 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 = [string, number, number, number, number];
+const chance = new Chance(42);
 
-const sample: readonly 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],
-];
-
-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 rows: Data[] = Array.from({ length: 200 }, (_, index) => {
-  const randomSelection = sample[Math.floor(Math.random() * sample.length)];
-  return createData(index, ...randomSelection);
-});
+const rows: Data[] = Array.from({ length: 200 }, (_, index) => createData(index));
 
 const VirtuosoTableComponents: TableComponents<Data> = {
   Scroller: React.forwardRef<HTMLDivElement>((props, ref) => (

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",