@mini_7/material-react-table-mcp 4.0.0

package/data/examples/row-actions-buttons.tsx

@@ -0,0 +1,89 @@
+import { useMemo, useState } from 'react';
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import { Box, IconButton } from '@mui/material';
+import {
+  Edit as EditIcon,
+  Delete as DeleteIcon,
+  Email as EmailIcon,
+} from '@mui/icons-material';
+import { data as initialData, type Person } from './makeData';
+
+export 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',
+        header: 'State',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const [data, setData] = useState<Person[]>(initialData);
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      layoutMode="grid"
+      displayColumnDefOptions={{
+        'mrt-row-actions': {
+          size: 180, //if using layoutMode that is not 'semantic', the columns will not auto-size, so you need to set the size manually
+          grow: false,
+        },
+      }}
+      enableRowActions
+      renderRowActions={({ row, table }) => (
+        <Box sx={{ display: 'flex', flexWrap: 'nowrap', gap: '8px' }}>
+          <IconButton
+            color="primary"
+            onClick={() =>
+              window.open(
+                `mailto:kevinvandy@mailinator.com?subject=Hello ${row.original.firstName}!`,
+              )
+            }
+          >
+            <EmailIcon />
+          </IconButton>
+          <IconButton
+            color="secondary"
+            onClick={() => {
+              table.setEditingRow(row);
+            }}
+          >
+            <EditIcon />
+          </IconButton>
+          <IconButton
+            color="error"
+            onClick={() => {
+              data.splice(row.index, 1); //assuming simple data table
+              setData([...data]);
+            }}
+          >
+            <DeleteIcon />
+          </IconButton>
+        </Box>
+      )}
+    />
+  );
+};
+
+export default Example;

package/data/examples/row-actions-menu-items.tsx

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  MRT_ActionMenuItem,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+import { Edit, Delete } from '@mui/icons-material';
+
+export 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',
+        header: 'State',
+      },
+    ],
+    [],
+    //end
+  );
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableRowActions
+      renderRowActionMenuItems={({ row, table }) => [
+        <MRT_ActionMenuItem //or just use a normal MUI MenuItem component
+          icon={<Edit />}
+          key="edit"
+          label="Edit"
+          onClick={() => console.info('Edit')}
+          table={table}
+        />,
+        <MRT_ActionMenuItem
+          icon={<Delete />}
+          key="delete"
+          label="Delete"
+          onClick={() => console.info('Delete')}
+          table={table}
+        />,
+      ]}
+    />
+  );
+};
+
+export default Example;

package/data/examples/single-row-selection.tsx

@@ -0,0 +1,98 @@
+import { useMemo, useState } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_RowSelectionState,
+} from 'material-react-table';
+
+//data definitions...
+interface Person {
+  userId: string;
+  firstName: string;
+  lastName: string;
+  age: number;
+  address: string;
+  city: string;
+  state: string;
+}
+//end
+
+const data = [
+  //data definitions...
+  {
+    userId: '3f25309c-8fa1-470f-811e-cdb082ab9017', //we'll use this as a unique row id
+    firstName: 'Dylan',
+    lastName: 'Murray',
+    age: 22,
+    address: '261 Erdman Ford',
+    city: 'East Daphne',
+    state: 'Kentucky',
+  },
+  {
+    userId: 'be731030-df83-419c-b3d6-9ef04e7f4a9f',
+    firstName: 'Raquel',
+    lastName: 'Kohler',
+    age: 18,
+    address: '769 Dominic Grove',
+    city: 'Columbus',
+    state: 'Ohio',
+  },
+  //end
+];
+
+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: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+    ],
+    [], //end
+  );
+
+  //optionally, you can manage the row selection state yourself
+  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableRowSelection: true,
+    enableMultiRowSelection: false, //use radio buttons instead of checkboxes
+    getRowId: (row) => row.userId, //give each row a more useful id
+    muiTableBodyRowProps: ({ row }) => ({
+      //add onClick to row to select upon clicking anywhere in the row
+      onClick: row.getToggleSelectedHandler(),
+      sx: { cursor: 'pointer' },
+    }),
+    positionToolbarAlertBanner: 'bottom', //move the alert banner to the bottom
+    onRowSelectionChange: setRowSelection, //connect internal row selection state to your own
+    state: { rowSelection }, //pass our managed row selection state to the table to use
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/virtualized.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_SortingState,
+  type MRT_RowVirtualizer,
+} from 'material-react-table';
+import { makeData, type Person } from './makeData';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+        size: 150,
+      },
+      {
+        accessorKey: 'middleName',
+        header: 'Middle Name',
+        size: 170,
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+        size: 150,
+      },
+      {
+        accessorKey: 'email',
+        header: 'Email Address',
+        size: 300,
+      },
+      {
+        accessorKey: 'phoneNumber',
+        header: 'Phone Number',
+        size: 250,
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+        size: 300,
+      },
+      {
+        accessorKey: 'zipCode',
+        header: 'Zip Code',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+        size: 220,
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+      {
+        accessorKey: 'country',
+        header: 'Country',
+        size: 350,
+      },
+      {
+        accessorKey: 'petName',
+        header: 'Pet Name',
+      },
+      {
+        accessorKey: 'age',
+        header: 'Age',
+      },
+      {
+        accessorKey: 'salary',
+        header: 'Salary',
+      },
+      {
+        accessorKey: 'dateOfBirth',
+        header: 'Date of Birth',
+      },
+      {
+        accessorKey: 'dateOfJoining',
+        header: 'Date of Joining',
+      },
+      {
+        accessorKey: 'isActive',
+        header: 'Is Active',
+      },
+    ],
+    [],
+    //end
+  );
+
+  //optionally access the underlying virtualizer instance
+  const rowVirtualizerInstanceRef = useRef<MRT_RowVirtualizer>(null);
+
+  const [data, setData] = useState<Person[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [sorting, setSorting] = useState<MRT_SortingState>([]);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setData(makeData(10_000));
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    //scroll to the top of the table when the sorting changes
+    try {
+      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [sorting]);
+
+  const table = useMaterialReactTable({
+    columns,
+    data, //10,000 rows
+    defaultDisplayColumn: { enableResizing: true },
+    enableBottomToolbar: false,
+    enableColumnResizing: true,
+    enableColumnVirtualization: true,
+    enableGlobalFilterModes: true,
+    enablePagination: false,
+    enableColumnPinning: true,
+    enableRowNumbers: true,
+    enableRowVirtualization: true,
+    muiTableContainerProps: { sx: { maxHeight: '600px' } },
+    onSortingChange: setSorting,
+    state: { isLoading, sorting },
+    rowVirtualizerInstanceRef, //optional
+    rowVirtualizerOptions: { overscan: 5 }, //optionally customize the row virtualizer
+    columnVirtualizerOptions: { overscan: 2 }, //optionally customize the column virtualizer
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/guides/accessibility.md

@@ -0,0 +1,119 @@
+## Accessibility / Keyboard Navigation Guide
+
+Material React Table tries to get the basics of data grid accessibility right out of the box. But since you can easily add event handlers to just about any interaction inside of the table, you can heavily customize the accessibility of your table to your needs too.
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `enableKeyboardShortcuts` - type `boolean` - default `true`
+
+### Keyboard Navigation
+
+> New in v3
+
+Material React Table V3 introduces a new table option that is `true` by default: `enableKeyboardShortcuts`
+
+#### `enableKeyboardShortcuts`
+
+This option enables the following keyboard shortcuts:
+
+- `Tab` - Moves the focus to the next cell or element in the table (standard browser behavior)
+- `Arrow Up` - Moves the focus 1 cell up
+- `Arrow Down` - Moves the focus 1 cell down
+- `Arrow Left` - Moves the focus 1 cell left
+- `Arrow Right` - Moves the focus 1 cell right
+- `Home` - Moves the focus to the first cell in the current row
+- `End` - Moves the focus to the last cell in the current row
+- `Page Up` - Moves the focus to the first cell in the current column
+- `Page Down` - Moves the focus to the last cell in the current column
+- `Ctrl/Cmd + Home` - Moves the focus to the first cell in the table (top left in left-to-right languages)
+- `Ctrl/Cmd + End` - Moves the focus to the last cell in the table (bottom right in left-to-right languages)
+- `Enter` - Performs certain actions in the currently focused cell such as sorting, row selection, row expansion, row pinning, etc.
+- `Space` - Also performs certain actions in the currently focused cell such as sorting, row selection, row expansion, row pinning, etc.
+- `Ctrl/Cmd + Enter` - Opens column actions menu on a header
+- `Escape` - Exits full screen mode
+
+A `tabIndex={0}` is also automatically added to all cells, headers, and footers when `enableKeyboardShortcuts` is enabled to allow for keyboard focus.
+
+### Custom Keyboard Shortcuts
+
+You do not have to use the provided keyboard shortcuts. You can turn off `enableKeyboardShortcuts` and add your own keyboard shortcuts using the `onKeyDown` event handler on all of the table cells (or any other element).
+
+You can also add custom focus styles to any element using the `sx` prop.
+
+```tsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  //add custom keyboard shortcuts
+  defaultColumn: {
+    //header
+    muiTableHeadCellProps: {
+      onKeyDown: (event) => {
+        if (event.key === 't' && event.metaKey) {
+          alert('You pressed the custom shortcut!');
+        }
+      },
+      tabIndex: 0, //allow for keyboard focus
+    },
+    //body
+    muiTableBodyCellProps: {
+      onKeyDown: (event) => {
+        if (event.key === 't' && event.metaKey) {
+          alert('You pressed the custom shortcut!');
+        }
+      },
+      //add custom focus styles
+      sx: {
+        '&:focus-visible': {
+          //or just `&:focus` if you want all focus events to be visible
+          outline: '2px solid red',
+          outlineOffset: '-2px',
+        },
+      },
+      tabIndex: 0, //allow for keyboard focus
+    },
+  },
+  enableKeyboardShortcuts: false, //turn off default keyboard shortcuts from MRT
+});
+```
+
+### Custom Focus Styles
+
+An outline is automatically added to all elements when they are focused. You can easily customize the color of the outline by setting `cellNavigationOutlineColor` property in the `mrtTheme` table option.
+
+```tsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  mrtTheme: {
+    cellNavigationOutlineColor 'limegreen'
+  }
+});
+```
+
+Or, of course, you can just use the `sx` props to override any styles you want, just like any other style override in MRT.
+
+```tsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  defaultColumn: {
+    muiTableBodyCellProps: {
+      sx: {
+        '&:focus-visible': {
+          outline: '4px solid red',
+          outlineOffset: '-4px',
+        },
+      },
+    },
+  },
+});
+```
+
+### Full Screen Mode
+
+Now in V3, a focus trap is applied to the table when in full screen mode. This is to prevent the user from navigating outside of the table when using the arrow keys.
+
+The user can exit full screen mode by pressing `Escape`.