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

package/data/examples/localization-i18n-uk.js

@@ -0,0 +1,38 @@
+//Import Material React Table and its Types
+import { MaterialReactTable } from 'material-react-table';
+//Import Material React Table Translations
+import { MRT_Localization_UK } from 'material-react-table/locales/uk';
+//mock data
+import { data } from './makeData';
+const columns = [
+    //column definitions...
+    {
+        accessorKey: 'firstName',
+        header: "Ім'я",
+    },
+    {
+        accessorKey: 'lastName',
+        header: 'Прізвище',
+        enableClickToCopy: true,
+    },
+    {
+        accessorKey: 'age',
+        header: 'Вік',
+    },
+    //end
+];
+const Example = () => {
+    return (<MaterialReactTable columns={columns} data={data} enableColumnFilterModes enableColumnOrdering enableEditing enableColumnPinning enableRowActions enableRowSelection enableSelectAll={false} initialState={{ showColumnFilters: true, showGlobalFilter: true }} localization={MRT_Localization_UK}/>);
+};
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { ukUA } from '@mui/material/locale';
+const ExampleWithThemeProvider = () => {
+    const theme = useTheme(); //replace with your theme/createTheme
+    return (
+    //Setting Material UI locale as best practice to result in better accessibility
+    <ThemeProvider theme={createTheme(theme, ukUA)}>
+      <Example />
+    </ThemeProvider>);
+};
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-vi.js

@@ -0,0 +1,38 @@
+//Import Material React Table and its Types
+import { MaterialReactTable } from 'material-react-table';
+//Import Material React Table Translations
+import { MRT_Localization_VI } from 'material-react-table/locales/vi';
+//mock data
+import { data } from './makeData';
+const columns = [
+    //column definitions...
+    {
+        accessorKey: 'firstName',
+        header: 'Họ của người nào',
+    },
+    {
+        accessorKey: 'lastName',
+        header: 'Tên họ',
+        enableClickToCopy: true,
+    },
+    {
+        accessorKey: 'age',
+        header: 'Tuổi tác',
+    },
+    //end
+];
+const Example = () => {
+    return (<MaterialReactTable columns={columns} data={data} enableColumnFilterModes enableColumnOrdering enableEditing enableColumnPinning enableRowActions enableRowSelection enableSelectAll={false} initialState={{ showColumnFilters: true, showGlobalFilter: true }} localization={MRT_Localization_VI}/>);
+};
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { trTR } from '@mui/material/locale';
+const ExampleWithThemeProvider = () => {
+    const theme = useTheme(); //replace with your theme/createTheme
+    return (
+    //Setting Material UI locale as best practice to result in better accessibility
+    <ThemeProvider theme={createTheme(theme, trTR)}>
+      <Example />
+    </ThemeProvider>);
+};
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-zh-hans.js

@@ -0,0 +1,38 @@
+//Import Material React Table and its Types
+import { MaterialReactTable } from 'material-react-table';
+//Import Material React Table Translations
+import { MRT_Localization_ZH_HANS } from 'material-react-table/locales/zh-Hans';
+//mock data
+import { data } from './makeData';
+const columns = [
+    //column definitions...
+    {
+        accessorKey: 'firstName',
+        header: '名',
+    },
+    {
+        accessorKey: 'lastName',
+        header: '姓',
+        enableClickToCopy: true,
+    },
+    {
+        accessorKey: 'age',
+        header: '年龄',
+    },
+    //end
+];
+const Example = () => {
+    return (<MaterialReactTable columns={columns} data={data} enableColumnFilterModes enableColumnOrdering enableEditing enableColumnPinning enableRowActions enableRowSelection enableSelectAll={false} initialState={{ showColumnFilters: true, showGlobalFilter: true }} localization={MRT_Localization_ZH_HANS}/>);
+};
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { zhCN } from '@mui/material/locale';
+const ExampleWithThemeProvider = () => {
+    const theme = useTheme(); //replace with your theme/createTheme
+    return (
+    //Setting Material UI locale as best practice to result in better accessibility
+    <ThemeProvider theme={createTheme(theme, zhCN)}>
+      <Example />
+    </ThemeProvider>);
+};
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-zh-hant.js

@@ -0,0 +1,38 @@
+//Import Material React Table and its Types
+import { MaterialReactTable } from 'material-react-table';
+//Import Material React Table Translations
+import { MRT_Localization_ZH_HANT } from 'material-react-table/locales/zh-Hant';
+//mock data
+import { data } from './makeData';
+const columns = [
+    //column definitions...
+    {
+        accessorKey: 'firstName',
+        header: '名',
+    },
+    {
+        accessorKey: 'lastName',
+        header: '姓',
+        enableClickToCopy: true,
+    },
+    {
+        accessorKey: 'age',
+        header: '年齡',
+    },
+    //end
+];
+const Example = () => {
+    return (<MaterialReactTable columns={columns} data={data} enableColumnFilterModes enableColumnOrdering enableEditing enableColumnPinning enableRowActions enableRowSelection enableSelectAll={false} initialState={{ showColumnFilters: true, showGlobalFilter: true }} localization={MRT_Localization_ZH_HANT}/>);
+};
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { zhHK } from '@mui/material/locale';
+const ExampleWithThemeProvider = () => {
+    const theme = useTheme(); //replace with your theme/createTheme
+    return (
+    //Setting Material UI locale as best practice to result in better accessibility
+    <ThemeProvider theme={createTheme(theme, zhHK)}>
+      <Example />
+    </ThemeProvider>);
+};
+export default ExampleWithThemeProvider;

package/data/examples/manual-selection.js

@@ -0,0 +1,81 @@
+import { useMemo, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+//end
+const data = [
+    //data definitions...
+    {
+        userId: '3f25309c-8fa1-470f-811e-cdb082ab9017', //we'll use this as a unique row id
+        firstName: 'Dylan',
+        lastName: 'Murray',
+        age: 22,
+        address: '261 Erdman Ford',
+        city: 'East Daphne',
+        state: 'Kentucky',
+    },
+    {
+        userId: 'be731030-df83-419c-b3d6-9ef04e7f4a9f',
+        firstName: 'Raquel',
+        lastName: 'Kohler',
+        age: 18,
+        address: '769 Dominic Grove',
+        city: 'Columbus',
+        state: 'Ohio',
+    },
+    //end
+];
+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 [rowSelection, setRowSelection] = useState({});
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        getRowId: (row) => row.userId,
+        muiTableBodyRowProps: ({ row }) => ({
+            //implement row selection click events manually
+            onClick: () => setRowSelection((prev) => {
+                //this is a simple toggle implementation
+                const next = { ...prev };
+                if (next[row.id])
+                    delete next[row.id];
+                else
+                    next[row.id] = true;
+                return next;
+            }),
+            selected: rowSelection[row.id],
+            sx: {
+                cursor: 'pointer',
+            },
+        }),
+        onRowSelectionChange: setRowSelection,
+        state: { rowSelection },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/minimal.js

@@ -0,0 +1,66 @@
+import { useMemo } from 'react';
+import { MRT_Table, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+export 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, //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/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/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;