Material React Table

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