@mini_7/material-react-table-mcp 4.0.0 → 4.0.1

package/data/examples/editing-crud-cell.js

@@ -0,0 +1,288 @@
+import { lazy, Suspense, useMemo, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { Box, Button, CircularProgress, IconButton, Tooltip, Typography, } from '@mui/material';
+import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient, } from '@tanstack/react-query';
+import { fakeData, usStates } from './makeData';
+import DeleteIcon from '@mui/icons-material/Delete';
+const Example = () => {
+    const [validationErrors, setValidationErrors] = useState({});
+    //keep track of rows that have been edited
+    const [editedUsers, setEditedUsers] = useState({});
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'id',
+            header: 'Id',
+            enableEditing: false,
+            size: 80,
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+            muiEditTextFieldProps: ({ cell, row }) => ({
+                type: 'text',
+                required: true,
+                error: !!validationErrors?.[cell.id],
+                helperText: validationErrors?.[cell.id],
+                //store edited user in state to be saved later
+                onBlur: (event) => {
+                    const validationError = !validateRequired(event.currentTarget.value)
+                        ? 'Required'
+                        : undefined;
+                    setValidationErrors({
+                        ...validationErrors,
+                        [cell.id]: validationError,
+                    });
+                    setEditedUsers({ ...editedUsers, [row.id]: row.original });
+                },
+            }),
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+            muiEditTextFieldProps: ({ cell, row }) => ({
+                type: 'text',
+                required: true,
+                error: !!validationErrors?.[cell.id],
+                helperText: validationErrors?.[cell.id],
+                //store edited user in state to be saved later
+                onBlur: (event) => {
+                    const validationError = !validateRequired(event.currentTarget.value)
+                        ? 'Required'
+                        : undefined;
+                    setValidationErrors({
+                        ...validationErrors,
+                        [cell.id]: validationError,
+                    });
+                    setEditedUsers({ ...editedUsers, [row.id]: row.original });
+                },
+            }),
+        },
+        {
+            accessorKey: 'email',
+            header: 'Email',
+            muiEditTextFieldProps: ({ cell, row }) => ({
+                type: 'email',
+                required: true,
+                error: !!validationErrors?.[cell.id],
+                helperText: validationErrors?.[cell.id],
+                //store edited user in state to be saved later
+                onBlur: (event) => {
+                    const validationError = !validateEmail(event.currentTarget.value)
+                        ? 'Incorrect Email Format'
+                        : undefined;
+                    setValidationErrors({
+                        ...validationErrors,
+                        [cell.id]: validationError,
+                    });
+                    setEditedUsers({ ...editedUsers, [row.id]: row.original });
+                },
+            }),
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+            editVariant: 'select',
+            editSelectOptions: usStates,
+            muiEditTextFieldProps: ({ row }) => ({
+                select: true,
+                error: !!validationErrors?.state,
+                helperText: validationErrors?.state,
+                onChange: (event) => setEditedUsers({
+                    ...editedUsers,
+                    [row.id]: { ...row.original, state: event.target.value },
+                }),
+            }),
+        },
+    ], [editedUsers, 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: updateUsers, isPending: isUpdatingUsers } = useUpdateUsers();
+    //call DELETE hook
+    const { mutateAsync: deleteUser, isPending: isDeletingUser } = useDeleteUser();
+    //CREATE action
+    const handleCreateUser = async ({ values, table, }) => {
+        const newValidationErrors = validateUser(values);
+        if (Object.values(newValidationErrors).some((error) => error)) {
+            setValidationErrors(newValidationErrors);
+            return;
+        }
+        setValidationErrors({});
+        await createUser(values);
+        table.setCreatingRow(null); //exit creating mode
+    };
+    //UPDATE action
+    const handleSaveUsers = async () => {
+        if (Object.values(validationErrors).some((error) => !!error))
+            return;
+        await updateUsers(Object.values(editedUsers));
+        setEditedUsers({});
+    };
+    //DELETE action
+    const openDeleteConfirmModal = (row) => {
+        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: 'cell', // ('modal', 'row', 'table', and 'custom' are also available)
+        enableCellActions: true,
+        enableClickToCopy: 'context-menu',
+        enableColumnPinning: true,
+        enableEditing: true,
+        enableRowActions: true,
+        getRowId: (row) => row.id,
+        muiToolbarAlertBannerProps: isLoadingUsersError
+            ? {
+                color: 'error',
+                children: 'Error loading data',
+            }
+            : undefined,
+        muiTableContainerProps: {
+            sx: {
+                minHeight: '500px',
+            },
+        },
+        onCreatingRowCancel: () => setValidationErrors({}),
+        onCreatingRowSave: handleCreateUser,
+        renderRowActions: ({ row }) => (<Box sx={{ display: 'flex', gap: '1rem' }}>
+        <Tooltip title="Delete">
+          <IconButton color="error" onClick={() => openDeleteConfirmModal(row)}>
+            <DeleteIcon />
+          </IconButton>
+        </Tooltip>
+      </Box>),
+        renderBottomToolbarCustomActions: () => (<Box sx={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+        <Button color="success" variant="contained" onClick={handleSaveUsers} disabled={Object.keys(editedUsers).length === 0 ||
+                Object.values(validationErrors).some((error) => !!error)}>
+          {isUpdatingUsers ? <CircularProgress size={25}/> : 'Save'}
+        </Button>
+        {Object.values(validationErrors).some((error) => !!error) && (<Typography color="error">Fix errors before submitting</Typography>)}
+      </Box>),
+        renderTopToolbarCustomActions: ({ table }) => (<Button variant="contained" onClick={() => {
+                table.setCreatingRow(true); //simplest way to open the create row modal with no default values
+                //or you can pass in a row object to set default values with the `createRow` helper function
+                // table.setCreatingRow(
+                //   createRow(table, {
+                //     //optionally pass in default values for the new row, useful for nested data or other complex scenarios
+                //   }),
+                // );
+            }}>
+        Create New User
+      </Button>),
+        initialState: {
+            columnPinning: {
+                end: ['mrt-row-actions'],
+                start: [],
+            },
+        },
+        state: {
+            isLoading: isLoadingUsers,
+            isSaving: isCreatingUser || isUpdatingUsers || 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) => {
+            //send api update request here
+            await new Promise((resolve) => setTimeout(resolve, 1000)); //fake api call
+            return Promise.resolve();
+        },
+        //client side optimistic update
+        onMutate: (newUserInfo) => {
+            queryClient.setQueryData(['users'], (prevUsers) => [
+                ...prevUsers,
+                {
+                    ...newUserInfo,
+                    id: (Math.random() + 1).toString(36).substring(7),
+                },
+            ]);
+        },
+        // onSettled: () => queryClient.invalidateQueries({ queryKey: ['users'] }), //refetch users after mutation, disabled for demo
+    });
+}
+//READ hook (get users from api)
+function useGetUsers() {
+    return useQuery({
+        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 useUpdateUsers() {
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: async (users) => {
+            //send api update request here
+            await new Promise((resolve) => setTimeout(resolve, 1000)); //fake api call
+            return Promise.resolve();
+        },
+        //client side optimistic update
+        onMutate: (newUsers) => {
+            queryClient.setQueryData(['users'], (prevUsers) => prevUsers?.map((user) => {
+                const newUser = newUsers.find((u) => u.id === user.id);
+                return newUser ? newUser : user;
+            }));
+        },
+        // 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) => {
+            //send api update request here
+            await new Promise((resolve) => setTimeout(resolve, 1000)); //fake api call
+            return Promise.resolve();
+        },
+        //client side optimistic update
+        onMutate: (userId) => {
+            queryClient.setQueryData(['users'], (prevUsers) => prevUsers?.filter((user) => user.id !== userId));
+        },
+        // 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) => !!value.length;
+const validateEmail = (email) => !!email.length &&
+    email
+        .toLowerCase()
+        .match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+function validateUser(user) {
+    return {
+        firstName: !validateRequired(user.firstName)
+            ? 'First Name is Required'
+            : '',
+        lastName: !validateRequired(user.lastName) ? 'Last Name is Required' : '',
+        email: !validateEmail(user.email) ? 'Incorrect Email Format' : '',
+    };
+}

package/data/examples/editing-crud-modal.js

@@ -0,0 +1,275 @@
+import { lazy, Suspense, useMemo, useState } from 'react';
+import { MRT_EditActionButtons, MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { Box, Button, DialogActions, DialogContent, DialogTitle, IconButton, Tooltip, } from '@mui/material';
+import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient, } from '@tanstack/react-query';
+import { fakeData, usStates } from './makeData';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+const Example = () => {
+    const [validationErrors, setValidationErrors] = useState({});
+    const columns = useMemo(() => [
+        {
+            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: 'email',
+            header: 'Email',
+            muiEditTextFieldProps: {
+                type: 'email',
+                required: true,
+                error: !!validationErrors?.email,
+                helperText: validationErrors?.email,
+                //remove any previous validation errors when user focuses on the input
+                onFocus: () => setValidationErrors({
+                    ...validationErrors,
+                    email: 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 = async ({ values, table, }) => {
+        const newValidationErrors = validateUser(values);
+        if (Object.values(newValidationErrors).some((error) => error)) {
+            setValidationErrors(newValidationErrors);
+            return;
+        }
+        setValidationErrors({});
+        await createUser(values);
+        table.setCreatingRow(null); //exit creating mode
+    };
+    //UPDATE action
+    const handleSaveUser = 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) => {
+        if (window.confirm('Are you sure you want to delete this user?')) {
+            deleteUser(row.original.id);
+        }
+    };
+    const table = useMaterialReactTable({
+        columns,
+        data: fetchedUsers,
+        createDisplayMode: 'modal', //default ('row', and 'custom' are also available)
+        editDisplayMode: 'modal', //default ('row', 'cell', 'table', and 'custom' are also available)
+        enableEditing: true,
+        getRowId: (row) => row.id,
+        muiToolbarAlertBannerProps: isLoadingUsersError
+            ? {
+                color: 'error',
+                children: 'Error loading data',
+            }
+            : undefined,
+        muiTableContainerProps: {
+            sx: {
+                minHeight: '500px',
+            },
+        },
+        onCreatingRowCancel: () => setValidationErrors({}),
+        onCreatingRowSave: handleCreateUser,
+        onEditingRowCancel: () => setValidationErrors({}),
+        onEditingRowSave: handleSaveUser,
+        //optionally customize modal content
+        renderCreateRowDialogContent: ({ table, row, internalEditComponents }) => (<>
+        <DialogTitle variant="h3">Create New User</DialogTitle>
+        <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          {internalEditComponents} {/* or render custom edit components here */}
+        </DialogContent>
+        <DialogActions>
+          <MRT_EditActionButtons variant="text" table={table} row={row}/>
+        </DialogActions>
+      </>),
+        //optionally customize modal content
+        renderEditRowDialogContent: ({ table, row, internalEditComponents }) => (<>
+        <DialogTitle variant="h3">Edit User</DialogTitle>
+        <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+          {internalEditComponents} {/* or render custom edit components here */}
+        </DialogContent>
+        <DialogActions>
+          <MRT_EditActionButtons variant="text" table={table} row={row}/>
+        </DialogActions>
+      </>),
+        renderRowActions: ({ row, 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>
+      </Box>),
+        renderTopToolbarCustomActions: ({ table }) => (<Button variant="contained" onClick={() => {
+                table.setCreatingRow(true); //simplest way to open the create row modal with no default values
+                //or you can pass in a row object to set default values with the `createRow` helper function
+                // table.setCreatingRow(
+                //   createRow(table, {
+                //     //optionally pass in default values for the new row, useful for nested data or other complex scenarios
+                //   }),
+                // );
+            }}>
+        Create New User
+      </Button>),
+        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) => {
+            //send api update request here
+            await new Promise((resolve) => setTimeout(resolve, 1000)); //fake api call
+            return Promise.resolve();
+        },
+        //client side optimistic update
+        onMutate: (newUserInfo) => {
+            queryClient.setQueryData(['users'], (prevUsers) => [
+                ...prevUsers,
+                {
+                    ...newUserInfo,
+                    id: (Math.random() + 1).toString(36).substring(7),
+                },
+            ]);
+        },
+        // onSettled: () => queryClient.invalidateQueries({ queryKey: ['users'] }), //refetch users after mutation, disabled for demo
+    });
+}
+//READ hook (get users from api)
+function useGetUsers() {
+    return useQuery({
+        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) => {
+            //send api update request here
+            await new Promise((resolve) => setTimeout(resolve, 1000)); //fake api call
+            return Promise.resolve();
+        },
+        //client side optimistic update
+        onMutate: (newUserInfo) => {
+            queryClient.setQueryData(['users'], (prevUsers) => prevUsers?.map((prevUser) => prevUser.id === newUserInfo.id ? newUserInfo : prevUser));
+        },
+        // 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) => {
+            //send api update request here
+            await new Promise((resolve) => setTimeout(resolve, 1000)); //fake api call
+            return Promise.resolve();
+        },
+        //client side optimistic update
+        onMutate: (userId) => {
+            queryClient.setQueryData(['users'], (prevUsers) => prevUsers?.filter((user) => user.id !== userId));
+        },
+        // 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) => !!value.length;
+const validateEmail = (email) => !!email.length &&
+    email
+        .toLowerCase()
+        .match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+function validateUser(user) {
+    return {
+        firstName: !validateRequired(user.firstName)
+            ? 'First Name is Required'
+            : '',
+        lastName: !validateRequired(user.lastName) ? 'Last Name is Required' : '',
+        email: !validateEmail(user.email) ? 'Incorrect Email Format' : '',
+    };
+}