Update ReactVirtualizedTable.tsx

mui · Sep 18, 2024 · 876453f · 876453f
1 parent 48007f3
commit 876453f
Showing 1 changed file with 32 additions and 47 deletions.
diff --git 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<typeof createData> 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<Data> = {
   Scroller: React.forwardRef<HTMLDivElement>((props, ref) => (