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(
55        '/api/data',
56        process.env.NODE_ENV === 'production'
57          ? 'https://www.material-react-table.com'
58          : 'http://localhost:3000',
59      );
60      url.searchParams.set(
61        'start',
62        `${pagination.pageIndex * pagination.pageSize}`,
63      );
64      url.searchParams.set('size', `${pagination.pageSize}`);
65      url.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
66      url.searchParams.set('globalFilter', globalFilter ?? '');
67      url.searchParams.set('sorting', JSON.stringify(sorting ?? []));
68
69      try {
70        const response = await fetch(url.href);
71        const json = (await response.json()) as UserApiResponse;
72        setData(json.data);
73        setRowCount(json.meta.totalRowCount);
74      } catch (error) {
75        setIsError(true);
76        console.error(error);
77        return;
78      }
79      setIsError(false);
80      setIsLoading(false);
81      setIsRefetching(false);
82    };
83    fetchData();
84    // eslint-disable-next-line react-hooks/exhaustive-deps
85  }, [
86    columnFilters, //re-fetch when column filters change
87    globalFilter, //re-fetch when global filter changes
88    pagination.pageIndex, //re-fetch when page index changes
89    pagination.pageSize, //re-fetch when page size changes
90    sorting, //re-fetch when sorting changes
91  ]);
92
93  const columns = useMemo<MRT_ColumnDef<User>[]>(
94    () => [
95      {
96        accessorKey: 'firstName',
97        header: 'First Name',
98      },
99      //column definitions...
100      {
101        accessorKey: 'lastName',
102        header: 'Last Name',
103      },
104      {
105        accessorKey: 'address',
106        header: 'Address',
107      },
108      {
109        accessorKey: 'state',
110        header: 'State',
111      },
112      {
113        accessorKey: 'phoneNumber',
114        header: 'Phone Number',
115      },
116      
117    ],
118    [],
119  );
120
121  const table = useMaterialReactTable({
122    columns,
123    data,
124    enableRowSelection: true,
125    getRowId: (row) => row.phoneNumber,
126    initialState: { showColumnFilters: true },
127    manualFiltering: true,
128    manualPagination: true,
129    manualSorting: true,
130    muiToolbarAlertBannerProps: isError
131      ? {
132          color: 'error',
133          children: 'Error loading data',
134        }
135      : undefined,
136    onColumnFiltersChange: setColumnFilters,
137    onGlobalFilterChange: setGlobalFilter,
138    onPaginationChange: setPagination,
139    onSortingChange: setSorting,
140    rowCount,
141    state: {
142      columnFilters,
143      globalFilter,
144      isLoading,
145      pagination,
146      showAlertBanner: isError,
147      showProgressBars: isRefetching,
148      sorting,
149    },
150  });
151
152  return <MaterialReactTable table={table} />;
153};
154
155export default Example;
156