Mantine React Table

1
import { useMemo, useState } from 'react';
2
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
3
import { ActionIcon, Tooltip } from '@mantine/core';
4
import { IconRefresh } from '@tabler/icons-react';
5
import {
6
  QueryClient,
7
  QueryClientProvider,
8
  useQuery,
9
} from '@tanstack/react-query';
10

11
//custom react-query hook
12
const useGetUsers = ({
13
  columnFilterFns,
14
  columnFilters,
15
  globalFilter,
16
  sorting,
17
  pagination,
18
}) => {
19
  //build the URL (https://www.mantine-react-table.com/api/data?start=0&size=10&filters=[]&globalFilter=&sorting=[])
20
  const fetchURL = new URL(
21
    '/api/data',
22
    process.env.NODE_ENV === 'production'
23
      ? 'https://www.mantine-react-table.com'
24
      : 'http://localhost:3001',
25
  );
26
  fetchURL.searchParams.set(
27
    'start',
28
    `${pagination.pageIndex * pagination.pageSize}`,
29
  );
30
  fetchURL.searchParams.set('size', `${pagination.pageSize}`);
31
  fetchURL.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
32
  fetchURL.searchParams.set(
33
    'filterModes',
34
    JSON.stringify(columnFilterFns ?? {}),
35
  );
36
  fetchURL.searchParams.set('globalFilter', globalFilter ?? '');
37
  fetchURL.searchParams.set('sorting', JSON.stringify(sorting ?? []));
38

39
  return useQuery({
40
    queryKey: ['users', fetchURL.href], //refetch whenever the URL changes (columnFilters, globalFilter, sorting, pagination)
41
    queryFn: () => fetch(fetchURL.href).then((res) => res.json()),
42
    keepPreviousData: true, //useful for paginated queries by keeping data from previous pages on screen while fetching the next page
43
    staleTime: 30_000, //don't refetch previously viewed pages until cache is more than 30 seconds old
44
  });
45
};
46

47
const Example = () => {
48
  const columns = useMemo(
49
    () => [
50
      {
51
        accessorKey: 'firstName',
52
        header: 'First Name',
53
      },
54
      {
55
        accessorKey: 'lastName',
56
        header: 'Last Name',
57
      },
58
      {
59
        accessorKey: 'address',
60
        header: 'Address',
61
      },
62
      {
63
        accessorKey: 'state',
64
        header: 'State',
65
      },
66
      {
67
        accessorKey: 'phoneNumber',
68
        header: 'Phone Number',
69
      },
70
    ],
71
    [],
72
  );
73

74
  //Manage MRT state that we want to pass to our API
75
  const [columnFilters, setColumnFilters] = useState([]);
76
  const [columnFilterFns, setColumnFilterFns] = //filter modes
77
    useState(
78
      Object.fromEntries(
79
        columns.map(({ accessorKey }) => [accessorKey, 'contains']),
80
      ),
81
    ); //default to "contains" for all columns
82
  const [globalFilter, setGlobalFilter] = useState('');
83
  const [sorting, setSorting] = useState([]);
84
  const [pagination, setPagination] = useState({
85
    pageIndex: 0,
86
    pageSize: 10,
87
  });
88

89
  //call our custom react-query hook
90
  const { data, isError, isFetching, isLoading, refetch } = useGetUsers({
91
    columnFilterFns,
92
    columnFilters,
93
    globalFilter,
94
    pagination,
95
    sorting,
96
  });
97

98
  //this will depend on your API response shape
99
  const fetchedUsers = data?.data ?? [];
100
  const totalRowCount = data?.meta?.totalRowCount ?? 0;
101

102
  const table = useMantineReactTable({
103
    columns,
104
    data: fetchedUsers,
105
    enableColumnFilterModes: true,
106
    columnFilterModeOptions: ['contains', 'startsWith', 'endsWith'],
107
    initialState: { showColumnFilters: true },
108
    manualFiltering: true,
109
    manualPagination: true,
110
    manualSorting: true,
111
    mantineToolbarAlertBannerProps: isError
112
      ? {
113
          color: 'red',
114
          children: 'Error loading data',
115
        }
116
      : undefined,
117
    onColumnFilterFnsChange: setColumnFilterFns,
118
    onColumnFiltersChange: setColumnFilters,
119
    onGlobalFilterChange: setGlobalFilter,
120
    onPaginationChange: setPagination,
121
    onSortingChange: setSorting,
122
    renderTopToolbarCustomActions: () => (
123
      <Tooltip label="Refresh Data">
124
        <ActionIcon onClick={() => refetch()}>
125
          <IconRefresh />
126
        </ActionIcon>
127
      </Tooltip>
128
    ),
129
    rowCount: totalRowCount,
130
    state: {
131
      columnFilterFns,
132
      columnFilters,
133
      globalFilter,
134
      isLoading,
135
      pagination,
136
      showAlertBanner: isError,
137
      showProgressBars: isFetching,
138
      sorting,
139
    },
140
  });
141

142
  return <MantineReactTable table={table} />;
143
};
144

145
const queryClient = new QueryClient();
146

147
const ExampleWithReactQueryProvider = () => (
148
  //Put this with your other react-query providers near root of your app
149
  <QueryClientProvider client={queryClient}>
150
    <Example />
151
  </QueryClientProvider>
152
);
153

154
export default ExampleWithReactQueryProvider;

1
import {
2
  type MRT_ColumnFiltersState,
3
  type MRT_SortingState,
4
} from 'mantine-react-table';
5
import { type NextApiRequest, type NextApiResponse } from 'next';
6
import { getData } from './mock';
7

8
//This is just a simple mock of a backend API where you would do server-side pagination, filtering, and sorting
9
//You would most likely want way more validation and error handling than this in a real world application
10
//Also most of this logic should actually be in the database query itself, but this is just a mock
11
export default function handler(req: NextApiRequest, res: NextApiResponse) {
12
  let dbData = getData();
13
  const { start, size, filters, filterModes, sorting, globalFilter } =
14
    req.query as Record<string, string>;
15

16
  const parsedFilterModes = JSON.parse(filterModes ?? '{}') as Record<
17
    string,
18
    string
19
  >;
20

21
  const parsedColumnFilters = JSON.parse(filters) as MRT_ColumnFiltersState;
22
  if (parsedColumnFilters?.length) {
23
    parsedColumnFilters.map((filter) => {
24
      const { id: columnId, value: filterValue } = filter;
25
      const filterMode = parsedFilterModes?.[columnId] ?? 'contains';
26
      dbData = dbData.filter((row) => {
27
        const rowValue = row[columnId]?.toString()?.toLowerCase();
28
        if (filterMode === 'contains') {
29
          return rowValue.includes?.((filterValue as string).toLowerCase());
30
        } else if (filterMode === 'startsWith') {
31
          return rowValue.startsWith?.((filterValue as string).toLowerCase());
32
        } else if (filterMode === 'endsWith') {
33
          return rowValue.endsWith?.((filterValue as string).toLowerCase());
34
        }
35
      });
36
    });
37
  }
38

39
  if (globalFilter) {
40
    dbData = dbData.filter((row) =>
41
      Object.keys(row).some(
42
        (columnId) =>
43
          row[columnId]
44
            ?.toString()
45
            ?.toLowerCase()
46
            ?.includes?.((globalFilter as string).toLowerCase()),
47
      ),
48
    );
49
  }
50

51
  const parsedSorting = JSON.parse(sorting) as MRT_SortingState;
52
  if (parsedSorting?.length) {
53
    const sort = parsedSorting[0];
54
    const { id, desc } = sort;
55
    dbData.sort((a, b) => {
56
      if (desc) {
57
        return a[id] < b[id] ? 1 : -1;
58
      }
59
      return a[id] > b[id] ? 1 : -1;
60
    });
61
  }
62

63
  res.status(200).json({
64
    data:
65
      dbData?.slice(parseInt(start), parseInt(start) + parseInt(size)) ?? [],
66
    meta: { totalRowCount: dbData.length },
67
  });
68
}