@mini_7/material-react-table-mcp 4.0.0 → 4.0.1

package/data/examples/customize-filter-variants.js

@@ -0,0 +1,98 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { citiesList, data, usStateList } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            header: 'Status',
+            accessorFn: (originalRow) => (originalRow.isActive ? 'true' : 'false'), //must be strings
+            id: 'isActive',
+            filterVariant: 'checkbox',
+            Cell: ({ cell }) => cell.getValue() === 'true' ? 'Active' : 'Inactive',
+            size: 170,
+        },
+        {
+            accessorKey: 'name',
+            header: 'Name',
+            filterVariant: 'text', // default
+            size: 200,
+        },
+        {
+            accessorKey: 'salary',
+            header: 'Salary',
+            Cell: ({ cell }) => cell.getValue().toLocaleString('en-US', {
+                style: 'currency',
+                currency: 'USD',
+            }),
+            filterVariant: 'range-slider',
+            filterFn: 'betweenInclusive', // default (or between)
+            muiFilterSliderProps: {
+                marks: true,
+                max: 200000, //custom max (as opposed to faceted max)
+                min: 30000, //custom min (as opposed to faceted min)
+                step: 10000,
+                valueLabelFormat: (value) => value.toLocaleString('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                }),
+            },
+        },
+        {
+            accessorKey: 'age',
+            header: 'Age',
+            filterVariant: 'range',
+            filterFn: 'between',
+            size: 80,
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+            filterVariant: 'select',
+            filterSelectOptions: citiesList, //custom options list (as opposed to faceted list)
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+            filterVariant: 'multi-select',
+            filterSelectOptions: usStateList, //custom options list (as opposed to faceted list)
+        },
+        {
+            accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
+            id: 'hireDate',
+            header: 'Hire Date',
+            filterVariant: 'date-range',
+            Cell: ({ cell }) => cell.getValue().toLocaleDateString(), // convert back to string for display
+        },
+        {
+            accessorFn: (originalRow) => new Date(originalRow.arrivalTime), //convert to date for sorting and filtering
+            id: 'arrivalTime',
+            header: 'Arrival Time',
+            filterVariant: 'datetime-range',
+            Cell: ({ cell }) => `${cell.getValue().toLocaleDateString()} ${cell
+                .getValue()
+                .toLocaleTimeString()}`, // convert back to string for display
+        },
+        {
+            accessorFn: (originalRow) => new Date(originalRow.departureTime), //convert to date for sorting and filtering
+            id: 'departureTime',
+            header: 'Departure Time',
+            filterVariant: 'time-range',
+            Cell: ({ cell }) => cell.getValue().toLocaleTimeString(), // convert back to string for display
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        initialState: { showColumnFilters: true },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+//Date Picker Imports - these should just be in your Context Provider
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+const ExampleWithLocalizationProvider = () => (
+//App.tsx or AppProviders file
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+    <Example />
+  </LocalizationProvider>);
+export default ExampleWithLocalizationProvider;

package/data/examples/customize-global-filter-component.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { MaterialReactTable } from 'material-react-table';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'id',
+            header: 'ID',
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'middleName',
+            header: 'Middle Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'age',
+            header: 'Age',
+        },
+    ], []);
+    return (<MaterialReactTable columns={columns} data={data} enableGlobalFilterModes initialState={{
+            showGlobalFilter: true,
+        }} positionGlobalFilter="left" muiSearchTextFieldProps={{
+            placeholder: `Search ${data.length} rows`,
+            sx: { minWidth: '300px' },
+            variant: 'outlined',
+        }}/>);
+};
+export default Example;

package/data/examples/customize-remove-column-grouping.js

@@ -0,0 +1,75 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, MRT_ExpandAllButton, } from 'material-react-table';
+import { data } from './makeData';
+import { Box, Stack } from '@mui/material';
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            header: 'First Name',
+            accessorKey: 'firstName',
+        },
+        {
+            header: 'Last Name',
+            accessorKey: 'lastName',
+        },
+        {
+            header: 'Age',
+            accessorKey: 'age',
+        },
+        {
+            header: 'Gender',
+            accessorKey: 'gender',
+        },
+        {
+            header: 'State',
+            accessorKey: 'state',
+        },
+        {
+            header: 'Salary',
+            accessorKey: 'salary',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        displayColumnDefOptions: {
+            'mrt-row-expand': {
+                Header: () => (<Stack direction="row" sx={{
+                        alignItems: 'center',
+                    }}>
+            <MRT_ExpandAllButton table={table}/>
+            <Box>Groups</Box>
+          </Stack>),
+                GroupedCell: ({ row, table }) => {
+                    const { grouping } = table.getState();
+                    return row.getValue(grouping[grouping.length - 1]);
+                },
+                enableResizing: true,
+                muiTableBodyCellProps: ({ row }) => ({
+                    sx: (theme) => ({
+                        color: row.depth === 0
+                            ? theme.palette.primary.main
+                            : row.depth === 1
+                                ? theme.palette.secondary.main
+                                : undefined,
+                    }),
+                }),
+                size: 200,
+            },
+        },
+        enableGrouping: true,
+        enableColumnResizing: true,
+        groupedColumnMode: 'remove',
+        initialState: {
+            density: 'compact',
+            expanded: true, //expand all groups by default
+            grouping: ['state', 'gender'], //an array of columns to group by by default (can be multiple)
+            pagination: { pageIndex: 0, pageSize: 20 },
+            sorting: [{ id: 'state', desc: false }],
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/customize-row-selection.js

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'age',
+            header: 'Age',
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableSelectAll: false,
+        enableRowSelection: (row) => row.original.age >= 21, //enable row selection conditionally per row
+        muiSelectCheckboxProps: { color: 'secondary' },
+        positionToolbarAlertBanner: 'head-overlay',
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/customize-table-styles.js

@@ -0,0 +1,81 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+import { darken, lighten, useTheme } from '@mui/material';
+const Example = () => {
+    const theme = useTheme();
+    //light or dark green
+    const baseBackgroundColor = theme.palette.mode === 'dark'
+        ? 'rgba(3, 44, 43, 1)'
+        : 'rgba(244, 255, 233, 1)';
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'id',
+            header: 'ID',
+            size: 100,
+            enableColumnFilter: false,
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'middleName',
+            header: 'Middle Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+            size: 300,
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableColumnResizing: true,
+        enableRowPinning: true,
+        enableRowSelection: true,
+        muiTablePaperProps: {
+            elevation: 0,
+            sx: {
+                borderRadius: '0',
+            },
+        },
+        muiTableBodyProps: {
+            sx: (theme) => ({
+                '& tr:nth-of-type(odd):not([data-selected="true"]):not([data-pinned="true"]) > td': {
+                    backgroundColor: darken(baseBackgroundColor, 0.1),
+                },
+                '& tr:nth-of-type(odd):not([data-selected="true"]):not([data-pinned="true"]):hover > td': {
+                    backgroundColor: darken(baseBackgroundColor, 0.2),
+                },
+                '& tr:nth-of-type(even):not([data-selected="true"]):not([data-pinned="true"]) > td': {
+                    backgroundColor: lighten(baseBackgroundColor, 0.1),
+                },
+                '& tr:nth-of-type(even):not([data-selected="true"]):not([data-pinned="true"]):hover > td': {
+                    backgroundColor: darken(baseBackgroundColor, 0.2),
+                },
+            }),
+        },
+        mrtTheme: (theme) => ({
+            baseBackgroundColor: baseBackgroundColor,
+            draggingBorderColor: theme.palette.secondary.main,
+        }),
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/disable-column-actions.js

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'id',
+            enableColumnActions: false,
+            header: 'ID',
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/disable-column-hiding.js

@@ -0,0 +1,74 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'firstName',
+            enableHiding: false,
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            enableHiding: false,
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+        },
+    ], []);
+    const data = useMemo(() => [
+        //data definitions...
+        {
+            firstName: 'Dylan',
+            lastName: 'Murray',
+            address: '261 Erdman Ford',
+            city: 'East Daphne',
+            state: 'Kentucky',
+        },
+        {
+            firstName: 'Raquel',
+            lastName: 'Kohler',
+            address: '769 Dominic Grove',
+            city: 'Columbus',
+            state: 'Ohio',
+        },
+        {
+            firstName: 'Ervin',
+            lastName: 'Reinger',
+            address: '566 Brakus Inlet',
+            city: 'South Linda',
+            state: 'West Virginia',
+        },
+        {
+            firstName: 'Brittany',
+            lastName: 'McCullough',
+            address: '722 Emie Stream',
+            city: 'Lincoln',
+            state: 'Nebraska',
+        },
+        {
+            firstName: 'Branson',
+            lastName: 'Frami',
+            address: '32188 Larkin Turnpike',
+            city: 'Charleston',
+            state: 'South Carolina',
+        },
+        //end
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        initialState: { columnVisibility: { address: false } },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/disable-density-toggle.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableDensityToggle: false,
+        initialState: { density: 'compact' },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/dynamic-columns.js

@@ -0,0 +1,124 @@
+import { lazy, Suspense, useMemo, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable,
+// type MRT_ColumnOrderState,
+ } from 'material-react-table';
+import { IconButton, Tooltip } from '@mui/material';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import { keepPreviousData, QueryClient, QueryClientProvider, useQuery, } from '@tanstack/react-query'; //note: this is TanStack React Query V5
+const columnNames = {
+    firstName: 'First Name',
+    lastName: 'Last Name',
+    address: 'Address',
+    state: 'State',
+    phoneNumber: 'Phone Number',
+    lastLogin: 'Last Login',
+};
+const Example = () => {
+    //manage our own state for stuff we want to pass to the API
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [sorting, setSorting] = useState([]);
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize: 10,
+    });
+    //if using dynamic columns that are loaded after table instance creation, we will need to manage the column order state ourselves
+    //UPDATE: No longer needed as of v2.10.0
+    // const [columnOrder, setColumnOrder] = useState<MRT_ColumnOrderState>([]);
+    //consider storing this code in a custom hook (i.e useFetchUsers)
+    const { data: { data = [], meta } = {}, //your data and api response will probably be different
+    isError, isRefetching, isLoading, refetch, } = useQuery({
+        queryKey: [
+            'users-list',
+            {
+                columnFilters, //refetch when columnFilters changes
+                globalFilter, //refetch when globalFilter changes
+                pagination, //refetch when pagination changes
+                sorting, //refetch when sorting changes
+            },
+        ],
+        queryFn: async () => {
+            const fetchURL = new URL('/api/data', location.origin); // nextjs api route
+            //read our state and pass it to the API as query params
+            fetchURL.searchParams.set('start', `${pagination.pageIndex * pagination.pageSize}`);
+            fetchURL.searchParams.set('size', `${pagination.pageSize}`);
+            fetchURL.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
+            fetchURL.searchParams.set('globalFilter', globalFilter ?? '');
+            fetchURL.searchParams.set('sorting', JSON.stringify(sorting ?? []));
+            //use whatever fetch library you want, fetch, axios, etc
+            const response = await fetch(fetchURL.href);
+            const json = (await response.json());
+            return json;
+        },
+        placeholderData: keepPreviousData, //don't go to 0 rows when refetching or paginating to next page
+    });
+    //create columns from data
+    const columns = useMemo(() => data.length
+        ? Object.keys(data[0]).map((columnId) => ({
+            header: columnNames[columnId] ?? columnId,
+            accessorKey: columnId,
+            id: columnId,
+        }))
+        : [], [data]);
+    //UPDATE: No longer needed as of v2.10.0
+    // useEffect(() => {
+    //   //if using dynamic columns that are loaded after table instance creation, we will need to set the column order state ourselves
+    //   setColumnOrder(columns.map((column) => column.id!));
+    // }, [columns]);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableRowSelection: true,
+        initialState: { showColumnFilters: true },
+        manualFiltering: true, //turn off built-in client-side filtering
+        manualPagination: true, //turn off built-in client-side pagination
+        manualSorting: true, //turn off built-in client-side sorting
+        //give loading spinner somewhere to go while loading
+        muiTableBodyProps: {
+            children: isLoading ? (<tr style={{ height: '200px' }}>
+          <td />
+        </tr>) : undefined,
+        },
+        muiToolbarAlertBannerProps: isError
+            ? {
+                color: 'error',
+                children: 'Error loading data',
+            }
+            : undefined,
+        onColumnFiltersChange: setColumnFilters,
+        // onColumnOrderChange: setColumnOrder,
+        onGlobalFilterChange: setGlobalFilter,
+        onPaginationChange: setPagination,
+        onSortingChange: setSorting,
+        renderTopToolbarCustomActions: () => (<Tooltip arrow title="Refresh Data">
+        <IconButton onClick={() => refetch()}>
+          <RefreshIcon />
+        </IconButton>
+      </Tooltip>),
+        rowCount: meta?.totalRowCount ?? 0,
+        state: {
+            columnFilters,
+            // columnOrder,
+            globalFilter,
+            isLoading,
+            pagination,
+            showAlertBanner: isError,
+            showProgressBars: isRefetching,
+            sorting,
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+//react query setup in App.tsx
+const ReactQueryDevtoolsProduction = lazy(() => import('@tanstack/react-query-devtools/build/modern/production.js').then((d) => ({
+    default: d.ReactQueryDevtools,
+})));
+const queryClient = new QueryClient();
+export default function App() {
+    return (<QueryClientProvider client={queryClient}>
+      <Example />
+      <Suspense fallback={null}>
+        <ReactQueryDevtoolsProduction />
+      </Suspense>
+    </QueryClientProvider>);
+}