@lminii/material-react-table-mcp 4.0.1

package/data/examples/advanced.js

@@ -0,0 +1,215 @@
+import { useMemo } from 'react';
+//MRT Imports
+import { MaterialReactTable, useMaterialReactTable, MRT_GlobalFilterTextField, MRT_ToggleFiltersButton, } from 'material-react-table';
+//Material UI Imports
+import { Box, Button, ListItemIcon, MenuItem, Typography, lighten, } from '@mui/material';
+//Icons Imports
+import { AccountCircle, Send } from '@mui/icons-material';
+//Mock Data
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            id: 'employee', //id used to define `group` column
+            header: 'Employee',
+            columns: [
+                {
+                    accessorFn: (row) => `${row.firstName} ${row.lastName}`, //accessorFn used to join multiple data into a single cell
+                    id: 'name', //id is still required when using accessorFn instead of accessorKey
+                    header: 'Name',
+                    size: 250,
+                    Cell: ({ renderedCellValue, row }) => (<Box sx={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '1rem',
+                        }}>
+                <img alt="avatar" height={30} src={row.original.avatar} loading="lazy" style={{ borderRadius: '50%' }}/>
+                {/* using renderedCellValue instead of cell.getValue() preserves filter match highlighting */}
+                <span>{renderedCellValue}</span>
+              </Box>),
+                },
+                {
+                    accessorKey: 'email', //accessorKey used to define `data` column. `id` gets set to accessorKey automatically
+                    enableClickToCopy: true,
+                    filterVariant: 'autocomplete',
+                    header: 'Email',
+                    size: 300,
+                },
+            ],
+        },
+        {
+            id: 'id',
+            header: 'Job Info',
+            columns: [
+                {
+                    accessorKey: 'salary',
+                    // filterVariant: 'range', //if not using filter modes feature, use this instead of filterFn
+                    filterFn: 'between',
+                    header: 'Salary',
+                    size: 200,
+                    //custom conditional format and styling
+                    Cell: ({ cell }) => (<Box component="span" sx={(theme) => ({
+                            backgroundColor: cell.getValue() < 50000
+                                ? theme.palette.error.dark
+                                : cell.getValue() >= 50000 &&
+                                    cell.getValue() < 75000
+                                    ? theme.palette.warning.dark
+                                    : theme.palette.success.dark,
+                            borderRadius: '0.25rem',
+                            color: '#fff',
+                            maxWidth: '9ch',
+                            p: '0.25rem',
+                        })}>
+                {cell.getValue()?.toLocaleString?.('en-US', {
+                            style: 'currency',
+                            currency: 'USD',
+                            minimumFractionDigits: 0,
+                            maximumFractionDigits: 0,
+                        })}
+              </Box>),
+                },
+                {
+                    accessorKey: 'jobTitle', //hey a simple column for once
+                    header: 'Job Title',
+                    size: 350,
+                },
+                {
+                    accessorFn: (row) => new Date(row.startDate), //convert to Date for sorting and filtering
+                    id: 'startDate',
+                    header: 'Start Date',
+                    filterVariant: 'date',
+                    filterFn: 'lessThan',
+                    sortFn: 'datetime',
+                    Cell: ({ cell }) => cell.getValue()?.toLocaleDateString(), //render Date as a string
+                    Header: ({ column }) => <em>{column.columnDef.header}</em>, //custom header markup
+                    muiFilterTextFieldProps: {
+                        sx: {
+                            minWidth: '250px',
+                        },
+                    },
+                },
+            ],
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
+        enableColumnFilterModes: true,
+        enableColumnOrdering: true,
+        enableGrouping: true,
+        enableColumnPinning: true,
+        enableFacetedValues: true,
+        enableRowActions: true,
+        enableRowSelection: true,
+        initialState: {
+            showColumnFilters: true,
+            showGlobalFilter: true,
+            columnPinning: {
+                end: ['mrt-row-actions'],
+                start: ['mrt-row-expand', 'mrt-row-select'],
+            },
+        },
+        paginationDisplayMode: 'pages',
+        positionToolbarAlertBanner: 'bottom',
+        muiSearchTextFieldProps: {
+            size: 'small',
+            variant: 'outlined',
+        },
+        muiPaginationProps: {
+            color: 'secondary',
+            rowsPerPageOptions: [10, 20, 30],
+            shape: 'rounded',
+            variant: 'outlined',
+        },
+        renderDetailPanel: ({ row }) => (<Box sx={{
+                alignItems: 'center',
+                display: 'flex',
+                justifyContent: 'space-around',
+                left: '30px',
+                maxWidth: '1000px',
+                position: 'sticky',
+                width: '100%',
+            }}>
+        <img alt="avatar" height={200} src={row.original.avatar} loading="lazy" style={{ borderRadius: '50%' }}/>
+        <Box sx={{ textAlign: 'center' }}>
+          <Typography variant="h4">Signature Catch Phrase:</Typography>
+          <Typography variant="h1">
+            &quot;{row.original.signatureCatchPhrase}&quot;
+          </Typography>
+        </Box>
+      </Box>),
+        renderRowActionMenuItems: ({ closeMenu }) => [
+            <MenuItem key={0} onClick={() => {
+                    // View profile logic...
+                    closeMenu();
+                }} sx={{ m: 0 }}>
+        <ListItemIcon>
+          <AccountCircle />
+        </ListItemIcon>
+        View Profile
+      </MenuItem>,
+            <MenuItem key={1} onClick={() => {
+                    // Send email logic...
+                    closeMenu();
+                }} sx={{ m: 0 }}>
+        <ListItemIcon>
+          <Send />
+        </ListItemIcon>
+        Send Email
+      </MenuItem>,
+        ],
+        renderTopToolbar: ({ table }) => {
+            const handleDeactivate = () => {
+                table.getSelectedRowModel().flatRows.map((row) => {
+                    alert('deactivating ' + row.getValue('name'));
+                });
+            };
+            const handleActivate = () => {
+                table.getSelectedRowModel().flatRows.map((row) => {
+                    alert('activating ' + row.getValue('name'));
+                });
+            };
+            const handleContact = () => {
+                table.getSelectedRowModel().flatRows.map((row) => {
+                    alert('contact ' + row.getValue('name'));
+                });
+            };
+            return (<Box sx={(theme) => ({
+                    backgroundColor: lighten(theme.palette.background.default, 0.05),
+                    display: 'flex',
+                    gap: '0.5rem',
+                    p: '8px',
+                    justifyContent: 'space-between',
+                })}>
+          <Box sx={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+            {/* import MRT sub-components */}
+            <MRT_GlobalFilterTextField table={table}/>
+            <MRT_ToggleFiltersButton table={table}/>
+          </Box>
+          <Box>
+            <Box sx={{ display: 'flex', gap: '0.5rem' }}>
+              <Button color="error" disabled={!table.getIsSomeRowsSelected()} onClick={handleDeactivate} variant="contained">
+                Deactivate
+              </Button>
+              <Button color="success" disabled={!table.getIsSomeRowsSelected()} onClick={handleActivate} variant="contained">
+                Activate
+              </Button>
+              <Button color="info" disabled={!table.getIsSomeRowsSelected()} onClick={handleContact} variant="contained">
+                Contact
+              </Button>
+            </Box>
+          </Box>
+        </Box>);
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+//Date Picker Imports - these should just be in your Context Provider
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+const ExampleWithLocalizationProvider = () => (
+//App.tsx or AppProviders file
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+    <Example />
+  </LocalizationProvider>);
+export default ExampleWithLocalizationProvider;

package/data/examples/advanced.tsx

@@ -0,0 +1,309 @@
+import { useMemo } from 'react';
+
+//MRT Imports
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  MRT_GlobalFilterTextField,
+  MRT_ToggleFiltersButton,
+} from 'material-react-table';
+
+//Material UI Imports
+import {
+  Box,
+  Button,
+  ListItemIcon,
+  MenuItem,
+  Typography,
+  lighten,
+} from '@mui/material';
+
+//Icons Imports
+import { AccountCircle, Send } from '@mui/icons-material';
+
+//Mock Data
+import { data } from './makeData';
+
+export type Employee = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  jobTitle: string;
+  salary: number;
+  startDate: string;
+  signatureCatchPhrase: string;
+  avatar: string;
+};
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Employee>[]>(
+    () => [
+      {
+        id: 'employee', //id used to define `group` column
+        header: 'Employee',
+        columns: [
+          {
+            accessorFn: (row) => `${row.firstName} ${row.lastName}`, //accessorFn used to join multiple data into a single cell
+            id: 'name', //id is still required when using accessorFn instead of accessorKey
+            header: 'Name',
+            size: 250,
+            Cell: ({ renderedCellValue, row }) => (
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '1rem',
+                }}
+              >
+                <img
+                  alt="avatar"
+                  height={30}
+                  src={row.original.avatar}
+                  loading="lazy"
+                  style={{ borderRadius: '50%' }}
+                />
+                {/* using renderedCellValue instead of cell.getValue() preserves filter match highlighting */}
+                <span>{renderedCellValue}</span>
+              </Box>
+            ),
+          },
+          {
+            accessorKey: 'email', //accessorKey used to define `data` column. `id` gets set to accessorKey automatically
+            enableClickToCopy: true,
+            filterVariant: 'autocomplete',
+            header: 'Email',
+            size: 300,
+          },
+        ],
+      },
+      {
+        id: 'id',
+        header: 'Job Info',
+        columns: [
+          {
+            accessorKey: 'salary',
+            // filterVariant: 'range', //if not using filter modes feature, use this instead of filterFn
+            filterFn: 'between',
+            header: 'Salary',
+            size: 200,
+            //custom conditional format and styling
+            Cell: ({ cell }) => (
+              <Box
+                component="span"
+                sx={(theme) => ({
+                  backgroundColor:
+                    cell.getValue<number>() < 50_000
+                      ? theme.palette.error.dark
+                      : cell.getValue<number>() >= 50_000 &&
+                          cell.getValue<number>() < 75_000
+                        ? theme.palette.warning.dark
+                        : theme.palette.success.dark,
+                  borderRadius: '0.25rem',
+                  color: '#fff',
+                  maxWidth: '9ch',
+                  p: '0.25rem',
+                })}
+              >
+                {cell.getValue<number>()?.toLocaleString?.('en-US', {
+                  style: 'currency',
+                  currency: 'USD',
+                  minimumFractionDigits: 0,
+                  maximumFractionDigits: 0,
+                })}
+              </Box>
+            ),
+          },
+          {
+            accessorKey: 'jobTitle', //hey a simple column for once
+            header: 'Job Title',
+            size: 350,
+          },
+          {
+            accessorFn: (row) => new Date(row.startDate), //convert to Date for sorting and filtering
+            id: 'startDate',
+            header: 'Start Date',
+            filterVariant: 'date',
+            filterFn: 'lessThan',
+            sortFn: 'datetime',
+            Cell: ({ cell }) => cell.getValue<Date>()?.toLocaleDateString(), //render Date as a string
+            Header: ({ column }) => <em>{column.columnDef.header}</em>, //custom header markup
+            muiFilterTextFieldProps: {
+              sx: {
+                minWidth: '250px',
+              },
+            },
+          },
+        ],
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
+    enableColumnFilterModes: true,
+    enableColumnOrdering: true,
+    enableGrouping: true,
+    enableColumnPinning: true,
+    enableFacetedValues: true,
+    enableRowActions: true,
+    enableRowSelection: true,
+    initialState: {
+      showColumnFilters: true,
+      showGlobalFilter: true,
+      columnPinning: {
+        end: ['mrt-row-actions'],
+        start: ['mrt-row-expand', 'mrt-row-select'],
+      },
+    },
+    paginationDisplayMode: 'pages',
+    positionToolbarAlertBanner: 'bottom',
+    muiSearchTextFieldProps: {
+      size: 'small',
+      variant: 'outlined',
+    },
+    muiPaginationProps: {
+      color: 'secondary',
+      rowsPerPageOptions: [10, 20, 30],
+      shape: 'rounded',
+      variant: 'outlined',
+    },
+    renderDetailPanel: ({ row }) => (
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+          justifyContent: 'space-around',
+          left: '30px',
+          maxWidth: '1000px',
+          position: 'sticky',
+          width: '100%',
+        }}
+      >
+        <img
+          alt="avatar"
+          height={200}
+          src={row.original.avatar}
+          loading="lazy"
+          style={{ borderRadius: '50%' }}
+        />
+        <Box sx={{ textAlign: 'center' }}>
+          <Typography variant="h4">Signature Catch Phrase:</Typography>
+          <Typography variant="h1">
+            &quot;{row.original.signatureCatchPhrase}&quot;
+          </Typography>
+        </Box>
+      </Box>
+    ),
+    renderRowActionMenuItems: ({ closeMenu }) => [
+      <MenuItem
+        key={0}
+        onClick={() => {
+          // View profile logic...
+          closeMenu();
+        }}
+        sx={{ m: 0 }}
+      >
+        <ListItemIcon>
+          <AccountCircle />
+        </ListItemIcon>
+        View Profile
+      </MenuItem>,
+      <MenuItem
+        key={1}
+        onClick={() => {
+          // Send email logic...
+          closeMenu();
+        }}
+        sx={{ m: 0 }}
+      >
+        <ListItemIcon>
+          <Send />
+        </ListItemIcon>
+        Send Email
+      </MenuItem>,
+    ],
+    renderTopToolbar: ({ table }) => {
+      const handleDeactivate = () => {
+        table.getSelectedRowModel().flatRows.map((row) => {
+          alert('deactivating ' + row.getValue('name'));
+        });
+      };
+
+      const handleActivate = () => {
+        table.getSelectedRowModel().flatRows.map((row) => {
+          alert('activating ' + row.getValue('name'));
+        });
+      };
+
+      const handleContact = () => {
+        table.getSelectedRowModel().flatRows.map((row) => {
+          alert('contact ' + row.getValue('name'));
+        });
+      };
+
+      return (
+        <Box
+          sx={(theme) => ({
+            backgroundColor: lighten(theme.palette.background.default, 0.05),
+            display: 'flex',
+            gap: '0.5rem',
+            p: '8px',
+            justifyContent: 'space-between',
+          })}
+        >
+          <Box sx={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+            {/* import MRT sub-components */}
+            <MRT_GlobalFilterTextField table={table} />
+            <MRT_ToggleFiltersButton table={table} />
+          </Box>
+          <Box>
+            <Box sx={{ display: 'flex', gap: '0.5rem' }}>
+              <Button
+                color="error"
+                disabled={!table.getIsSomeRowsSelected()}
+                onClick={handleDeactivate}
+                variant="contained"
+              >
+                Deactivate
+              </Button>
+              <Button
+                color="success"
+                disabled={!table.getIsSomeRowsSelected()}
+                onClick={handleActivate}
+                variant="contained"
+              >
+                Activate
+              </Button>
+              <Button
+                color="info"
+                disabled={!table.getIsSomeRowsSelected()}
+                onClick={handleContact}
+                variant="contained"
+              >
+                Contact
+              </Button>
+            </Box>
+          </Box>
+        </Box>
+      );
+    },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+//Date Picker Imports - these should just be in your Context Provider
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+
+const ExampleWithLocalizationProvider = () => (
+  //App.tsx or AppProviders file
+  <LocalizationProvider dateAdapter={AdapterDayjs}>
+    <Example />
+  </LocalizationProvider>
+);
+
+export default ExampleWithLocalizationProvider;

package/data/examples/aggregation-and-grouping.js

@@ -0,0 +1,116 @@
+import { useMemo } from 'react';
+import { Box, Stack } from '@mui/material';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+const Example = () => {
+    const averageSalary = useMemo(() => data.reduce((acc, curr) => acc + curr.salary, 0) / data.length, []);
+    const maxAge = useMemo(() => data.reduce((acc, curr) => Math.max(acc, curr.age), 0), []);
+    const columns = useMemo(() => [
+        {
+            header: 'First Name',
+            accessorKey: 'firstName',
+            enableGrouping: false, //do not let this column be grouped
+        },
+        {
+            header: 'Last Name',
+            accessorKey: 'lastName',
+        },
+        {
+            header: 'Age',
+            accessorKey: 'age',
+            aggregationFn: 'max', //show the max age in the group (lots of pre-built aggregationFns to choose from)
+            //required to render an aggregated cell
+            AggregatedCell: ({ cell, table }) => (<>
+            Oldest by{' '}
+            {table.getColumn(cell.row.groupingColumnId ?? '').columnDef.header}:{' '}
+            <Box sx={{ color: 'info.main', display: 'inline', fontWeight: 'bold' }}>
+              {cell.getValue()}
+            </Box>
+          </>),
+            Footer: () => (<Stack>
+            Max Age:
+            <Box sx={{
+                    color: 'warning.main',
+                }}>
+              {Math.round(maxAge)}
+            </Box>
+          </Stack>),
+        },
+        {
+            header: 'Gender',
+            accessorKey: 'gender',
+            //optionally, customize the cell render when this column is grouped. Make the text blue and pluralize the word
+            GroupedCell: ({ cell, row }) => (<Box sx={{ color: 'primary.main' }}>
+            <strong>{cell.getValue()}s </strong> ({row.subRows?.length})
+          </Box>),
+        },
+        {
+            header: 'State',
+            accessorKey: 'state',
+        },
+        {
+            header: 'Salary',
+            accessorKey: 'salary',
+            aggregationFn: 'mean',
+            //required to render an aggregated cell, show the average salary in the group
+            AggregatedCell: ({ cell, table }) => (<>
+            Average by{' '}
+            {table.getColumn(cell.row.groupingColumnId ?? '').columnDef.header}:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell.getValue()?.toLocaleString?.('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 0,
+                })}
+            </Box>
+          </>),
+            //customize normal cell render on normal non-aggregated rows
+            Cell: ({ cell }) => (<>
+            {cell.getValue()?.toLocaleString?.('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 0,
+                })}
+          </>),
+            Footer: () => (<Stack>
+            Average Salary:
+            <Box sx={{
+                    color: 'warning.main',
+                }}>
+              {averageSalary?.toLocaleString?.('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 0,
+                })}
+            </Box>
+          </Stack>),
+        },
+    ], [averageSalary, maxAge]);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        displayColumnDefOptions: {
+            'mrt-row-expand': {
+                enableResizing: true,
+            },
+        },
+        enableColumnResizing: true,
+        enableGrouping: true,
+        enableStickyHeader: true,
+        enableStickyFooter: true,
+        initialState: {
+            density: 'compact',
+            expanded: true, //expand all groups by default
+            grouping: ['state'], //an array of columns to group by by default (can be multiple)
+            pagination: { pageIndex: 0, pageSize: 20 },
+            sorting: [{ id: 'state', desc: false }], //sort by state by default
+        },
+        muiToolbarAlertBannerChipProps: { color: 'primary' },
+        muiTableContainerProps: { sx: { maxHeight: 700 } },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;