@mini_7/material-react-table-mcp 4.0.0

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

@@ -0,0 +1,153 @@
+import { useMemo } from 'react';
+import { Box, Stack } from '@mui/material';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } 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<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        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<number>()}
+            </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<string>()}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<number>()?.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<number>()?.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;

package/data/examples/aggregation-multi.tsx

@@ -0,0 +1,105 @@
+import { useMemo } from 'react';
+import { Box } from '@mui/material';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+
+const localeStringOptions = {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+} as const;
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        header: 'First Name',
+        accessorKey: 'firstName',
+      },
+      {
+        header: 'Last Name',
+        accessorKey: 'lastName',
+      },
+      {
+        header: 'Gender',
+        accessorKey: 'gender',
+      },
+      {
+        header: 'State',
+        accessorKey: 'state',
+      },
+      {
+        header: 'Salary',
+        accessorKey: 'salary',
+        aggregationFn: ['count', 'mean', 'median', 'min', 'max'],
+        //required to render an aggregated cell, show the average salary in the group
+        AggregatedCell: ({ cell }) => (
+          <>
+            Count:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell.getValue<Array<number>>()?.[0]}
+            </Box>
+            Average:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                .getValue<Array<number>>()?.[1]
+                ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+            Median:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                .getValue<Array<number>>()?.[2]
+                ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+            Min:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                .getValue<Array<number>>()?.[3]
+                ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+            Max:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                .getValue<Array<number>>()?.[4]
+                ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+          </>
+        ),
+        //customize normal cell render on normal non-aggregated rows
+        Cell: ({ cell }) => (
+          <>
+            {cell
+              .getValue<number>()
+              ?.toLocaleString?.('en-US', localeStringOptions)}
+          </>
+        ),
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableGrouping: true,
+    enableStickyHeader: 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;

package/data/examples/alternate-column-filtering.tsx

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        accessorKey: 'id',
+        header: 'ID',
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'gender',
+        header: 'Gender',
+        filterFn: 'equals',
+        filterSelectOptions: ['Male', 'Female', 'Other'],
+        filterVariant: 'select',
+      },
+      {
+        accessorKey: 'age',
+        header: 'Age',
+        filterVariant: 'range',
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    columnFilterDisplayMode: 'popover',
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/alternate-detail-panel.tsx

@@ -0,0 +1,81 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { Box, Typography, useMediaQuery } from '@mui/material';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const isMobile = useMediaQuery('(max-width: 720px)');
+
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'id',
+        header: 'ID',
+        size: 50,
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'middleName',
+        header: 'Middle Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    // displayColumnDefOptions: { //built-in now in v2.6.0 when positionExpandColumn is 'last'
+    //   'mrt-row-expand': {
+    //     muiTableHeadCellProps: {
+    //       align: 'right',
+    //     },
+    //     muiTableBodyCellProps: {
+    //       align: 'right',
+    //     },
+    //   },
+    // },
+    enableColumnPinning: isMobile, //alternative
+    initialState: {
+      expanded: true,
+    },
+    state: {
+      columnPinning: isMobile
+        ? { end: ['mrt-row-expand'], start: [] }
+        : { end: [], start: [] }, //alternative
+    },
+    renderDetailPanel: ({ row }) => (
+      <Box
+        sx={{
+          display: 'grid',
+          margin: 'auto',
+          gridTemplateColumns: '1fr 1fr',
+          width: '100%',
+        }}
+      >
+        <Typography>Address: {row.original.address}</Typography>
+        <Typography>City: {row.original.city}</Typography>
+        <Typography>State: {row.original.state}</Typography>
+        <Typography>Country: {row.original.country}</Typography>
+      </Box>
+    ),
+    positionExpandColumn: 'last',
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;