@lminii/material-react-table-mcp 4.0.1

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

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { useMaterialReactTable, MRT_TableContainer, MRT_TableHeadCellFilterContainer, } from 'material-react-table';
+import { data } from './makeData';
+import { Paper, Stack, useMediaQuery } from '@mui/material';
+const Example = () => {
+    const isMobile = useMediaQuery('(max-width: 1000px)');
+    const columns = useMemo(() => [
+        {
+            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-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.js

@@ -0,0 +1,85 @@
+import { MRT_GlobalFilterTextField, MRT_TableBodyCellValue, MRT_TablePagination, MRT_ToolbarAlertBanner, flexRender, useMaterialReactTable, } from 'material-react-table';
+import { Box, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, } from '@mui/material';
+import { data } from './makeData';
+const columns = [
+    {
+        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;

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;

package/data/examples/custom-top-toolbar.js

@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, MRT_ToggleDensePaddingButton, MRT_ToggleFullScreenButton, useMaterialReactTable, } from 'material-react-table';
+import { Box, Button, IconButton } from '@mui/material';
+import PrintIcon from '@mui/icons-material/Print';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'age',
+            header: 'Age',
+        },
+        {
+            accessorKey: 'salary',
+            header: 'Salary',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableRowSelection: true,
+        positionToolbarAlertBanner: 'bottom', //show selected rows count on bottom toolbar
+        //add custom action buttons to top-left of top toolbar
+        renderTopToolbarCustomActions: ({ table }) => (<Box sx={{ display: 'flex', gap: '1rem', p: '4px' }}>
+        <Button color="secondary" onClick={() => {
+                alert('Create New Account');
+            }} variant="contained">
+          Create Account
+        </Button>
+        <Button color="error" disabled={!table.getIsSomeRowsSelected()} onClick={() => {
+                alert('Delete Selected Accounts');
+            }} variant="contained">
+          Delete Selected Accounts
+        </Button>
+      </Box>),
+        //customize built-in buttons in the top-right of top toolbar
+        renderToolbarInternalActions: ({ table }) => (<Box>
+        {/* add custom button to print table  */}
+        <IconButton onClick={() => {
+                window.print();
+            }}>
+          <PrintIcon />
+        </IconButton>
+        {/* along-side built-in buttons in whatever order you want them */}
+        <MRT_ToggleDensePaddingButton table={table}/>
+        <MRT_ToggleFullScreenButton table={table}/>
+      </Box>),
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/custom-top-toolbar.tsx

@@ -0,0 +1,88 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  type MRT_ColumnDef,
+  MRT_ToggleDensePaddingButton,
+  MRT_ToggleFullScreenButton,
+  useMaterialReactTable,
+} from 'material-react-table';
+import { Box, Button, IconButton } from '@mui/material';
+import PrintIcon from '@mui/icons-material/Print';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'age',
+        header: 'Age',
+      },
+      {
+        accessorKey: 'salary',
+        header: 'Salary',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableRowSelection: true,
+    positionToolbarAlertBanner: 'bottom', //show selected rows count on bottom toolbar
+    //add custom action buttons to top-left of top toolbar
+    renderTopToolbarCustomActions: ({ table }) => (
+      <Box sx={{ display: 'flex', gap: '1rem', p: '4px' }}>
+        <Button
+          color="secondary"
+          onClick={() => {
+            alert('Create New Account');
+          }}
+          variant="contained"
+        >
+          Create Account
+        </Button>
+        <Button
+          color="error"
+          disabled={!table.getIsSomeRowsSelected()}
+          onClick={() => {
+            alert('Delete Selected Accounts');
+          }}
+          variant="contained"
+        >
+          Delete Selected Accounts
+        </Button>
+      </Box>
+    ),
+    //customize built-in buttons in the top-right of top toolbar
+    renderToolbarInternalActions: ({ table }) => (
+      <Box>
+        {/* add custom button to print table  */}
+        <IconButton
+          onClick={() => {
+            window.print();
+          }}
+        >
+          <PrintIcon />
+        </IconButton>
+        {/* along-side built-in buttons in whatever order you want them */}
+        <MRT_ToggleDensePaddingButton table={table} />
+        <MRT_ToggleFullScreenButton table={table} />
+      </Box>
+    ),
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/customize-display-columns.js

@@ -0,0 +1,72 @@
+import { useMemo } from 'react';
+import { Box, Button } from '@mui/material';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+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',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        defaultDisplayColumn: {
+            enableResizing: true, //turn on some features that are usually off for all display columns
+        },
+        displayColumnDefOptions: {
+            'mrt-row-actions': {
+                size: 350, //set custom width
+                muiTableHeadCellProps: {
+                    align: 'center', //change head cell props
+                },
+            },
+            'mrt-row-numbers': {
+                enableColumnDragging: true,
+                enableColumnOrdering: true, //turn on some features that are usually off
+                enableResizing: true,
+                muiTableHeadCellProps: {
+                    sx: {
+                        fontSize: '1.2rem',
+                    },
+                },
+            },
+            'mrt-row-select': {
+                enableColumnActions: true,
+                enableHiding: true,
+                size: 100,
+            },
+        },
+        enableColumnResizing: true,
+        enableColumnOrdering: true,
+        enableRowNumbers: true,
+        enableRowSelection: true,
+        enableRowActions: true,
+        renderRowActions: ({ row }) => (<Box sx={{ display: 'flex', gap: '1rem' }}>
+        <Button>Button 1</Button>
+        <Button>Button 2</Button>
+        <Button>Button 3</Button>
+      </Box>),
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;