Material React Table

1import {
2  MaterialReactTable,
3  useMaterialReactTable,
4  type MRT_ColumnDef,
5} from 'material-react-table';
6import { data, type Person } from './makeData';
7import { Button } from '@mui/material';
8
9const columns: MRT_ColumnDef<Person>[] = [
10  {
11    accessorKey: 'firstName',
12    header: 'First Name',
13    sortDescFirst: false, //sort first name in ascending order by default on first sort click (default for non-numeric columns)
14  },
15  //column definitions...
16  {
17    accessorKey: 'lastName',
18    header: 'Last Name',
19  },
20  {
21    accessorKey: 'city',
22    header: 'City',
23  },
24  {
25    accessorKey: 'state',
26    header: 'State',
27  },
28  
29  {
30    accessorKey: 'salary',
31    header: 'Salary',
32    sortDescFirst: true, //sort salary in descending order by default on first sort click (default for numeric columns)
33  },
34];
35
36const Example = () => {
37  const table = useMaterialReactTable({
38    columns,
39    data,
40    isMultiSortEvent: () => true, //now no need to hold `shift` key to multi-sort
41    maxMultiSortColCount: 3, //prevent more than 3 columns from being sorted at once
42    initialState: {
43      sorting: [
44        { id: 'state', desc: false }, //sort by state in ascending order by default
45        { id: 'city', desc: true }, //then sort by city in descending order by default
46      ],
47    },
48    renderTopToolbarCustomActions: ({ table }) => (
49      <Button onClick={() => table.resetSorting(true)}>
50        Clear All Sorting
51      </Button>
52    ),
53  });
54
55  return <MaterialReactTable table={table} />;
56};
57
58export default Example;
59

1import { useEffect, useMemo, useState } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6  type MRT_ColumnFiltersState,
7  type MRT_PaginationState,
8  type MRT_SortingState,
9} from 'material-react-table';
10
11type UserApiResponse = {
12  data: Array<User>;
13  meta: {
14    totalRowCount: number;
15  };
16};
17
18type User = {
19  firstName: string;
20  lastName: string;
21  address: string;
22  state: string;
23  phoneNumber: string;
24};
25
26const Example = () => {
27  //data and fetching state
28  const [data, setData] = useState<User[]>([]);
29  const [isError, setIsError] = useState(false);
30  const [isLoading, setIsLoading] = useState(false);
31  const [isRefetching, setIsRefetching] = useState(false);
32  const [rowCount, setRowCount] = useState(0);
33
34  //table state
35  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
36    [],
37  );
38  const [globalFilter, setGlobalFilter] = useState('');
39  const [sorting, setSorting] = useState<MRT_SortingState>([]);
40  const [pagination, setPagination] = useState<MRT_PaginationState>({
41    pageIndex: 0,
42    pageSize: 10,
43  });
44
45  //if you want to avoid useEffect, look at the React Query example instead
46  useEffect(() => {
47    const fetchData = async () => {
48      if (!data.length) {
49        setIsLoading(true);
50      } else {
51        setIsRefetching(true);
52      }
53
54      const url = new URL('/api/data', location.origin);
55      url.searchParams.set(
56        'start',
57        `${pagination.pageIndex * pagination.pageSize}`,
58      );
59      url.searchParams.set('size', `${pagination.pageSize}`);
60      url.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
61      url.searchParams.set('globalFilter', globalFilter ?? '');
62      url.searchParams.set('sorting', JSON.stringify(sorting ?? []));
63
64      try {
65        const response = await fetch(url.href);
66        const json = (await response.json()) as UserApiResponse;
67        setData(json.data);
68        setRowCount(json.meta.totalRowCount);
69      } catch (error) {
70        setIsError(true);
71        console.error(error);
72        return;
73      }
74      setIsError(false);
75      setIsLoading(false);
76      setIsRefetching(false);
77    };
78    fetchData();
79    // eslint-disable-next-line react-hooks/exhaustive-deps
80  }, [
81    columnFilters, //re-fetch when column filters change
82    globalFilter, //re-fetch when global filter changes
83    pagination.pageIndex, //re-fetch when page index changes
84    pagination.pageSize, //re-fetch when page size changes
85    sorting, //re-fetch when sorting changes
86  ]);
87
88  const columns = useMemo<MRT_ColumnDef<User>[]>(
89    () => [
90      {
91        accessorKey: 'firstName',
92        header: 'First Name',
93      },
94      //column definitions...
95      {
96        accessorKey: 'lastName',
97        header: 'Last Name',
98      },
99      {
100        accessorKey: 'address',
101        header: 'Address',
102      },
103      {
104        accessorKey: 'state',
105        header: 'State',
106      },
107      {
108        accessorKey: 'phoneNumber',
109        header: 'Phone Number',
110      },
111      
112    ],
113    [],
114  );
115
116  const table = useMaterialReactTable({
117    columns,
118    data,
119    enableRowSelection: true,
120    getRowId: (row) => row.phoneNumber,
121    initialState: { showColumnFilters: true },
122    manualFiltering: true,
123    manualPagination: true,
124    manualSorting: true,
125    muiToolbarAlertBannerProps: isError
126      ? {
127          color: 'error',
128          children: 'Error loading data',
129        }
130      : undefined,
131    onColumnFiltersChange: setColumnFilters,
132    onGlobalFilterChange: setGlobalFilter,
133    onPaginationChange: setPagination,
134    onSortingChange: setSorting,
135    rowCount,
136    state: {
137      columnFilters,
138      globalFilter,
139      isLoading,
140      pagination,
141      showAlertBanner: isError,
142      showProgressBars: isRefetching,
143      sorting,
144    },
145  });
146
147  return <MaterialReactTable table={table} />;
148};
149
150export default Example;
151