@lminii/material-react-table-mcp 4.0.1

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-flat-parse.tsx

@@ -0,0 +1,125 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+
+export type Employee = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  state: string;
+  managerId: string | null;
+};
+
+//flat data that TanStack Table's getSubRows() function will parse into a tree
+export const data: Employee[] = [
+  {
+    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<MRT_ColumnDef<Employee>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+
+      {
+        accessorKey: 'email',
+        header: 'Email',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+    ],
+    [],
+    //end
+  );
+
+  //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/expanding-tree-root-expanded.tsx

@@ -0,0 +1,151 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  type MRT_ExpandedState,
+  type MRT_ColumnDef,
+  useMaterialReactTable,
+} from 'material-react-table';
+import { Button } from '@mui/material';
+
+export type Person = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  address: string;
+  city: string;
+  state: string;
+  subRows?: Person[]; //Each person can have sub rows of more people
+};
+
+//data definitions...
+export const data: Person[] = [
+  {
+    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<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',
+        enableColumnOrdering: false,
+        header: 'State',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const initialExpandedRootRows = useMemo<MRT_ExpandedState>(
+    () =>
+      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-csv.tsx

@@ -0,0 +1,114 @@
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_Row,
+  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, type Person } from './makeData';
+
+const columnHelper = createMRTColumnHelper<Person>();
+
+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: MRT_Row<Person>[]) => {
+    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;