@lminii/material-react-table-mcp 4.0.1

package/data/examples/minimal.tsx

@@ -0,0 +1,78 @@
+import { useMemo } from 'react';
+import {
+  MRT_Table, //import alternative sub-component if we do not want toolbars
+  type MRT_ColumnDef,
+  useMaterialReactTable,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+
+export const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
+    enableKeyboardShortcuts: false,
+    enableColumnActions: false,
+    enableColumnFilters: false,
+    enablePagination: false,
+    enableSorting: false,
+    mrtTheme: (theme) => ({
+      baseBackgroundColor: theme.palette.background.default, //change default background color
+    }),
+    muiTableBodyRowProps: { hover: false },
+    muiTableProps: {
+      sx: {
+        border: '1px solid rgba(81, 81, 81, .5)',
+        caption: {
+          captionSide: 'top',
+        },
+      },
+    },
+    muiTableHeadCellProps: {
+      sx: {
+        border: '1px solid rgba(81, 81, 81, .5)',
+        fontStyle: 'italic',
+        fontWeight: 'normal',
+      },
+    },
+    muiTableBodyCellProps: {
+      sx: {
+        border: '1px solid rgba(81, 81, 81, .5)',
+      },
+    },
+    renderCaption: ({ table }) =>
+      `Here is a table rendered with the lighter weight MRT_Table sub-component, rendering ${table.getRowModel().rows.length} rows.`,
+  });
+
+  //using MRT_Table instead of MaterialReactTable if we do not need any of the toolbar components or features
+  return <MRT_Table table={table} />;
+};
+
+export default Example;

package/data/examples/mui-theme.js

@@ -0,0 +1,109 @@
+import { useMemo } from 'react';
+import { MaterialReactTable } from 'material-react-table';
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+//column definitions...
+const columns = [
+    {
+        accessorKey: 'firstName',
+        header: 'First Name',
+    },
+    {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+    },
+    {
+        accessorKey: 'address',
+        header: 'Address',
+    },
+    {
+        accessorKey: 'city',
+        header: 'City',
+    },
+    {
+        accessorKey: 'state',
+        header: 'State',
+    },
+];
+//end
+//data definitions...
+const data = [
+    {
+        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 Example = () => {
+    const globalTheme = useTheme(); //(optional) if you already have a theme defined in your app root, you can import here
+    const tableTheme = useMemo(() => createTheme({
+        palette: {
+            mode: globalTheme.palette.mode, //let's use the same dark/light mode as the global theme
+            primary: globalTheme.palette.secondary, //swap in the secondary color as the primary for the table
+            info: {
+                main: 'rgb(255,122,0)', //add in a custom color for the toolbar alert background stuff
+            },
+            background: {
+                default: globalTheme.palette.mode === 'light'
+                    ? 'rgb(254,255,244)' //random light yellow color for the background in light mode
+                    : '#000', //pure black table in dark mode for fun
+            },
+        },
+        typography: {
+            button: {
+                textTransform: 'none', //customize typography styles for all buttons in table by default
+                fontSize: '1.2rem',
+            },
+        },
+        components: {
+            MuiTooltip: {
+                styleOverrides: {
+                    tooltip: {
+                        fontSize: '1.1rem', //override to make tooltip font size larger
+                    },
+                },
+            },
+            MuiSwitch: {
+                styleOverrides: {
+                    thumb: {
+                        color: 'pink', //change the color of the switch thumb in the columns show/hide menu to pink
+                    },
+                },
+            },
+        },
+    }), [globalTheme]);
+    return (<ThemeProvider theme={tableTheme}>
+      <MaterialReactTable columns={columns} data={data} enableRowSelection enableColumnOrdering enableColumnPinning/>
+    </ThemeProvider>);
+};
+export default Example;

package/data/examples/mui-theme.tsx

@@ -0,0 +1,136 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+
+type Person = {
+  firstName: string;
+  lastName: string;
+  address: string;
+  city: string;
+  state: string;
+};
+
+//column definitions...
+const columns: MRT_ColumnDef<Person>[] = [
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+  },
+  {
+    accessorKey: 'address',
+    header: 'Address',
+  },
+  {
+    accessorKey: 'city',
+    header: 'City',
+  },
+  {
+    accessorKey: 'state',
+    header: 'State',
+  },
+];
+//end
+
+//data definitions...
+const data = [
+  {
+    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 Example = () => {
+  const globalTheme = useTheme(); //(optional) if you already have a theme defined in your app root, you can import here
+
+  const tableTheme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: globalTheme.palette.mode, //let's use the same dark/light mode as the global theme
+          primary: globalTheme.palette.secondary, //swap in the secondary color as the primary for the table
+          info: {
+            main: 'rgb(255,122,0)', //add in a custom color for the toolbar alert background stuff
+          },
+          background: {
+            default:
+              globalTheme.palette.mode === 'light'
+                ? 'rgb(254,255,244)' //random light yellow color for the background in light mode
+                : '#000', //pure black table in dark mode for fun
+          },
+        },
+        typography: {
+          button: {
+            textTransform: 'none', //customize typography styles for all buttons in table by default
+            fontSize: '1.2rem',
+          },
+        },
+        components: {
+          MuiTooltip: {
+            styleOverrides: {
+              tooltip: {
+                fontSize: '1.1rem', //override to make tooltip font size larger
+              },
+            },
+          },
+          MuiSwitch: {
+            styleOverrides: {
+              thumb: {
+                color: 'pink', //change the color of the switch thumb in the columns show/hide menu to pink
+              },
+            },
+          },
+        },
+      }),
+    [globalTheme],
+  );
+
+  return (
+    <ThemeProvider theme={tableTheme}>
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        enableRowSelection
+        enableColumnOrdering
+        enableColumnPinning
+      />
+    </ThemeProvider>
+  );
+};
+
+export default Example;

package/data/examples/multi-sorting.js

@@ -0,0 +1,48 @@
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+import { Button } from '@mui/material';
+const columns = [
+    {
+        accessorKey: 'firstName',
+        header: 'First Name',
+        sortDescFirst: false, //sort first name in ascending order by default on first sort click (default for non-numeric columns)
+    },
+    //column definitions...
+    {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+    },
+    {
+        accessorKey: 'city',
+        header: 'City',
+    },
+    {
+        accessorKey: 'state',
+        header: 'State',
+    },
+    //end
+    {
+        accessorKey: 'salary',
+        header: 'Salary',
+        sortDescFirst: true, //sort salary in descending order by default on first sort click (default for numeric columns)
+    },
+];
+const Example = () => {
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        isMultiSortEvent: () => true, //now no need to hold `shift` key to multi-sort
+        maxMultiSortColCount: 3, //prevent more than 3 columns from being sorted at once
+        initialState: {
+            sorting: [
+                { id: 'state', desc: false }, //sort by state in ascending order by default
+                { id: 'city', desc: true }, //then sort by city in descending order by default
+            ],
+        },
+        renderTopToolbarCustomActions: ({ table }) => (<Button onClick={() => table.resetSorting(true)}>
+        Clear All Sorting
+      </Button>),
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/multi-sorting.tsx

@@ -0,0 +1,58 @@
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+import { Button } from '@mui/material';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+    sortDescFirst: false, //sort first name in ascending order by default on first sort click (default for non-numeric columns)
+  },
+  //column definitions...
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+  },
+  {
+    accessorKey: 'city',
+    header: 'City',
+  },
+  {
+    accessorKey: 'state',
+    header: 'State',
+  },
+  //end
+  {
+    accessorKey: 'salary',
+    header: 'Salary',
+    sortDescFirst: true, //sort salary in descending order by default on first sort click (default for numeric columns)
+  },
+];
+
+const Example = () => {
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    isMultiSortEvent: () => true, //now no need to hold `shift` key to multi-sort
+    maxMultiSortColCount: 3, //prevent more than 3 columns from being sorted at once
+    initialState: {
+      sorting: [
+        { id: 'state', desc: false }, //sort by state in ascending order by default
+        { id: 'city', desc: true }, //then sort by city in descending order by default
+      ],
+    },
+    renderTopToolbarCustomActions: ({ table }) => (
+      <Button onClick={() => table.resetSorting(true)}>
+        Clear All Sorting
+      </Button>
+    ),
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/persistent-state.js

@@ -0,0 +1,126 @@
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@mui/material';
+import { MaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+//column definitions...
+const columns = [
+    {
+        accessorKey: 'firstName',
+        header: 'First Name',
+    },
+    {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+    },
+    {
+        accessorKey: 'city',
+        header: 'City',
+    },
+    {
+        accessorKey: 'state',
+        header: 'State',
+    },
+    {
+        accessorKey: 'salary',
+        header: 'Salary',
+    },
+];
+//end
+const Example = () => {
+    const isFirstRender = useRef(true);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [columnVisibility, setColumnVisibility] = useState({});
+    const [density, setDensity] = useState('comfortable');
+    const [globalFilter, setGlobalFilter] = useState(undefined);
+    const [showGlobalFilter, setShowGlobalFilter] = useState(false);
+    const [showColumnFilters, setShowColumnFilters] = useState(false);
+    const [sorting, setSorting] = useState([]);
+    //load state from local storage
+    useEffect(() => {
+        const columnFilters = sessionStorage.getItem('mrt_columnFilters_table_1');
+        const columnVisibility = sessionStorage.getItem('mrt_columnVisibility_table_1');
+        const density = sessionStorage.getItem('mrt_density_table_1');
+        const globalFilter = sessionStorage.getItem('mrt_globalFilter_table_1');
+        const showGlobalFilter = sessionStorage.getItem('mrt_showGlobalFilter_table_1');
+        const showColumnFilters = sessionStorage.getItem('mrt_showColumnFilters_table_1');
+        const sorting = sessionStorage.getItem('mrt_sorting_table_1');
+        if (columnFilters) {
+            setColumnFilters(JSON.parse(columnFilters));
+        }
+        if (columnVisibility) {
+            setColumnVisibility(JSON.parse(columnVisibility));
+        }
+        if (density) {
+            setDensity(JSON.parse(density));
+        }
+        if (globalFilter) {
+            setGlobalFilter(JSON.parse(globalFilter) || undefined);
+        }
+        if (showGlobalFilter) {
+            setShowGlobalFilter(JSON.parse(showGlobalFilter));
+        }
+        if (showColumnFilters) {
+            setShowColumnFilters(JSON.parse(showColumnFilters));
+        }
+        if (sorting) {
+            setSorting(JSON.parse(sorting));
+        }
+        isFirstRender.current = false;
+    }, []);
+    //save states to local storage
+    useEffect(() => {
+        if (isFirstRender.current)
+            return;
+        sessionStorage.setItem('mrt_columnFilters_table_1', JSON.stringify(columnFilters));
+    }, [columnFilters]);
+    useEffect(() => {
+        if (isFirstRender.current)
+            return;
+        sessionStorage.setItem('mrt_columnVisibility_table_1', JSON.stringify(columnVisibility));
+    }, [columnVisibility]);
+    useEffect(() => {
+        if (isFirstRender.current)
+            return;
+        sessionStorage.setItem('mrt_density_table_1', JSON.stringify(density));
+    }, [density]);
+    useEffect(() => {
+        if (isFirstRender.current)
+            return;
+        sessionStorage.setItem('mrt_globalFilter_table_1', JSON.stringify(globalFilter ?? ''));
+    }, [globalFilter]);
+    useEffect(() => {
+        if (isFirstRender.current)
+            return;
+        sessionStorage.setItem('mrt_showGlobalFilter_table_1', JSON.stringify(showGlobalFilter));
+    }, [showGlobalFilter]);
+    useEffect(() => {
+        if (isFirstRender.current)
+            return;
+        sessionStorage.setItem('mrt_showColumnFilters_table_1', JSON.stringify(showColumnFilters));
+    }, [showColumnFilters]);
+    useEffect(() => {
+        if (isFirstRender.current)
+            return;
+        sessionStorage.setItem('mrt_sorting_table_1', JSON.stringify(sorting));
+    }, [sorting]);
+    const resetState = () => {
+        sessionStorage.removeItem('mrt_columnFilters_table_1');
+        sessionStorage.removeItem('mrt_columnVisibility_table_1');
+        sessionStorage.removeItem('mrt_density_table_1');
+        sessionStorage.removeItem('mrt_globalFilter_table_1');
+        sessionStorage.removeItem('mrt_showGlobalFilter_table_1');
+        sessionStorage.removeItem('mrt_showColumnFilters_table_1');
+        sessionStorage.removeItem('mrt_sorting_table_1');
+        window.location.reload();
+    };
+    return (<MaterialReactTable columns={columns} data={data} onColumnFiltersChange={setColumnFilters} onColumnVisibilityChange={setColumnVisibility} onDensityChange={setDensity} onGlobalFilterChange={setGlobalFilter} onShowColumnFiltersChange={setShowColumnFilters} onShowGlobalFilterChange={setShowGlobalFilter} onSortingChange={setSorting} state={{
+            columnFilters,
+            columnVisibility,
+            density,
+            globalFilter,
+            showColumnFilters,
+            showGlobalFilter,
+            sorting,
+        }} renderTopToolbarCustomActions={() => (<Button onClick={resetState}>Reset State</Button>)}/>);
+};
+export default Example;