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

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

@@ -0,0 +1,328 @@
+import { lazy, Suspense, useMemo, useState } from 'react';
+import { MaterialReactTable, createRow, 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 { 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();
+    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: '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 = 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 = 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: '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) => {
+            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) => {
+            queryClient.setQueryData(['users'], (_prevUsers) => {
+                const prevUsers = 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({
+        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) => {
+            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) => {
+            queryClient.setQueryData(['users'], (prevUsers) => {
+                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) => {
+            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) => {
+            queryClient.setQueryData(['users'], (prevUsers) => {
+                const newUsers = 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) => !!value.length;
+function validateUser(user) {
+    return {
+        firstName: !validateRequired(user.firstName)
+            ? 'First Name is Required'
+            : '',
+        lastName: !validateRequired(user.lastName) ? 'Last Name is Required' : '',
+    };
+}
+function findUserInTree(managerId, users) {
+    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.js

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, MRT_ActionMenuItem, useMaterialReactTable, } from 'material-react-table';
+import { data } 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(
+    //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,
+        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.js

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import { MaterialReactTable } from 'material-react-table';
+import { ContentCopy } from '@mui/icons-material';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            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.js

@@ -0,0 +1,69 @@
+import { useMemo, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+import { FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Stack, } from '@mui/material';
+const Example = () => {
+    const columns = useMemo(
+    //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',
+        },
+    ], []);
+    //demo state
+    const [groupedColumnMode, setGroupedColumnMode] = useState('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, }) => {
+    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)}>
+        <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.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            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;

package/data/examples/enable-column-pinning.js

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+import { MenuItem } from '@mui/material';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'id',
+            enableColumnPinning: false, //disable column pinning for this column
+            header: 'ID',
+            size: 50,
+        },
+        //column definitions...
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'middleName',
+            header: 'Middle Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+            size: 300,
+        },
+        //end
+        {
+            accessorKey: 'city', //this column gets pinned to the right by default because of the initial state,
+            header: 'City',
+        },
+        {
+            accessorKey: 'state', //this column gets pinned left by default because of the the initial state,
+            header: 'State',
+        },
+        {
+            accessorKey: 'country',
+            header: 'Country',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableColumnPinning: true,
+        enableRowActions: true,
+        layoutMode: 'grid-no-grow', //constant column widths
+        renderRowActionMenuItems: () => [<MenuItem key="action">Action</MenuItem>],
+        initialState: {
+            columnPinning: { end: ['city'], start: ['mrt-row-actions', 'state'] },
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-column-resizing.js

@@ -0,0 +1,45 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name', //uses the default width from defaultColumn prop
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'email',
+            header: 'Email Address',
+            size: 250, //increase the width of this column
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+            size: 200, //decrease the width of this column
+            enableResizing: false, //disable resizing for this column
+        },
+        {
+            accessorKey: 'country',
+            header: 'Country',
+            size: 140, //decrease the width of this column
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        //optionally override the default column widths
+        defaultColumn: {
+            maxSize: 400,
+            minSize: 80,
+            size: 160, //default size is usually 180
+        },
+        enableColumnResizing: true,
+        columnResizeMode: 'onChange', //default
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-column-virtualization.js

@@ -0,0 +1,19 @@
+import { useRef } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { fakeColumns, fakeData } from './makeData';
+const Example = () => {
+    //optionally access the underlying virtualizer instance
+    const columnVirtualizerInstanceRef = useRef(null);
+    const table = useMaterialReactTable({
+        columnVirtualizerInstanceRef, //optional
+        columnVirtualizerOptions: { overscan: 4 }, //optionally customize the virtualizer
+        columns: fakeColumns, //500 columns
+        data: fakeData,
+        enableColumnPinning: true,
+        enableColumnResizing: true,
+        enableColumnVirtualization: true,
+        enableRowNumbers: true,
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;