Infinite Scrolling Material React Table Example

Infinite Scrolling Example

An infinite scrolling table that is a table streams data from a remote server as the user scrolls down the table. This works great with large datasets, just like our Virtualized Example, except here we do not fetch all of the data at once upfront. Instead, we just fetch data a little bit at a time, as it becomes necessary.

Using a library like @tanstack/react-query makes it easy to implement an infinite scrolling table in Material React Table with the useInfiniteQuery hook.

Enabling the virtualization features here are actually optional, but encouraged if the table will be expected to render more than 100 rows at a time.

Demo

Open Code Sandbox Open on GitHub

#	First Name	Last Name	Address	State	Phone Number

Fetched 0 of 0 total rows.

Source Code

1import React, {
2  useCallback,
3  useEffect,
4  useMemo,
5  useRef,
6  useState,
7} from 'react';
8import MaterialReactTable from 'material-react-table';
9import { Typography } from '@mui/material';
10import {
11  QueryClient,
12  QueryClientProvider,
13  useInfiniteQuery,
14} from '@tanstack/react-query';
15import axios from 'axios';
16
17const columns = [
18  {
19    accessorKey: 'firstName',
20    header: 'First Name',
21  },
22  {
23    accessorKey: 'lastName',
24    header: 'Last Name',
25  },
26  {
27    accessorKey: 'address',
28    header: 'Address',
29  },
30  {
31    accessorKey: 'state',
32    header: 'State',
33  },
34  {
35    accessorKey: 'phoneNumber',
36    header: 'Phone Number',
37  },
38];
39
40const fetchSize = 25;
41
42const Example = () => {
43  const tableContainerRef = useRef(null); //we can get access to the underlying TableContainer element and react to its scroll events
44  const virtualizerInstanceRef = useRef < Virtualizer > null; //we can get access to the underlying Virtualizer instance and call its scrollToIndex method
45
46  const [columnFilters, setColumnFilters] = useState([]);
47  const [globalFilter, setGlobalFilter] = useState();
48  const [sorting, setSorting] = useState([]);
49
50  const { data, fetchNextPage, isError, isFetching, isLoading } =
51    useInfiniteQuery(
52      ['table-data', columnFilters, globalFilter, sorting],
53      async ({ pageParam = 0 }) => {
54        const url = new URL(
55          '/api/data',
56          'https://www.material-react-table.com',
57        );
58        url.searchParams.set('start', `${pageParam * fetchSize}`);
59        url.searchParams.set('size', `${fetchSize}`);
60        url.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
61        url.searchParams.set('globalFilter', globalFilter ?? '');
62        url.searchParams.set('sorting', JSON.stringify(sorting ?? []));
63
64        const { data: axiosData } = await axios.get(url.href);
65        return axiosData;
66      },
67      {
68        getNextPageParam: (_lastGroup, groups) => groups.length,
69        keepPreviousData: true,
70        refetchOnWindowFocus: false,
71      },
72    );
73
74  const flatData = useMemo(
75    () => data?.pages.flatMap((page) => page.data) ?? [],
76    [data],
77  );
78
79  const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0;
80  const totalFetched = flatData.length;
81
82  //called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table
83  const fetchMoreOnBottomReached = useCallback(
84    (containerRefElement) => {
85      if (containerRefElement) {
86        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
87        //once the user has scrolled within 200px of the bottom of the table, fetch more data if we can
88        if (
89          scrollHeight - scrollTop - clientHeight < 200 &&
90          !isFetching &&
91          totalFetched < totalDBRowCount
92        ) {
93          fetchNextPage();
94        }
95      }
96    },
97    [fetchNextPage, isFetching, totalFetched, totalDBRowCount],
98  );
99
100  //scroll to top of table when sorting or filters change
101  useEffect(() => {
102    if (virtualizerInstanceRef.current) {
103      virtualizerInstanceRef.current.scrollToIndex(0);
104    }
105  }, [sorting, columnFilters, globalFilter]);
106
107  //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data
108  useEffect(() => {
109    fetchMoreOnBottomReached(tableContainerRef.current);
110  }, [fetchMoreOnBottomReached]);
111
112  return (
113    <MaterialReactTable
114      columns={columns}
115      data={flatData}
116      enablePagination={false}
117      enableRowNumbers
118      enableRowVirtualization //optional, but recommended if it is likely going to be more than 100 rows
119      manualFiltering
120      manualSorting
121      muiTableContainerProps={{
122        ref: tableContainerRef, //get access to the table container element
123        sx: { maxHeight: '600px' }, //give the table a max height
124        onScroll: (
125          event, //add an event listener to the table container element
126        ) => fetchMoreOnBottomReached(event.target),
127      }}
128      muiToolbarAlertBannerProps={
129        isError
130          ? {
131              color: 'error',
132              children: 'Error loading data',
133            }
134          : undefined
135      }
136      onColumnFiltersChange={setColumnFilters}
137      onGlobalFilterChange={setGlobalFilter}
138      onSortingChange={setSorting}
139      renderBottomToolbarCustomActions={() => (
140        <Typography>
141          Fetched {totalFetched} of {totalDBRowCount} total rows.
142        </Typography>
143      )}
144      state={{
145        columnFilters,
146        globalFilter,
147        isLoading,
148        showAlertBanner: isError,
149        showProgressBars: isFetching,
150        sorting,
151      }}
152      virtualizerInstanceRef={virtualizerInstanceRef} //get access to the virtualizer instance
153    />
154  );
155};
156
157const queryClient = new QueryClient();
158
159const ExampleWithReactQueryProvider = () => (
160  <QueryClientProvider client={queryClient}>
161    <Example />
162  </QueryClientProvider>
163);
164
165export default ExampleWithReactQueryProvider;
166

View Extra Storybook Examples