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