@mini_7/material-react-table-mcp 4.0.0

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.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.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;

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

@@ -0,0 +1,104 @@
+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 { jsPDF } from 'jspdf'; //or use your library of choice here
+import autoTable from 'jspdf-autotable';
+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 Example = () => {
+  const handleExportRows = (rows: MRT_Row<Person>[]) => {
+    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;

package/data/examples/external-toolbar.tsx

@@ -0,0 +1,108 @@
+import {
+  MRT_GlobalFilterTextField,
+  MRT_ShowHideColumnsButton,
+  MRT_TablePagination,
+  MRT_ToggleDensePaddingButton,
+  MRT_ToggleFiltersButton,
+  MRT_ToolbarAlertBanner,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  MRT_TableContainer,
+} from 'material-react-table';
+import { IconButton, Box, Button, Typography, Tooltip } from '@mui/material';
+import PrintIcon from '@mui/icons-material/Print';
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+  },
+  {
+    accessorKey: 'age',
+    header: 'Age',
+  },
+  {
+    accessorKey: 'salary',
+    header: 'Salary',
+  },
+];
+
+const Example = () => {
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableRowSelection: true,
+    initialState: { showGlobalFilter: true },
+  });
+
+  return (
+    <Box sx={{ border: 'gray 2px dashed', padding: '16px' }}>
+      {/* Our Custom External Top Toolbar */}
+      <Box
+        sx={(theme) => ({
+          display: 'flex',
+          backgroundColor: 'inherit',
+          borderRadius: '4px',
+          flexDirection: 'row',
+          gap: '16px',
+          justifyContent: 'space-between',
+          padding: '24px 16px',
+          '@media max-width: 768px': {
+            flexDirection: 'column',
+          },
+        })}
+      >
+        <Box>
+          <Button
+            color="primary"
+            onClick={() => {
+              alert('Add User');
+            }}
+            variant="contained"
+          >
+            Create New Account
+          </Button>
+        </Box>
+        <MRT_GlobalFilterTextField table={table} />
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <MRT_ToggleFiltersButton table={table} />
+          <MRT_ShowHideColumnsButton table={table} />
+          <MRT_ToggleDensePaddingButton table={table} />
+          <Tooltip title="Print">
+            <IconButton onClick={() => window.print()}>
+              <PrintIcon />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      </Box>
+      {/* Some Page Content */}
+      <Typography
+        sx={{
+          p: '16px 4px',
+        }}
+      >
+        {
+          "Hey I'm some page content. I'm just one of your normal components between your custom toolbar and the MRT Table below"
+        }
+      </Typography>
+      {/* The MRT Table with no toolbars built-in */}
+      <MRT_TableContainer table={table} />
+      {/* Our Custom Bottom Toolbar */}
+      <Box>
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <MRT_TablePagination table={table} />
+        </Box>
+        <Box sx={{ display: 'grid', width: '100%' }}>
+          <MRT_ToolbarAlertBanner stackAlertBanner table={table} />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default Example;

package/data/examples/font-awesome-icons.tsx

@@ -0,0 +1,106 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_Icons,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faArrowDownWideShort,
+  faBars,
+  faBarsStaggered,
+  faColumns,
+  faCompress,
+  faEllipsisH,
+  faEllipsisVertical,
+  faExpand,
+  faEyeSlash,
+  faFilter,
+  faFilterCircleXmark,
+  faGripLines,
+  faSearch,
+  faSearchMinus,
+  faSortDown,
+  faThumbTack,
+} from '@fortawesome/free-solid-svg-icons';
+import '@fortawesome/fontawesome-svg-core/styles.css';
+import { config } from '@fortawesome/fontawesome-svg-core';
+config.autoAddCss = false;
+
+/**
+ * These are just some of the icons visible in this table's feature set.
+ * If you skip customizing some icons, those particular icons will fallback the the default Material UI icons.
+ */
+const fontAwesomeIcons: Partial<MRT_Icons> = {
+  ArrowDownwardIcon: (props: any) => (
+    <FontAwesomeIcon icon={faSortDown} {...props} />
+  ),
+  ClearAllIcon: () => <FontAwesomeIcon icon={faBarsStaggered} />,
+  DensityLargeIcon: () => <FontAwesomeIcon icon={faGripLines} />,
+  DensityMediumIcon: () => <FontAwesomeIcon icon={faBars} />,
+  DensitySmallIcon: () => <FontAwesomeIcon icon={faBars} />,
+  DragHandleIcon: () => <FontAwesomeIcon icon={faGripLines} />,
+  FilterListIcon: (props: any) => (
+    <FontAwesomeIcon icon={faFilter} {...props} />
+  ),
+  FilterListOffIcon: () => <FontAwesomeIcon icon={faFilterCircleXmark} />,
+  FullscreenExitIcon: () => <FontAwesomeIcon icon={faCompress} />,
+  FullscreenIcon: () => <FontAwesomeIcon icon={faExpand} />,
+  SearchIcon: (props: any) => <FontAwesomeIcon icon={faSearch} {...props} />,
+  SearchOffIcon: () => <FontAwesomeIcon icon={faSearchMinus} />,
+  ViewColumnIcon: () => <FontAwesomeIcon icon={faColumns} />,
+  MoreVertIcon: () => <FontAwesomeIcon icon={faEllipsisVertical} />,
+  MoreHorizIcon: () => <FontAwesomeIcon icon={faEllipsisH} />,
+  SortIcon: (props: any) => (
+    <FontAwesomeIcon icon={faArrowDownWideShort} {...props} /> //props so that style rotation transforms are applied
+  ),
+  PushPinIcon: (props: any) => (
+    <FontAwesomeIcon icon={faThumbTack} {...props} /> //props so that style rotation transforms are applied
+  ),
+  VisibilityOffIcon: () => <FontAwesomeIcon icon={faEyeSlash} />,
+};
+
+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',
+        },
+      ] as MRT_ColumnDef<Person>[],
+    [], //end
+  );
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableColumnOrdering
+      enableColumnPinning
+      icons={fontAwesomeIcons}
+    />
+  );
+};
+
+export default Example;