1import { useMemo } from 'react';
2import {
3 MaterialReactTable,
4 useMaterialReactTable,
5 type MRT_ColumnDef,
6} from 'material-react-table';
7import { citiesList, data, type Person, usStateList } from './makeData';
8
9const Example = () => {
10 const columns = useMemo<MRT_ColumnDef<Person>[]>(
11 () => [
12 {
13 header: 'Status',
14 accessorFn: (originalRow) => (originalRow.isActive ? 'true' : 'false'),
15 id: 'isActive',
16 filterVariant: 'checkbox',
17 Cell: ({ cell }) =>
18 cell.getValue() === 'true' ? 'Active' : 'Inactive',
19 size: 170,
20 },
21 {
22 accessorKey: 'name',
23 header: 'Name',
24 filterVariant: 'text',
25 size: 200,
26 },
27 {
28 accessorKey: 'salary',
29 header: 'Salary',
30 Cell: ({ cell }) =>
31 cell.getValue<number>().toLocaleString('en-US', {
32 style: 'currency',
33 currency: 'USD',
34 }),
35 filterVariant: 'range-slider',
36 filterFn: 'betweenInclusive',
37 muiFilterSliderProps: {
38 marks: true,
39 max: 200_000,
40 min: 30_000,
41 step: 10_000,
42 valueLabelFormat: (value) =>
43 value.toLocaleString('en-US', {
44 style: 'currency',
45 currency: 'USD',
46 }),
47 },
48 },
49 {
50 accessorKey: 'age',
51 header: 'Age',
52 filterVariant: 'range',
53 filterFn: 'between',
54 size: 80,
55 },
56 {
57 accessorKey: 'city',
58 header: 'City',
59 filterVariant: 'select',
60 filterSelectOptions: citiesList,
61 },
62 {
63 accessorKey: 'state',
64 header: 'State',
65 filterVariant: 'multi-select',
66 filterSelectOptions: usStateList,
67 },
68 {
69 accessorFn: (originalRow) => new Date(originalRow.hireDate),
70 id: 'hireDate',
71 header: 'Hire Date',
72 filterVariant: 'date-range',
73 Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(),
74 },
75 {
76 accessorFn: (originalRow) => new Date(originalRow.arrivalTime),
77 id: 'arrivalTime',
78 header: 'Arrival Time',
79 filterVariant: 'datetime-range',
80 Cell: ({ cell }) =>
81 `${cell.getValue<Date>().toLocaleDateString()} ${cell
82 .getValue<Date>()
83 .toLocaleTimeString()}`,
84 },
85 {
86 accessorFn: (originalRow) => new Date(originalRow.departureTime),
87 id: 'departureTime',
88 header: 'Departure Time',
89 filterVariant: 'time-range',
90 Cell: ({ cell }) => cell.getValue<Date>().toLocaleTimeString(),
91 },
92 ],
93 [],
94 );
95
96 const table = useMaterialReactTable({
97 columns,
98 data,
99 initialState: { showColumnFilters: true },
100 });
101
102 return <MaterialReactTable table={table} />;
103};
104
105
106import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
107import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
108
109const ExampleWithLocalizationProvider = () => (
110
111 <LocalizationProvider dateAdapter={AdapterDayjs}>
112 <Example />
113 </LocalizationProvider>
114);
115
116export default ExampleWithLocalizationProvider;
117
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4