Material React Table

1import React, { 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  onlyProps?: Set<keyof MRT_ColumnDef>;
15}
16
17const ColumnOptionsTable = ({ onlyProps }: 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        muiTableBodyCellCopyButtonProps: ({ 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: 'required',
62        enableGlobalFilter: false,
63        header: 'Required',
64      },
65      {
66        accessorKey: 'defaultValue',
67        enableGlobalFilter: false,
68        header: 'Default Value',
69        Cell: ({ cell }) => (
70          <SampleCodeSnippet
71            className="language-js"
72            enableCopyButton={false}
73            style={{
74              backgroundColor: 'transparent',
75              fontSize: '0.9rem',
76              margin: 0,
77              padding: 0,
78              minHeight: 'unset',
79            }}
80          >
81            {cell.getValue<string>()}
82          </SampleCodeSnippet>
83        ),
84      },
85      {
86        accessorKey: 'description',
87        enableGlobalFilter: false,
88        header: 'Description',
89      },
90      {
91        accessorKey: 'link',
92        disableFilters: true,
93        enableGlobalFilter: false,
94        header: 'More Info Links',
95        Cell: ({ cell, row }) => (
96          <Link href={cell.getValue<string>()} passHref legacyBehavior>
97            <MuiLink
98              target={
99                cell.getValue<string>().startsWith('http')
100                  ? '_blank'
101                  : undefined
102              }
103              rel="noopener"
104            >
105              {row.original?.linkText}
106            </MuiLink>
107          </Link>
108        ),
109      },
110    ],
111    [theme],
112  );
113
114  const [columnPinning, setColumnPinning] = useState({});
115
116  useEffect(() => {
117    if (typeof window !== 'undefined') {
118      if (isDesktop) {
119        setColumnPinning({
120          left: ['mrt-row-expand', 'mrt-row-numbers', 'columnOption'],
121          right: ['link'],
122        });
123      } else {
124        setColumnPinning({});
125      }
126    }
127  }, [isDesktop]);
128
129  const data = useMemo(() => {
130    if (onlyProps) {
131      return columnOptions.filter(({ columnOption }) =>
132        onlyProps.has(columnOption),
133      );
134    }
135    return columnOptions;
136  }, [onlyProps]);
137
138  return (
139    <MaterialReactTable
140      columns={columns}
141      data={data}
142      displayColumnDefOptions={{
143        'mrt-row-numbers': {
144          size: 10,
145        },
146        'mrt-row-expand': {
147          size: 10,
148        },
149      }}
150      enableColumnActions={!onlyProps}
151      enableColumnFilterModes
152      enablePagination={false}
153      enablePinning
154      enableRowNumbers
155      enableBottomToolbar={false}
156      enableTopToolbar={!onlyProps}
157      initialState={{
158        columnVisibility: { required: false, description: false },
159        density: 'compact',
160        showGlobalFilter: true,
161        sorting: [
162          { id: 'required', desc: true },
163          { id: 'columnOption', desc: false },
164        ],
165      }}
166      muiSearchTextFieldProps={{
167        placeholder: 'Search Column Options',
168        sx: { minWidth: '18rem' },
169        variant: 'outlined',
170      }}
171      muiTablePaperProps={{
172        sx: { mb: '1.5rem' },
173        id: onlyProps
174          ? 'relevant-column-options-table'
175          : 'column-options-table',
176      }}
177      positionGlobalFilter="left"
178      renderDetailPanel={({ row }) => (
179        <Typography
180          color={row.original.description ? 'secondary.main' : 'text.secondary'}
181        >
182          {row.original.description || 'No Description Provided... Yet...'}
183        </Typography>
184      )}
185      rowNumberMode="static"
186      onColumnPinningChange={setColumnPinning}
187      state={{ columnPinning }}
188    />
189  );
190};
191
192export default ColumnOptionsTable;
193