Material React Table

1import React, { FC, useEffect, useMemo, useState } from 'react';
2import Link from 'next/link';
3import MaterialReactTable, {
4  MRT_ColumnDef,
5  MRT_TableState,
6} from 'material-react-table';
7import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';
8import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
9import { StateRow, stateOptions } from './stateOptions';
10
11interface Props {
12  onlyProps?: Set<keyof MRT_TableState>;
13}
14
15const StateOptionsTable: FC<Props> = ({ onlyProps }) => {
16  const isDesktop = useMediaQuery('(min-width: 1200px)');
17
18  const columns = useMemo(
19    () =>
20      [
21        {
22          accessorKey: 'stateOption',
23          enableClickToCopy: true,
24          header: 'State Option',
25          muiTableBodyCellCopyButtonProps: ({ cell }) => ({
26            className: 'state-option',
27            // component: 'a',
28            id: `${cell.getValue<string>()}-state-option`,
29            // href: `#${cell.getValue<string>()}-state-option`,
30          }),
31          Cell: ({ cell }) => cell.getValue<string>(),
32        },
33        {
34          accessorKey: 'type',
35          header: 'Type',
36          enableGlobalFilter: false,
37          Cell: ({ cell }) => (
38            <SampleCodeSnippet
39              className="language-js"
40              enableCopyButton={false}
41              style={{
42                backgroundColor: 'transparent',
43                fontSize: '0.9rem',
44                margin: 0,
45                padding: 0,
46                minHeight: 'unset',
47              }}
48            >
49              {cell.getValue<string>()}
50            </SampleCodeSnippet>
51          ),
52        },
53        {
54          accessorKey: 'defaultValue',
55          enableGlobalFilter: false,
56          header: 'Default Value',
57          Cell: ({ cell }) => (
58            <SampleCodeSnippet
59              className="language-js"
60              enableCopyButton={false}
61              style={{
62                backgroundColor: 'transparent',
63                fontSize: '0.9rem',
64                margin: 0,
65                padding: 0,
66                minHeight: 'unset',
67              }}
68            >
69              {cell.getValue<string>()}
70            </SampleCodeSnippet>
71          ),
72        },
73        {
74          accessorKey: 'description',
75          enableGlobalFilter: false,
76          header: 'Description',
77        },
78        {
79          accessorKey: 'link',
80          disableFilters: true,
81          enableGlobalFilter: false,
82          header: 'More Info Links',
83          Cell: ({ cell, row }) => (
84            <Link href={cell.getValue() as string} passHref>
85              <MuiLink
86                target={
87                  (cell.getValue() as string).startsWith('http')
88                    ? '_blank'
89                    : undefined
90                }
91                rel="noreferrer"
92              >
93                {row.original?.linkText}
94              </MuiLink>
95            </Link>
96          ),
97        },
98      ] as MRT_ColumnDef<StateRow>[],
99    [],
100  );
101
102  const [columnPinning, setColumnPinning] = useState({});
103
104  useEffect(() => {
105    if (typeof window !== 'undefined') {
106      if (isDesktop) {
107        setColumnPinning({
108          left: ['mrt-row-expand', 'mrt-row-numbers', 'stateOption'],
109          right: ['link'],
110        });
111      } else {
112        setColumnPinning({});
113      }
114    }
115  }, [isDesktop]);
116
117  const data = useMemo(() => {
118    if (onlyProps) {
119      return stateOptions.filter(({ stateOption }) =>
120        onlyProps.has(stateOption),
121      );
122    }
123    return stateOptions;
124  }, [onlyProps]);
125
126  return (
127    <MaterialReactTable
128      columns={columns}
129      data={data}
130      displayColumnDefOptions={{
131        'mrt-row-numbers': {
132          size: 10,
133        },
134        'mrt-row-expand': {
135          size: 10,
136        },
137      }}
138      enableColumnActions={!onlyProps}
139      enableColumnFilterModes
140      enablePagination={false}
141      enablePinning
142      enableRowNumbers
143      enableBottomToolbar={false}
144      enableTopToolbar={!onlyProps}
145      initialState={{
146        columnVisibility: { description: false },
147        density: 'compact',
148        showGlobalFilter: true,
149        sorting: [{ id: 'stateOption', desc: false }],
150      }}
151      muiSearchTextFieldProps={{
152        placeholder: 'Search State Options',
153        sx: { minWidth: '18rem' },
154        variant: 'outlined',
155      }}
156      muiTablePaperProps={{
157        sx: { mb: '1.5rem' },
158        id: onlyProps ? 'relevant-state-options-table' : 'state-options-table',
159      }}
160      positionGlobalFilter="left"
161      renderDetailPanel={({ row }) => (
162        <Typography
163          color={row.original.description ? 'secondary.main' : 'text.secondary'}
164        >
165          {row.original.description || 'No Description Provided... Yet...'}
166        </Typography>
167      )}
168      rowNumberMode="static"
169      onColumnPinningChange={setColumnPinning}
170      state={{ columnPinning }}
171    />
172  );
173};
174
175export default StateOptionsTable;
176