Material React Table

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