Material React Table

1import React, { FC, useEffect, useMemo, useState } from 'react';
2import Link from 'next/link';
3import MaterialReactTable, {
4  MRT_ColumnDef,
5  MRT_Column,
6} from 'material-react-table';
7import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';
8import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
9import { ColumnInstanceAPI, columnInstanceAPIs } from './columnInstanceAPIs';
10
11interface Props {
12  onlyProps?: Set<keyof MRT_Column>;
13}
14
15const ColumnInstanceAPIsTable: FC<Props> = ({ onlyProps }) => {
16  const isDesktop = useMediaQuery('(min-width: 1200px)');
17
18  const columns = useMemo(
19    () =>
20      [
21        {
22          accessorKey: 'columnInstanceAPI',
23          enableClickToCopy: true,
24          header: 'State Option',
25          muiTableBodyCellCopyButtonProps: ({ cell }) => ({
26            className: 'column-instance-api',
27            id: `${cell.getValue<string>()}-column-instance-api`,
28          }),
29          Cell: ({ cell }) => cell.getValue<string>(),
30        },
31        {
32          accessorKey: 'type',
33          header: 'Type',
34          enableGlobalFilter: false,
35          Cell: ({ cell }) => (
36            <SampleCodeSnippet
37              className="language-js"
38              enableCopyButton={false}
39              style={{
40                backgroundColor: 'transparent',
41                fontSize: '0.9rem',
42                margin: 0,
43                padding: 0,
44                minHeight: 'unset',
45              }}
46            >
47              {cell.getValue<string>()}
48            </SampleCodeSnippet>
49          ),
50        },
51        {
52          accessorKey: 'link',
53          disableFilters: true,
54          enableGlobalFilter: false,
55          header: 'More Info Links',
56          Cell: ({ cell, row }) => (
57            <Link href={cell.getValue() as string} passHref>
58              <MuiLink
59                target={
60                  (cell.getValue() as string).startsWith('http')
61                    ? '_blank'
62                    : undefined
63                }
64                rel="noreferrer"
65              >
66                {row.original?.linkText}
67              </MuiLink>
68            </Link>
69          ),
70        },
71      ] as MRT_ColumnDef<ColumnInstanceAPI>[],
72    [],
73  );
74
75  const [columnPinning, setColumnPinning] = useState({});
76
77  useEffect(() => {
78    if (typeof window !== 'undefined') {
79      if (isDesktop) {
80        setColumnPinning({
81          left: ['mrt-row-expand', 'mrt-row-numbers', 'columnInstanceAPI'],
82          right: ['link'],
83        });
84      } else {
85        setColumnPinning({});
86      }
87    }
88  }, [isDesktop]);
89
90  const data = useMemo(() => {
91    if (onlyProps) {
92      return columnInstanceAPIs.filter(({ columnInstanceAPI }) =>
93        onlyProps.has(columnInstanceAPI),
94      );
95    }
96    return columnInstanceAPIs;
97  }, [onlyProps]);
98
99  return (
100    <MaterialReactTable
101      columns={columns}
102      data={data}
103      displayColumnDefOptions={{
104        'mrt-row-numbers': {
105          size: 10,
106        },
107        'mrt-row-expand': {
108          size: 10,
109        },
110      }}
111      enableColumnActions={!onlyProps}
112      enableColumnFilterModes
113      enableColumnOrdering={!onlyProps}
114      enablePagination={false}
115      enablePinning
116      enableRowNumbers
117      enableBottomToolbar={false}
118      enableTopToolbar={!onlyProps}
119      initialState={{
120        columnVisibility: { description: false },
121        density: 'compact',
122        showGlobalFilter: true,
123        sorting: [{ id: 'columnInstanceAPI', desc: false }],
124      }}
125      muiSearchTextFieldProps={{
126        placeholder: 'Search Column APIs',
127        sx: { minWidth: '18rem' },
128        variant: 'outlined',
129      }}
130      muiTablePaperProps={{
131        sx: { mb: '1.5rem' },
132        id: onlyProps
133          ? 'relevant-column-instance-apis-table'
134          : 'column-instance-apis-table',
135      }}
136      positionGlobalFilter="left"
137      renderDetailPanel={({ row }) => (
138        <Typography
139          color={row.original.description ? 'secondary.main' : 'text.secondary'}
140        >
141          {row.original.description || 'No Description Provided... Yet...'}
142        </Typography>
143      )}
144      rowNumberMode="static"
145      state={{ columnPinning }}
146    />
147  );
148};
149
150export default ColumnInstanceAPIsTable;
151