Mantine React Table

1
import { useEffect, useMemo, useState } from 'react';
2
import Link from 'next/link';
3
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
4
import { Anchor, Text } from '@mantine/core';
5
import { useMediaQuery } from '@mantine/hooks';
6
import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
7
import { type ColumnOption, columnOptions } from './columnOptions';
8
import { getPrimaryColor } from 'mantine-react-table/src/column.utils';
9

10
interface Props {
11
  onlyOptions?: Set<keyof MRT_ColumnDef<ColumnOption>>;
12
}
13

14
const ColumnOptionsTable = ({ onlyOptions }: Props) => {
15
  const isDesktop = useMediaQuery('(min-width: 1200px)');
16

17
  const columns = useMemo(
18
    () =>
19
      [
20
        {
21
          accessorKey: 'columnOption',
22
          enableClickToCopy: true,
23
          header: 'Column Option',
24
          mantineCopyButtonProps: ({ cell, row }) => ({
25
            className: 'column-option',
26
            id: `${cell.getValue<string>()}-column-option`,
27
          }),
28
          Cell: ({ renderedCellValue, row }) =>
29
            row.original?.required ? (
30
              <Text
31
                component="strong"
32
                sx={(theme) => ({
33
                  color: getPrimaryColor(theme),
34
                })}
35
              >
36
                {renderedCellValue}*
37
              </Text>
38
            ) : (
39
              renderedCellValue
40
            ),
41
        },
42
        {
43
          accessorKey: 'type',
44
          header: 'Type',
45
          enableGlobalFilter: false,
46
          Cell: ({ cell }) => (
47
            <SampleCodeSnippet language="typescript" noCopy>
48
              {cell.getValue<string>()}
49
            </SampleCodeSnippet>
50
          ),
51
        },
52
        {
53
          accessorKey: 'required',
54
          enableGlobalFilter: false,
55
          header: 'Required',
56
        },
57
        {
58
          accessorKey: 'defaultValue',
59
          enableGlobalFilter: false,
60
          header: 'Default Value',
61
          Cell: ({ cell }) => (
62
            <SampleCodeSnippet language="typescript" noCopy>
63
              {cell.getValue<string>()}
64
            </SampleCodeSnippet>
65
          ),
66
        },
67
        {
68
          accessorKey: 'description',
69
          enableGlobalFilter: false,
70
          header: 'Description',
71
        },
72
        {
73
          accessorKey: 'link',
74
          disableFilters: true,
75
          enableGlobalFilter: false,
76
          header: 'More Info Links',
77
          Cell: ({ cell, row }) => (
78
            <Link href={cell.getValue() as string} passHref legacyBehavior>
79
              <Anchor
80
                target={
81
                  (cell.getValue() as string).startsWith('http')
82
                    ? '_blank'
83
                    : undefined
84
                }
85
                rel="noopener"
86
              >
87
                {row.original?.linkText}
88
              </Anchor>
89
            </Link>
90
          ),
91
        },
92
      ] as MRT_ColumnDef<ColumnOption>[],
93
    [],
94
  );
95

96
  const [columnPinning, setColumnPinning] = useState({});
97

98
  useEffect(() => {
99
    if (typeof window !== 'undefined') {
100
      if (isDesktop) {
101
        setColumnPinning({
102
          left: ['mrt-row-expand', 'mrt-row-numbers', 'columnOption'],
103
          right: ['link'],
104
        });
105
      } else {
106
        setColumnPinning({});
107
      }
108
    }
109
  }, [isDesktop]);
110

111
  const data = useMemo(() => {
112
    if (onlyOptions) {
113
      return columnOptions.filter(({ columnOption }) =>
114
        onlyOptions.has(columnOption),
115
      );
116
    }
117
    return columnOptions;
118
  }, [onlyOptions]);
119

120
  return (
121
    <MantineReactTable
122
      columns={columns}
123
      data={data}
124
      displayColumnDefOptions={{
125
        'mrt-row-numbers': {
126
          size: 10,
127
        },
128
        'mrt-row-expand': {
129
          size: 10,
130
        },
131
      }}
132
      enableColumnActions={!onlyOptions}
133
      enableColumnFilterModes
134
      enablePagination={false}
135
      enablePinning
136
      enableRowNumbers
137
      enableBottomToolbar={false}
138
      enableTopToolbar={!onlyOptions}
139
      initialState={{
140
        columnVisibility: { required: false, description: false },
141
        density: 'xs',
142
        showGlobalFilter: true,
143
        sorting: [{ id: 'columnOption', desc: false }],
144
      }}
145
      mantineSearchTextInputProps={{
146
        placeholder: 'Search Column Options',
147
        sx: { minWidth: '18rem' },
148
        variant: 'filled',
149
      }}
150
      mantinePaperProps={{
151
        sx: { marginBottom: '24px' },
152
        id: onlyOptions
153
          ? 'relevant-column-options-table'
154
          : 'column-options-table',
155
      }}
156
      positionGlobalFilter="left"
157
      renderDetailPanel={({ row }) => (
158
        <Text color={row.original.description ? 'teal' : 'gray'}>
159
          {row.original.description || 'No Description Provided... Yet...'}
160
        </Text>
161
      )}
162
      rowNumberMode="static"
163
      onColumnPinningChange={setColumnPinning}
164
      state={{ columnPinning }}
165
    />
166
  );
167
};
168

169
export default ColumnOptionsTable;