Material React Table

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

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