@mini_7/material-react-table-mcp 4.0.0

package/data/examples/editing-crud-tree.tsx

@@ -0,0 +1,416 @@
+import { lazy, Suspense, useMemo, useState } from 'react';
+import {
+  MaterialReactTable,
+  createRow,
+  type MRT_ColumnDef,
+  type MRT_Row,
+  type MRT_TableOptions,
+  useMaterialReactTable,
+} from 'material-react-table';
+import {
+  Box,
+  Button,
+  IconButton,
+  Tooltip,
+  darken,
+  lighten,
+} from '@mui/material';
+import {
+  QueryClient,
+  QueryClientProvider,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { type User, fakeData, usStates } from './makeData';
+import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+const Example = () => {
+  const [creatingRowIndex, setCreatingRowIndex] = useState<
+    number | undefined
+  >();
+  const [validationErrors, setValidationErrors] = useState<
+    Record<string, string | undefined>
+  >({});
+
+  const columns = useMemo<MRT_ColumnDef<User>[]>(
+    () => [
+      {
+        accessorKey: 'id',
+        header: 'Id',
+        enableEditing: false,
+        size: 80,
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+        muiEditTextFieldProps: {
+          required: true,
+          error: !!validationErrors?.firstName,
+          helperText: validationErrors?.firstName,
+          //remove any previous validation errors when user focuses on the input
+          onFocus: () =>
+            setValidationErrors({
+              ...validationErrors,
+              firstName: undefined,
+            }),
+          //optionally add validation checking for onBlur or onChange
+        },
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+        muiEditTextFieldProps: {
+          required: true,
+          error: !!validationErrors?.lastName,
+          helperText: validationErrors?.lastName,
+          //remove any previous validation errors when user focuses on the input
+          onFocus: () =>
+            setValidationErrors({
+              ...validationErrors,
+              lastName: undefined,
+            }),
+        },
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+        muiEditTextFieldProps: {
+          required: true,
+          error: !!validationErrors?.city,
+          helperText: validationErrors?.city,
+          //remove any previous validation errors when user focuses on the input
+          onFocus: () =>
+            setValidationErrors({
+              ...validationErrors,
+              city: undefined,
+            }),
+        },
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+        editVariant: 'select',
+        editSelectOptions: usStates,
+        muiEditTextFieldProps: {
+          select: true,
+          error: !!validationErrors?.state,
+          helperText: validationErrors?.state,
+        },
+      },
+    ],
+    [validationErrors],
+  );
+
+  //call CREATE hook
+  const { mutateAsync: createUser, isPending: isCreatingUser } =
+    useCreateUser();
+  //call READ hook
+  const {
+    data: fetchedUsers = [],
+    isError: isLoadingUsersError,
+    isFetching: isFetchingUsers,
+    isLoading: isLoadingUsers,
+  } = useGetUsers();
+  //call UPDATE hook
+  const { mutateAsync: updateUser, isPending: isUpdatingUser } =
+    useUpdateUser();
+  //call DELETE hook
+  const { mutateAsync: deleteUser, isPending: isDeletingUser } =
+    useDeleteUser();
+
+  //CREATE action
+  const handleCreateUser: MRT_TableOptions<User>['onCreatingRowSave'] = async ({
+    values,
+    row,
+    table,
+  }) => {
+    const newValidationErrors = validateUser(values);
+    if (Object.values(newValidationErrors).some((error) => error)) {
+      setValidationErrors(newValidationErrors);
+      return;
+    }
+    setValidationErrors({});
+    await createUser({ ...values, managerId: row.original.managerId });
+    table.setCreatingRow(null); //exit creating mode
+  };
+
+  //UPDATE action
+  const handleSaveUser: MRT_TableOptions<User>['onEditingRowSave'] = async ({
+    values,
+    table,
+  }) => {
+    const newValidationErrors = validateUser(values);
+    if (Object.values(newValidationErrors).some((error) => error)) {
+      setValidationErrors(newValidationErrors);
+      return;
+    }
+    setValidationErrors({});
+    await updateUser(values);
+    table.setEditingRow(null); //exit editing mode
+  };
+
+  //DELETE action
+  const openDeleteConfirmModal = (row: MRT_Row<User>) => {
+    if (window.confirm('Are you sure you want to delete this user?')) {
+      deleteUser(row.original.id);
+    }
+  };
+
+  const table = useMaterialReactTable({
+    columns,
+    data: fetchedUsers,
+    createDisplayMode: 'row', // ('modal', and 'custom' are also available)
+    editDisplayMode: 'row', // ('modal', 'cell', 'table', and 'custom' are also available)
+    enableColumnPinning: true,
+    enableEditing: true,
+    enableExpanding: true,
+    positionCreatingRow: creatingRowIndex, //index where new row is inserted before
+    getRowId: (row) => row.id,
+    muiToolbarAlertBannerProps: isLoadingUsersError
+      ? {
+          color: 'error',
+          children: 'Error loading data',
+        }
+      : undefined,
+    muiTableContainerProps: {
+      sx: {
+        minHeight: '500px',
+      },
+    },
+    muiTableBodyRowProps: ({ row }) => ({
+      //conditional styling based on row depth
+      sx: (theme) => ({
+        td: {
+          backgroundColor: darken(
+            lighten(theme.palette.background.paper, 0.1),
+            row.depth * (theme.palette.mode === 'dark' ? 0.2 : 0.1),
+          ),
+        },
+      }),
+    }),
+    onCreatingRowCancel: () => setValidationErrors({}),
+    onCreatingRowSave: handleCreateUser,
+    onEditingRowCancel: () => setValidationErrors({}),
+    onEditingRowSave: handleSaveUser,
+    renderRowActions: ({ row, staticRowIndex, table }) => (
+      <Box sx={{ display: 'flex', gap: '1rem' }}>
+        <Tooltip title="Edit">
+          <IconButton onClick={() => table.setEditingRow(row)}>
+            <EditIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Delete">
+          <IconButton color="error" onClick={() => openDeleteConfirmModal(row)}>
+            <DeleteIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Add Subordinate">
+          <IconButton
+            onClick={() => {
+              setCreatingRowIndex((staticRowIndex || 0) + 1);
+              table.setCreatingRow(
+                createRow(
+                  table,
+                  {
+                    id: null!,
+                    firstName: '',
+                    lastName: '',
+                    city: '',
+                    state: '',
+                    managerId: row.id,
+                    subRows: [],
+                  },
+                  -1,
+                  row.depth + 1,
+                ),
+              );
+            }}
+          >
+            <PersonAddAltIcon />
+          </IconButton>
+        </Tooltip>
+      </Box>
+    ),
+    renderTopToolbarCustomActions: ({ table }) => (
+      <Button
+        startIcon={<PersonAddAltIcon />}
+        variant="contained"
+        onClick={() => {
+          setCreatingRowIndex(table.getRowModel().rows.length); //create new row at bottom of table
+          table.setCreatingRow(true);
+        }}
+      >
+        Create New User
+      </Button>
+    ),
+    initialState: {
+      columnPinning: { end: [], start: ['mrt-row-actions'] },
+      expanded: true,
+      pagination: { pageSize: 20, pageIndex: 0 },
+    },
+    state: {
+      isLoading: isLoadingUsers,
+      isSaving: isCreatingUser || isUpdatingUser || isDeletingUser,
+      showAlertBanner: isLoadingUsersError,
+      showProgressBars: isFetchingUsers,
+    },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+//CREATE hook (post new user to api)
+function useCreateUser() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (user: User) => {
+      console.info('create user', user);
+      //send api update request here
+      await new Promise((resolve) => setTimeout(resolve, 1000)); //fake api call
+      return Promise.resolve();
+    },
+    //client side optimistic update
+    onMutate: (newUserInfo: User) => {
+      queryClient.setQueryData(['users'], (_prevUsers: User[]) => {
+        const prevUsers: User[] = JSON.parse(JSON.stringify(_prevUsers));
+        newUserInfo.subRows = [];
+        if (newUserInfo.managerId) {
+          const manager = findUserInTree(newUserInfo.managerId, prevUsers);
+          if (manager) {
+            manager.subRows = [
+              ...(manager.subRows || []),
+              {
+                ...newUserInfo,
+                id: `${manager.id}.${(manager.subRows?.length || 0) + 1}`,
+              },
+            ];
+          }
+        } else {
+          prevUsers.push({
+            ...newUserInfo,
+            id: `${prevUsers.length + 1}`,
+          });
+        }
+        return [...prevUsers];
+      });
+    },
+    // onSettled: () => queryClient.invalidateQueries({ queryKey: ['users'] }), //refetch users after mutation, disabled for demo
+  });
+}
+
+//READ hook (get users from api)
+function useGetUsers() {
+  return useQuery<User[]>({
+    queryKey: ['users'],
+    queryFn: async () => {
+      //send api request here
+      await new Promise((resolve) => setTimeout(resolve, 1000)); //fake api call
+      return Promise.resolve(fakeData);
+    },
+    refetchOnWindowFocus: false,
+  });
+}
+
+//UPDATE hook (put user in api)
+function useUpdateUser() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (user: User) => {
+      console.info('update user', user);
+      //send api update request here
+      await new Promise((resolve) => setTimeout(resolve, 1000)); //fake api call
+      return Promise.resolve();
+    },
+    //client side optimistic update
+    onMutate: (newUserInfo: User) => {
+      queryClient.setQueryData(['users'], (prevUsers: any) => {
+        let user = findUserInTree(newUserInfo.id, prevUsers);
+        user = { ...user, ...newUserInfo };
+        return [...prevUsers];
+      });
+    },
+    // onSettled: () => queryClient.invalidateQueries({ queryKey: ['users'] }), //refetch users after mutation, disabled for demo
+  });
+}
+
+//DELETE hook (delete user in api)
+function useDeleteUser() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (userId: string) => {
+      console.info('delete user', userId);
+      //send api update request here
+      await new Promise((resolve) => setTimeout(resolve, 1000)); //fake api call
+      return Promise.resolve();
+    },
+    //client side optimistic update
+    onMutate: (userId: string) => {
+      queryClient.setQueryData(['users'], (prevUsers: any) => {
+        const newUsers: User[] = JSON.parse(JSON.stringify(prevUsers));
+        //remove user
+        const user = findUserInTree(userId, newUsers);
+        if (user) {
+          const manager = findUserInTree(user.managerId, newUsers);
+          if (manager) {
+            manager.subRows = manager.subRows?.filter(
+              (subUser) => subUser.id !== user.id,
+            );
+          } else {
+            return newUsers.filter((user) => user.id !== userId);
+          }
+        }
+        return [...newUsers];
+      });
+    },
+    // onSettled: () => queryClient.invalidateQueries({ queryKey: ['users'] }), //refetch users after mutation, disabled for demo
+  });
+}
+
+//react query setup in App.tsx
+const ReactQueryDevtoolsProduction = lazy(() =>
+  import('@tanstack/react-query-devtools/build/modern/production.js').then(
+    (d) => ({
+      default: d.ReactQueryDevtools,
+    }),
+  ),
+);
+
+const queryClient = new QueryClient();
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Example />
+      <Suspense fallback={null}>
+        <ReactQueryDevtoolsProduction />
+      </Suspense>
+    </QueryClientProvider>
+  );
+}
+
+const validateRequired = (value: string) => !!value.length;
+
+function validateUser(user: User) {
+  return {
+    firstName: !validateRequired(user.firstName)
+      ? 'First Name is Required'
+      : '',
+    lastName: !validateRequired(user.lastName) ? 'Last Name is Required' : '',
+  };
+}
+
+function findUserInTree(managerId: string | null, users: User[]): User | null {
+  for (let i = 0; i < users.length; i++) {
+    if (users[i].id === managerId) {
+      return users[i];
+    }
+    if (users[i].subRows) {
+      const found = findUserInTree(managerId, users[i].subRows!);
+      if (found) return found;
+    }
+  }
+  return null;
+}

package/data/examples/enable-cell-actions.tsx

@@ -0,0 +1,76 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  MRT_ActionMenuItem,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+import { Divider } from '@mui/material';
+import EmailIcon from '@mui/icons-material/Email';
+import PersonOffOutlinedIcon from '@mui/icons-material/PersonOffOutlined';
+
+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 table = useMaterialReactTable({
+    columns,
+    data,
+    enableCellActions: true,
+    enableClickToCopy: 'context-menu',
+    enableEditing: true,
+    editDisplayMode: 'cell',
+    renderCellActionMenuItems: ({ closeMenu, table, internalMenuItems }) => [
+      ...internalMenuItems,
+      <Divider key="divider" />,
+      <MRT_ActionMenuItem
+        icon={<EmailIcon />}
+        key={1}
+        label="Item 1"
+        onClick={() => {
+          closeMenu();
+        }}
+        table={table}
+      />,
+      <MRT_ActionMenuItem
+        icon={<PersonOffOutlinedIcon />}
+        key={2}
+        label="Item 2"
+        onClick={() => {
+          closeMenu();
+        }}
+        table={table}
+      />,
+    ],
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/enable-click-to-copy.tsx

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import { ContentCopy } from '@mui/icons-material';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'email',
+        header: 'Email',
+        enableClickToCopy: true,
+        muiCopyButtonProps: {
+          fullWidth: true,
+          startIcon: <ContentCopy />,
+          sx: { justifyContent: 'flex-start' },
+        },
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+        enableClickToCopy: true,
+      },
+    ],
+    [],
+  );
+
+  return <MaterialReactTable columns={columns} data={data} />;
+};
+
+export default Example;

package/data/examples/enable-column-grouping.tsx

@@ -0,0 +1,120 @@
+import { useMemo, useState } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+import {
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  Stack,
+} from '@mui/material';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        header: 'First Name',
+        accessorKey: 'firstName',
+      },
+      {
+        header: 'Last Name',
+        accessorKey: 'lastName',
+      },
+      {
+        header: 'Age',
+        accessorKey: 'age',
+      },
+      {
+        header: 'Gender',
+        accessorKey: 'gender',
+      },
+      {
+        header: 'State',
+        accessorKey: 'state',
+      },
+      {
+        header: 'Salary',
+        accessorKey: 'salary',
+      },
+    ],
+    [],
+    //end
+  );
+
+  //demo state
+  const [groupedColumnMode, setGroupedColumnMode] = useState<
+    false | 'remove' | 'reorder'
+  >('reorder'); //default is 'reorder
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableGrouping: true,
+    groupedColumnMode,
+    initialState: {
+      expanded: true, //expand all groups by default
+      grouping: ['state', 'gender'], //an array of columns to group by by default (can be multiple)
+      pagination: { pageIndex: 0, pageSize: 20 },
+    },
+    muiTableContainerProps: { sx: { maxHeight: '800px' } },
+  });
+
+  return (
+    <Stack
+      sx={{
+        gap: '1rem',
+      }}
+    >
+      <DemoRadioGroup
+        groupedColumnMode={groupedColumnMode}
+        setGroupedColumnMode={setGroupedColumnMode}
+      />
+      <MaterialReactTable table={table} />
+    </Stack>
+  );
+};
+
+export default Example;
+
+//demo...
+const DemoRadioGroup = ({
+  groupedColumnMode,
+  setGroupedColumnMode,
+}: {
+  groupedColumnMode: false | 'remove' | 'reorder';
+  setGroupedColumnMode: (
+    groupedColumnMode: false | 'remove' | 'reorder',
+  ) => void;
+}) => {
+  return (
+    <FormControl sx={{ margin: 'auto', textAlign: 'center' }}>
+      <FormLabel>Grouped Column Mode</FormLabel>
+      <RadioGroup
+        row
+        value={groupedColumnMode}
+        onChange={(event) =>
+          setGroupedColumnMode(
+            event.target.value === 'false'
+              ? false
+              : (event.target.value as any),
+          )
+        }
+      >
+        <FormControlLabel
+          control={<Radio />}
+          label='"reorder" (default)'
+          value="reorder"
+        />
+        <FormControlLabel control={<Radio />} label='"remove"' value="remove" />
+        <FormControlLabel value={false} control={<Radio />} label="false" />
+      </RadioGroup>
+    </FormControl>
+  );
+};
+//end

package/data/examples/enable-column-ordering.tsx

@@ -0,0 +1,48 @@
+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',
+      },
+      //column definitions...
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      //end
+      {
+        accessorKey: 'state',
+        enableColumnOrdering: false, //disable column ordering for this column,
+        header: 'State',
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableColumnOrdering: true,
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;