Material React Table

1import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3import type { SortingState } from '@tanstack/react-table';
4import type { Virtualizer } from '@tanstack/react-virtual';
5import { makeData, Person } from './makeData';
6
7const Example: FC = () => {
8  const columns = useMemo<MRT_ColumnDef<Person>[]>(
9    //column definitions...
10    () => [
11      {
12        accessorKey: 'firstName',
13        header: 'First Name',
14        size: 150,
15      },
16      {
17        accessorKey: 'middleName',
18        header: 'Middle Name',
19        size: 150,
20      },
21      {
22        accessorKey: 'lastName',
23        header: 'Last Name',
24        size: 150,
25      },
26      {
27        accessorKey: 'email',
28        header: 'Email Address',
29        size: 300,
30      },
31      {
32        accessorKey: 'phoneNumber',
33        header: 'Phone Number',
34        size: 250,
35      },
36      {
37        accessorKey: 'address',
38        header: 'Address',
39        size: 300,
40      },
41      {
42        accessorKey: 'zipCode',
43        header: 'Zip Code',
44      },
45      {
46        accessorKey: 'city',
47        header: 'City',
48        size: 220,
49      },
50      {
51        accessorKey: 'state',
52        header: 'State',
53      },
54      {
55        accessorKey: 'country',
56        header: 'Country',
57        size: 350,
58      },
59      {
60        accessorKey: 'petName',
61        header: 'Pet Name',
62      },
63      {
64        accessorKey: 'age',
65        header: 'Age',
66      },
67      {
68        accessorKey: 'salary',
69        header: 'Salary',
70      },
71      {
72        accessorKey: 'dateOfBirth',
73        header: 'Date of Birth',
74      },
75      {
76        accessorKey: 'dateOfJoining',
77        header: 'Date of Joining',
78      },
79      {
80        accessorKey: 'isActive',
81        header: 'Is Active',
82      },
83    ],
84    [],
85    
86  );
87
88  //optionally access the underlying virtualizer instance
89  const rowVirtualizerInstanceRef =
90    useRef<Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
91
92  const [data, setData] = useState<Person[]>([]);
93  const [isLoading, setIsLoading] = useState(true);
94  const [sorting, setSorting] = useState<SortingState>([]);
95
96  useEffect(() => {
97    if (typeof window !== 'undefined') {
98      setData(makeData(10_000));
99      setIsLoading(false);
100    }
101  }, []);
102
103  useEffect(() => {
104    //scroll to the top of the table when the sorting changes
105    rowVirtualizerInstanceRef.current?.scrollToIndex(0);
106  }, [sorting]);
107
108  return (
109    <MaterialReactTable
110      columns={columns}
111      data={data} //10,000 rows
112      enableBottomToolbar={false}
113      enableColumnVirtualization
114      enableGlobalFilterModes
115      enablePagination={false}
116      enablePinning
117      enableRowNumbers
118      enableRowVirtualization
119      muiTableContainerProps={{ sx: { maxHeight: '600px' } }}
120      onSortingChange={setSorting}
121      state={{ isLoading, sorting }}
122      rowVirtualizerInstanceRef={rowVirtualizerInstanceRef} //optional
123      rowVirtualizerProps={{ overscan: 5 }} //optionally customize the row virtualizer
124      columnVirtualizerProps={{ overscan: 2 }} //optionally customize the column virtualizer
125    />
126  );
127};
128
129//virtualizerInstanceRef was renamed to rowVirtualizerInstanceRef in v1.5.0
130//virtualizerProps was renamed to rowVirtualizerProps in v1.5.0
131
132export default Example;
133