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

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

@@ -0,0 +1,71 @@
+import { useEffect, useMemo, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+//end
+const data = [
+    {
+        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',
+    }, //data definitions...
+    {
+        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',
+        },
+    ], []);
+    //optionally, you can manage the row selection state yourself
+    const [rowSelection, setRowSelection] = useState({});
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableRowSelection: true,
+        getRowId: (row) => row.userId, //give each row a more useful id
+        onRowSelectionChange: setRowSelection, //connect internal row selection state to your own
+        state: { rowSelection }, //pass our managed row selection state to the table to use
+    });
+    //do something when the row selection changes...
+    useEffect(() => {
+        console.info({ rowSelection }); //read your managed row selection state
+        // console.info(table.getState().rowSelection); //alternate way to get the row selection state
+    }, [rowSelection]);
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-row-virtualization.js

@@ -0,0 +1,85 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { makeData } from './makeData';
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+            size: 150,
+        },
+        {
+            accessorKey: 'middleName',
+            header: 'Middle Name',
+            size: 150,
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+            size: 150,
+        },
+        {
+            accessorKey: 'email',
+            header: 'Email Address',
+            size: 300,
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+        },
+        {
+            accessorKey: 'zipCode',
+            header: 'Zip Code',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+        },
+        {
+            accessorKey: 'country',
+            header: 'Country',
+        },
+    ], []);
+    //optionally access the underlying virtualizer instance
+    const rowVirtualizerInstanceRef = useRef(null);
+    const [data, setData] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [sorting, setSorting] = useState([]);
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            setData(makeData(10000));
+            setIsLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        //scroll to the top of the table when the sorting changes
+        try {
+            rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }, [sorting]);
+    const table = useMaterialReactTable({
+        columns,
+        data, //10,000 rows
+        enableBottomToolbar: false,
+        enableGlobalFilterModes: true,
+        enablePagination: false,
+        enableRowNumbers: true,
+        enableRowVirtualization: true,
+        muiTableContainerProps: { sx: { maxHeight: '600px' } },
+        onSortingChange: setSorting,
+        state: { isLoading, sorting },
+        rowVirtualizerInstanceRef, //optional
+        rowVirtualizerOptions: { overscan: 5 }, //optionally customize the row virtualizer
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-sticky-header.js

@@ -0,0 +1,47 @@
+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',
+            footer: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+            footer: 'Last Name',
+        },
+        {
+            accessorKey: 'email',
+            header: 'Email',
+            footer: 'Email',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+            footer: 'City',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableBottomToolbar: false,
+        enableStickyHeader: true,
+        enableStickyFooter: true,
+        enablePagination: false,
+        muiTableContainerProps: { sx: { maxHeight: '400px' } },
+        muiTableBodyCellProps: {
+            sx: (theme) => ({
+                backgroundColor: theme.palette.mode === 'dark'
+                    ? theme.palette.grey[900]
+                    : theme.palette.grey[50],
+            }),
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/expanding-tree-expanded.js

@@ -0,0 +1,98 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+export const data = [
+    {
+        firstName: 'Dylan',
+        lastName: 'Murray',
+        address: '261 Erdman Ford',
+        city: 'East Daphne',
+        state: 'Kentucky',
+        subRows: [
+            {
+                firstName: 'Ervin',
+                lastName: 'Reinger',
+                address: '566 Brakus Inlet',
+                city: 'South Linda',
+                state: 'West Virginia',
+                subRows: [
+                    {
+                        firstName: 'Jordane',
+                        lastName: 'Homenick',
+                        address: '1234 Brakus Inlet',
+                        city: 'South Linda',
+                        state: 'West Virginia',
+                    },
+                    {
+                        firstName: 'Jordan',
+                        lastName: 'Clarkson',
+                        address: '4882 Palm Rd',
+                        city: 'San Francisco',
+                        state: 'California',
+                    },
+                ],
+            },
+            {
+                firstName: 'Brittany',
+                lastName: 'McCullough',
+                address: '722 Emie Stream',
+                city: 'Lincoln',
+                state: 'Nebraska',
+            },
+        ],
+    },
+    {
+        firstName: 'Raquel',
+        lastName: 'Kohler',
+        address: '769 Dominic Grove',
+        city: 'Columbus',
+        state: 'Ohio',
+        subRows: [
+            {
+                firstName: 'Branson',
+                lastName: 'Frami',
+                address: '32188 Larkin Turnpike',
+                city: 'Charleston',
+                state: 'South Carolina',
+            },
+        ],
+    },
+];
+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',
+            enableColumnOrdering: false,
+            header: 'State',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableExpandAll: false, //hide expand all double arrow in column header
+        enableExpanding: true,
+        filterFromLeafRows: true, //apply filtering to all rows instead of just parent rows
+        getSubRows: (row) => row.subRows, //default
+        initialState: { expanded: true }, //expand all rows by default
+        paginateExpandedRows: false, //When rows are expanded, do not count sub-rows as number of rows on the page towards pagination
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/expanding-tree-flat-parse.js

@@ -0,0 +1,102 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+//flat data that TanStack Table's getSubRows() function will parse into a tree
+export const data = [
+    {
+        id: '9s41rp',
+        firstName: 'Kelvin',
+        lastName: 'Langosh',
+        email: 'Jerod14@hotmail.com',
+        state: 'Ohio',
+        managerId: '08m6rx',
+    },
+    {
+        id: '08m6rx',
+        firstName: 'Molly',
+        lastName: 'Purdy',
+        email: 'Hugh.Dach79@hotmail.com',
+        state: 'Rhode Island',
+        managerId: '5ymtrc',
+    },
+    {
+        id: '5ymtrc',
+        firstName: 'Henry',
+        lastName: 'Lynch',
+        email: 'Camden.Macejkovic@yahoo.com',
+        state: 'California',
+        managerId: null, //top of a tree
+    },
+    {
+        id: 'ek5b97',
+        firstName: 'Glenda',
+        lastName: 'Douglas',
+        email: 'Eric0@yahoo.com',
+        state: 'Montana',
+        managerId: '08m6rx',
+    },
+    {
+        id: 'xxtydd',
+        firstName: 'Leone',
+        lastName: 'Williamson',
+        email: 'Ericka_Mueller52@yahoo.com',
+        state: 'Colorado',
+        managerId: '08m6rx',
+    },
+    {
+        id: 'wzxj9m',
+        firstName: 'Mckenna',
+        lastName: 'Friesen',
+        email: 'Veda_Feeney@yahoo.com',
+        state: 'New York',
+        managerId: null, //top of a tree
+    },
+    {
+        id: '21dwtz',
+        firstName: 'Wyman',
+        lastName: 'Jast',
+        email: 'Melvin.Pacocha@yahoo.com',
+        state: 'Montana',
+        managerId: 'wzxj9m',
+    },
+    {
+        id: 'o8oe4k',
+        firstName: 'Janick',
+        lastName: 'Willms',
+        email: 'Delfina12@gmail.com',
+        state: 'Nebraska',
+        managerId: 'wzxj9m',
+    },
+];
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'email',
+            header: 'Email',
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+        },
+    ], []);
+    //only root rows with no managerId
+    const rootData = useMemo(() => data.filter((r) => !r.managerId), [data]);
+    const table = useMaterialReactTable({
+        columns,
+        data: rootData,
+        enableExpanding: true,
+        //note: performance of this example should be improved with hash maps. This is currently 0(n^2)
+        getSubRows: (row) => data.filter((r) => r.managerId === row.id),
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/expanding-tree-root-expanded.js

@@ -0,0 +1,120 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { Button } from '@mui/material';
+//data definitions...
+export const data = [
+    {
+        id: '1',
+        firstName: 'Dylan',
+        lastName: 'Murray',
+        address: '261 Erdman Ford',
+        city: 'East Daphne',
+        state: 'Kentucky',
+        subRows: [
+            {
+                id: '2',
+                firstName: 'Ervin',
+                lastName: 'Reinger',
+                address: '566 Brakus Inlet',
+                city: 'South Linda',
+                state: 'West Virginia',
+                subRows: [
+                    {
+                        id: '3',
+                        firstName: 'Jordane',
+                        lastName: 'Homenick',
+                        address: '1234 Brakus Inlet',
+                        city: 'South Linda',
+                        state: 'West Virginia',
+                    },
+                    {
+                        id: '4',
+                        firstName: 'Jordan',
+                        lastName: 'Clarkson',
+                        address: '4882 Palm Rd',
+                        city: 'San Francisco',
+                        state: 'California',
+                    },
+                ],
+            },
+            {
+                id: '5',
+                firstName: 'Brittany',
+                lastName: 'McCullough',
+                address: '722 Emie Stream',
+                city: 'Lincoln',
+                state: 'Nebraska',
+            },
+        ],
+    },
+    {
+        id: '6',
+        firstName: 'Raquel',
+        lastName: 'Kohler',
+        address: '769 Dominic Grove',
+        city: 'Columbus',
+        state: 'Ohio',
+        subRows: [
+            {
+                id: '7',
+                firstName: 'Branson',
+                lastName: 'Frami',
+                address: '32188 Larkin Turnpike',
+                city: 'Charleston',
+                state: 'South Carolina',
+                subRows: [
+                    {
+                        id: '8',
+                        firstName: 'Henry',
+                        lastName: 'Ford',
+                        address: '1234 Brakus Inlet',
+                        city: 'Nashville',
+                        state: 'Tennessee',
+                    },
+                ],
+            },
+        ],
+    },
+];
+//end
+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',
+            enableColumnOrdering: false,
+            header: 'State',
+        },
+    ], []);
+    const initialExpandedRootRows = useMemo(() => data
+        .map((originalRow) => originalRow.id) //get all the root row ids, use recursion for additional levels
+        .reduce((a, v) => ({ ...a, [v]: true }), {}), //convert to an object with all the ids as keys and `true` as values
+    []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableExpanding: true,
+        getRowId: (originalRow) => originalRow.id,
+        initialState: { expanded: initialExpandedRootRows }, //only expand the root rows by default
+        renderTopToolbarCustomActions: ({ table }) => (<Button onClick={() => table.resetExpanded()}>Reset Expanded</Button>),
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/export-to-csv.js

@@ -0,0 +1,84 @@
+import { MaterialReactTable, useMaterialReactTable, createMRTColumnHelper, } from 'material-react-table';
+import { Box, Button } from '@mui/material';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import { mkConfig, generateCsv, download } from 'export-to-csv'; //or use your library of choice here
+import { data } from './makeData';
+const columnHelper = createMRTColumnHelper();
+const columns = [
+    columnHelper.accessor('id', {
+        header: 'ID',
+        size: 40,
+    }),
+    columnHelper.accessor('firstName', {
+        header: 'First Name',
+        size: 120,
+    }),
+    columnHelper.accessor('lastName', {
+        header: 'Last Name',
+        size: 120,
+    }),
+    columnHelper.accessor('company', {
+        header: 'Company',
+        size: 300,
+    }),
+    columnHelper.accessor('city', {
+        header: 'City',
+    }),
+    columnHelper.accessor('country', {
+        header: 'Country',
+        size: 220,
+    }),
+];
+const csvConfig = mkConfig({
+    fieldSeparator: ',',
+    decimalSeparator: '.',
+    useKeysAsHeaders: true,
+});
+const Example = () => {
+    const handleExportRows = (rows) => {
+        const rowData = rows.map((row) => row.original);
+        const csv = generateCsv(csvConfig)(rowData);
+        download(csvConfig)(csv);
+    };
+    const handleExportData = () => {
+        const csv = generateCsv(csvConfig)(data);
+        download(csvConfig)(csv);
+    };
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableRowSelection: true,
+        columnFilterDisplayMode: 'popover',
+        paginationDisplayMode: 'pages',
+        positionToolbarAlertBanner: 'bottom',
+        renderTopToolbarCustomActions: ({ table }) => (<Box sx={{
+                display: 'flex',
+                gap: '16px',
+                padding: '8px',
+                flexWrap: 'wrap',
+            }}>
+        <Button 
+        //export all data that is currently in the table (ignore pagination, sorting, filtering, etc.)
+        onClick={handleExportData} startIcon={<FileDownloadIcon />}>
+          Export All Data
+        </Button>
+        <Button disabled={table.getPrePaginatedRowModel().rows.length === 0} 
+        //export all rows, including from the next page, (still respects filtering and sorting)
+        onClick={() => handleExportRows(table.getPrePaginatedRowModel().rows)} startIcon={<FileDownloadIcon />}>
+          Export All Rows
+        </Button>
+        <Button disabled={table.getRowModel().rows.length === 0} 
+        //export all rows as seen on the screen (respects pagination, sorting, filtering, etc.)
+        onClick={() => handleExportRows(table.getRowModel().rows)} startIcon={<FileDownloadIcon />}>
+          Export Page Rows
+        </Button>
+        <Button disabled={!table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()} 
+        //only export selected rows
+        onClick={() => handleExportRows(table.getSelectedRowModel().rows)} startIcon={<FileDownloadIcon />}>
+          Export Selected Rows
+        </Button>
+      </Box>),
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/export-to-pdf.js

@@ -0,0 +1,76 @@
+import { MaterialReactTable, useMaterialReactTable, createMRTColumnHelper, } from 'material-react-table';
+import { Box, Button } from '@mui/material';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import { jsPDF } from 'jspdf'; //or use your library of choice here
+import autoTable from 'jspdf-autotable';
+import { data } from './makeData';
+const columnHelper = createMRTColumnHelper();
+const columns = [
+    columnHelper.accessor('id', {
+        header: 'ID',
+        size: 40,
+    }),
+    columnHelper.accessor('firstName', {
+        header: 'First Name',
+        size: 120,
+    }),
+    columnHelper.accessor('lastName', {
+        header: 'Last Name',
+        size: 120,
+    }),
+    columnHelper.accessor('company', {
+        header: 'Company',
+        size: 300,
+    }),
+    columnHelper.accessor('city', {
+        header: 'City',
+    }),
+    columnHelper.accessor('country', {
+        header: 'Country',
+        size: 220,
+    }),
+];
+const Example = () => {
+    const handleExportRows = (rows) => {
+        const doc = new jsPDF();
+        const tableData = rows.map((row) => Object.values(row.original));
+        const tableHeaders = columns.map((c) => c.header);
+        autoTable(doc, {
+            head: [tableHeaders],
+            body: tableData,
+        });
+        doc.save('mrt-pdf-example.pdf');
+    };
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableRowSelection: true,
+        columnFilterDisplayMode: 'popover',
+        paginationDisplayMode: 'pages',
+        positionToolbarAlertBanner: 'bottom',
+        renderTopToolbarCustomActions: ({ table }) => (<Box sx={{
+                display: 'flex',
+                gap: '16px',
+                padding: '8px',
+                flexWrap: 'wrap',
+            }}>
+        <Button disabled={table.getPrePaginatedRowModel().rows.length === 0} 
+        //export all rows, including from the next page, (still respects filtering and sorting)
+        onClick={() => handleExportRows(table.getPrePaginatedRowModel().rows)} startIcon={<FileDownloadIcon />}>
+          Export All Rows
+        </Button>
+        <Button disabled={table.getRowModel().rows.length === 0} 
+        //export all rows as seen on the screen (respects pagination, sorting, filtering, etc.)
+        onClick={() => handleExportRows(table.getRowModel().rows)} startIcon={<FileDownloadIcon />}>
+          Export Page Rows
+        </Button>
+        <Button disabled={!table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()} 
+        //only export selected rows
+        onClick={() => handleExportRows(table.getSelectedRowModel().rows)} startIcon={<FileDownloadIcon />}>
+          Export Selected Rows
+        </Button>
+      </Box>),
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;