Material React Table

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