@mini_7/material-react-table-mcp 4.0.0

package/data/examples/alternate-pagination.tsx

@@ -0,0 +1,23 @@
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+} from 'material-react-table';
+import { columns, data } from './makeData';
+
+const Example = () => {
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    muiPaginationProps: {
+      color: 'primary',
+      shape: 'rounded',
+      showRowsPerPage: false,
+      variant: 'outlined',
+    },
+    paginationDisplayMode: 'pages',
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/basic.tsx

@@ -0,0 +1,109 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+
+//example data type
+type Person = {
+  name: {
+    firstName: string;
+    lastName: string;
+  };
+  address: string;
+  city: string;
+  state: string;
+};
+
+//nested data is ok, see accessorKeys in ColumnDef below
+const data: Person[] = [
+  {
+    name: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+    address: '261 Erdman Ford',
+    city: 'East Daphne',
+    state: 'Kentucky',
+  },
+  {
+    name: {
+      firstName: 'Jane',
+      lastName: 'Doe',
+    },
+    address: '769 Dominic Grove',
+    city: 'Columbus',
+    state: 'Ohio',
+  },
+  {
+    name: {
+      firstName: 'Joe',
+      lastName: 'Doe',
+    },
+    address: '566 Brakus Inlet',
+    city: 'South Linda',
+    state: 'West Virginia',
+  },
+  {
+    name: {
+      firstName: 'Kevin',
+      lastName: 'Vandy',
+    },
+    address: '722 Emie Stream',
+    city: 'Lincoln',
+    state: 'Nebraska',
+  },
+  {
+    name: {
+      firstName: 'Joshua',
+      lastName: 'Rolluffs',
+    },
+    address: '32188 Larkin Turnpike',
+    city: 'Omaha',
+    state: 'Nebraska',
+  },
+];
+
+const Example = () => {
+  //should be memoized or stable
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        accessorKey: 'name.firstName', //access nested data with dot notation
+        header: 'First Name',
+        size: 150,
+      },
+      {
+        accessorKey: 'name.lastName',
+        header: 'Last Name',
+        size: 150,
+      },
+      {
+        accessorKey: 'address', //normal accessorKey
+        header: 'Address',
+        size: 200,
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+        size: 150,
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+        size: 150,
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

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

@@ -0,0 +1,89 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { useTheme } from '@mui/material/styles';
+import { LineChart } from '@mui/x-charts/LineChart';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const theme = useTheme();
+
+  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,
+    initialState: { expanded: { 0: true } },
+    muiTableBodyRowProps: {
+      sx: {
+        '.Mui-TableBodyCell-DetailPanel': {
+          backgroundColor:
+            theme.palette.mode === 'dark'
+              ? theme.palette.grey[900]
+              : theme.palette.grey[100],
+        },
+      },
+    },
+    renderDetailPanel: ({ row }) => (
+      <LineChart
+        xAxis={[
+          {
+            data: row.original.gamesPlayed,
+            label: 'Games Played',
+            valueFormatter: (value) => `#${value}`,
+            tickLabelInterval: (value) => value % 1 === 0,
+          },
+        ]}
+        yAxis={[{ min: 0, max: 60 }]}
+        series={[
+          {
+            color: theme.palette.primary.dark,
+            data: row.original.points,
+            label: 'Points',
+          },
+          {
+            color: theme.palette.secondary.main,
+            data: row.original.assists,
+            label: 'Assists',
+          },
+          {
+            color: theme.palette.error.main,
+            data: row.original.turnovers,
+            label: 'Turnovers',
+          },
+        ]}
+        height={250}
+      />
+    ),
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/column-actions-space.tsx

@@ -0,0 +1,44 @@
+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>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'id',
+        header: 'ID',
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+    ],
+    [], //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    muiTableHeadCellProps: {
+      sx: {
+        '& .Mui-TableHeadCell-Content': {
+          justifyContent: 'space-between',
+        },
+      },
+    },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/column-alignment.tsx

@@ -0,0 +1,70 @@
+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: 'firstName',
+        header: 'First Name',
+        size: 100,
+        muiTableHeadCellProps: {
+          align: 'center',
+        },
+        muiTableBodyCellProps: {
+          align: 'center',
+        },
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+        size: 100,
+        muiTableHeadCellProps: {
+          align: 'center',
+        },
+        muiTableBodyCellProps: {
+          align: 'center',
+        },
+      },
+      {
+        accessorKey: 'age',
+        header: 'Age',
+        muiTableHeadCellProps: {
+          align: 'right',
+        },
+        muiTableBodyCellProps: {
+          align: 'right',
+        },
+      },
+      {
+        accessorKey: 'salary',
+        header: 'Salary',
+        muiTableHeadCellProps: {
+          align: 'right',
+        },
+        muiTableBodyCellProps: {
+          align: 'right',
+        },
+        Cell: ({ cell }) =>
+          cell
+            .getValue<number>()
+            .toLocaleString('en-US', { style: 'currency', currency: 'USD' }),
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/custom-column-actions.tsx

@@ -0,0 +1,109 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { Divider, MenuItem } from '@mui/material';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        accessorKey: 'id',
+        header: 'ID',
+        renderColumnActionsMenuItems: ({ closeMenu }) => [
+          <MenuItem
+            key={1}
+            onClick={() => {
+              console.log('Item 1 clicked');
+              closeMenu();
+            }}
+          >
+            Item 1
+          </MenuItem>,
+          <MenuItem
+            key={2}
+            onClick={() => {
+              console.log('Item 2 clicked');
+              closeMenu();
+            }}
+          >
+            Item 2
+          </MenuItem>,
+        ],
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+        renderColumnActionsMenuItems: ({
+          closeMenu,
+          internalColumnMenuItems,
+        }) => [
+          ...internalColumnMenuItems,
+          <Divider key="divider-1" />,
+          <MenuItem
+            key={'item-1'}
+            onClick={() => {
+              console.log('Item 1 clicked');
+              closeMenu();
+            }}
+          >
+            Item 1
+          </MenuItem>,
+          <MenuItem
+            key={'item-2'}
+            onClick={() => {
+              console.log('Item 2 clicked');
+              closeMenu();
+            }}
+          >
+            Item 2
+          </MenuItem>,
+        ],
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+        renderColumnActionsMenuItems: ({
+          closeMenu,
+          internalColumnMenuItems,
+        }) => [
+          <MenuItem
+            key={'item-1'}
+            onClick={() => {
+              console.log('Item 1 clicked');
+              closeMenu();
+            }}
+          >
+            Item 1
+          </MenuItem>,
+          <MenuItem
+            key={'item-2'}
+            onClick={() => {
+              console.log('Item 2 clicked');
+              closeMenu();
+            }}
+          >
+            Item 2
+          </MenuItem>,
+          <Divider key="divider-1" />,
+          ...internalColumnMenuItems.splice(0, 3),
+        ],
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    //or you could define the menu items here for all columns
+    // renderColumnActionsMenuItems: ({ closeMenu }) => [],
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/custom-column-filtering-ui.tsx

@@ -0,0 +1,89 @@
+import { useMemo } from 'react';
+import {
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  MRT_TableContainer,
+  MRT_TableHeadCellFilterContainer,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+import { Paper, Stack, useMediaQuery } from '@mui/material';
+
+const Example = () => {
+  const isMobile = useMediaQuery('(max-width: 1000px)');
+
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        accessorKey: 'id',
+        header: 'ID',
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+        filterVariant: 'autocomplete',
+      },
+      {
+        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: 'custom', //we will render our own filtering UI
+    enableFacetedValues: true,
+    muiFilterTextFieldProps: ({ column }) => ({
+      label: `Filter by ${column.columnDef.header}`,
+    }),
+  });
+
+  return (
+    <Stack
+      direction={isMobile ? 'column-reverse' : 'row'}
+      sx={{
+        gap: '8px',
+      }}
+    >
+      <MRT_TableContainer table={table} />
+      <Paper>
+        <Stack
+          sx={{
+            p: '8px',
+            gap: '8px',
+          }}
+        >
+          {table
+            .getLeafHeaders()
+            .map(
+              (header) =>
+                header.column.getCanFilter() && (
+                  <MRT_TableHeadCellFilterContainer
+                    key={header.id}
+                    header={header}
+                    table={table}
+                    in
+                  />
+                ),
+            )}
+        </Stack>
+      </Paper>
+    </Stack>
+  );
+};
+
+export default Example;

package/data/examples/custom-headless.tsx

@@ -0,0 +1,125 @@
+import {
+  MRT_GlobalFilterTextField,
+  MRT_TableBodyCellValue,
+  MRT_TablePagination,
+  MRT_ToolbarAlertBanner,
+  flexRender,
+  type MRT_ColumnDef,
+  useMaterialReactTable,
+} from 'material-react-table';
+import {
+  Box,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@mui/material';
+import { type Person, data } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  {
+    accessorKey: 'name.firstName',
+    header: 'First Name',
+  },
+  {
+    accessorKey: 'name.lastName',
+    header: 'Last Name',
+  },
+  {
+    accessorKey: 'address',
+    header: 'Address',
+  },
+  {
+    accessorKey: 'city',
+    header: 'City',
+  },
+  {
+    accessorKey: 'state',
+    header: 'State',
+  },
+];
+
+const Example = () => {
+  const table = useMaterialReactTable({
+    columns,
+    data, //must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
+    //MRT display columns can still work, optionally override cell renders with `displayColumnDefOptions`
+    enableRowSelection: true,
+    initialState: {
+      pagination: { pageSize: 5, pageIndex: 0 },
+      showGlobalFilter: true,
+    },
+    //customize the MRT components
+    muiPaginationProps: {
+      rowsPerPageOptions: [5, 10, 15],
+      variant: 'outlined',
+    },
+    paginationDisplayMode: 'pages',
+  });
+
+  return (
+    <Stack sx={{ m: '2rem 0' }}>
+      <Typography variant="h4">My Custom Headless Table</Typography>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        {/**
+         * Use MRT components along side your own markup.
+         * They just need the `table` instance passed as a prop to work!
+         */}
+        <MRT_GlobalFilterTextField table={table} />
+        <MRT_TablePagination table={table} />
+      </Box>
+      {/* Using Vanilla Material-UI Table components here */}
+      <TableContainer>
+        <Table>
+          {/* Use your own markup, customize however you want using the power of TanStack Table */}
+          <TableHead>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableCell align="center" variant="head" key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.Header ??
+                            header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableHead>
+          <TableBody>
+            {table.getRowModel().rows.map((row, rowIndex) => (
+              <TableRow key={row.id} selected={row.getIsSelected()}>
+                {row.getVisibleCells().map((cell, _columnIndex) => (
+                  <TableCell align="center" variant="body" key={cell.id}>
+                    {/* Use MRT's cell renderer that provides better logic than flexRender */}
+                    <MRT_TableBodyCellValue
+                      cell={cell}
+                      table={table}
+                      staticRowIndex={rowIndex} //just for batch row selection to work
+                    />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <MRT_ToolbarAlertBanner stackAlertBanner table={table} />
+    </Stack>
+  );
+};
+
+export default Example;