Material React Table

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { data, type Person } from './makeData';
8
9const Example = () => {
10  const columns = useMemo<MRT_ColumnDef<Person>[]>(
11    () => [
12      {
13        accessorKey: 'firstName',
14        header: 'First Name',
15      },
16      {
17        accessorKey: 'lastName',
18        header: 'Last Name',
19      },
20      {
21        accessorKey: 'email',
22        header: 'Email',
23      },
24      {
25        accessorKey: 'city',
26        header: 'City',
27      },
28    ],
29    [],
30  );
31
32  const table = useMaterialReactTable({
33    columns,
34    data,
35    enableRowPinning: true,
36    enablePagination: false,
37    enableStickyHeader: true,
38    getRowId: (row) => row.email,
39    initialState: {
40      rowPinning: {
41        top: ['rkholer33@yopmail.com', 'egarcia@yopmail.com'],
42        bottom: [],
43      },
44    },
45    muiTableContainerProps: {
46      sx: {
47        maxHeight: '400px',
48      },
49    },
50    muiTableBodyRowProps: ({ row, table }) => {
51      const { density } = table.getState();
52      return {
53        sx: {
54          //Set a fixed height for pinned rows
55          height: row.getIsPinned()
56            ? `${
57                //Default mrt row height estimates. Adjust as needed.
58                density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69
59              }px`
60            : undefined,
61        },
62      };
63    },
64  });
65
66  return <MaterialReactTable table={table} />;
67};
68
69export default Example;
70

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { data, type Person } from './makeData';
8
9const Example = () => {
10  const columns = useMemo<MRT_ColumnDef<Person>[]>(
11    () => [
12      {
13        accessorKey: 'firstName',
14        header: 'First Name',
15      },
16      {
17        accessorKey: 'lastName',
18        header: 'Last Name',
19      },
20      {
21        accessorKey: 'email',
22        header: 'Email',
23      },
24      {
25        accessorKey: 'city',
26        header: 'City',
27      },
28    ],
29    [],
30  );
31
32  const table = useMaterialReactTable({
33    columns,
34    data,
35    enableRowPinning: true,
36    enablePagination: false,
37    enableStickyHeader: true,
38    rowPinningDisplayMode: 'top-and-bottom',
39    getRowId: (row) => row.email,
40    muiTableContainerProps: {
41      sx: {
42        maxHeight: '400px',
43      },
44    },
45  });
46
47  return <MaterialReactTable table={table} />;
48};
49
50export default Example;
51

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { data, type Person } from './makeData';
8
9const Example = () => {
10  const columns = useMemo<MRT_ColumnDef<Person>[]>(
11    //column definitions...
12    () => [
13      {
14        accessorKey: 'firstName',
15        header: 'First Name',
16      },
17      {
18        accessorKey: 'lastName',
19        header: 'Last Name',
20      },
21      {
22        accessorKey: 'email',
23        header: 'Email',
24      },
25      {
26        accessorKey: 'city',
27        header: 'City',
28      },
29    ],
30    [],
31    
32  );
33
34  const table = useMaterialReactTable({
35    columns,
36    data,
37    enablePagination: false,
38    enableRowPinning: true,
39    enableRowSelection: true,
40    enableStickyHeader: true,
41    rowPinningDisplayMode: 'select-sticky',
42    getRowId: (row) => row.email,
43    initialState: {
44      rowPinning: {
45        top: ['ereinger@mailinator.com'],
46      },
47      rowSelection: {
48        'ereinger@mailinator.com': true,
49      },
50    },
51    muiTableContainerProps: {
52      sx: {
53        maxHeight: '400px',
54      },
55    },
56    muiTableBodyRowProps: ({ row, table }) => {
57      const { density } = table.getState();
58      return {
59        sx: {
60          //Set a fixed height for pinned rows
61          height: row.getIsPinned()
62            ? `${
63                //Default mrt row height estimates. Adjust as needed.
64                density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69
65              }px`
66            : undefined,
67        },
68      };
69    },
70  });
71
72  return <MaterialReactTable table={table} />;
73};
74
75export default Example;
76