Mantine React Table

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3

4
const Example = () => {
5
  const columns = useMemo(
6
    () => [
7
      {
8
        accessorKey: 'firstName',
9
        header: 'First Name',
10
      },
11
      {
12
        accessorKey: 'lastName',
13
        header: 'Last Name',
14
      },
15
      {
16
        accessorKey: 'email',
17
        header: 'Email',
18
      },
19
      {
20
        accessorKey: 'city',
21
        header: 'City',
22
      },
23
    ],
24
    [],
25
  );
26

27
  return (
28
    <MantineReactTable
29
      columns={columns}
30
      data={[]}
31
      state={{ isLoading: true }}
32
    />
33
  );
34
};
35

36
export default Example;

1
import { useEffect, useMemo, useState } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { data } from './makeData';
4
import { Button } from '@mantine/core';
5

6
const Example = () => {
7
  const columns = useMemo(
8
    () => [
9
      {
10
        accessorKey: 'firstName',
11
        header: 'First Name',
12
      },
13
      {
14
        accessorKey: 'lastName',
15
        header: 'Last Name',
16
      },
17
      {
18
        accessorKey: 'email',
19
        header: 'Email',
20
      },
21
      {
22
        accessorKey: 'city',
23
        header: 'City',
24
      },
25
    ],
26
    [],
27
  );
28

29
  const [progress, setProgress] = useState(0);
30

31
  //simulate random progress for demo purposes
32
  useEffect(() => {
33
    const interval = setInterval(() => {
34
      setProgress((oldProgress) => {
35
        const newProgress = Math.random() * 20;
36
        return Math.min(oldProgress + newProgress, 100);
37
      });
38
    }, 1000);
39
    return () => clearInterval(interval);
40
  }, []);
41

42
  return (
43
    <MantineReactTable
44
      columns={columns}
45
      data={data}
46
      mantineProgressProps={({ isTopToolbar }) => ({
47
        color: 'orange',
48
        variant: 'determinate', //if you want to show exact progress value
49
        value: progress, //value between 0 and 100
50
        sx: {
51
          display: isTopToolbar ? 'block' : 'none', //hide bottom progress bar
52
        },
53
      })}
54
      renderTopToolbarCustomActions={() => (
55
        <Button onClick={() => setProgress(0)} variant="filled">
56
          Reset
57
        </Button>
58
      )}
59
      state={{ showProgressBars: true }}
60
    />
61
  );
62
};
63

64
export default Example;

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
}