@lminii/material-react-table-mcp 4.0.1

package/data/examples/remote.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_ColumnFiltersState,
+  type MRT_PaginationState,
+  type MRT_SortingState,
+} from 'material-react-table';
+
+type UserApiResponse = {
+  data: Array<User>;
+  meta: {
+    totalRowCount: number;
+  };
+};
+
+type User = {
+  firstName: string;
+  lastName: string;
+  address: string;
+  state: string;
+  phoneNumber: string;
+};
+
+const Example = () => {
+  //data and fetching state
+  const [data, setData] = useState<User[]>([]);
+  const [isError, setIsError] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRefetching, setIsRefetching] = useState(false);
+  const [rowCount, setRowCount] = useState(0);
+
+  //table state
+  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
+    [],
+  );
+  const [globalFilter, setGlobalFilter] = useState('');
+  const [sorting, setSorting] = useState<MRT_SortingState>([]);
+  const [pagination, setPagination] = useState<MRT_PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  //if you want to avoid useEffect, look at the React Query example instead
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!data.length) {
+        setIsLoading(true);
+      } else {
+        setIsRefetching(true);
+      }
+
+      const url = new URL('/api/data', location.origin);
+      url.searchParams.set(
+        'start',
+        `${pagination.pageIndex * pagination.pageSize}`,
+      );
+      url.searchParams.set('size', `${pagination.pageSize}`);
+      url.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
+      url.searchParams.set('globalFilter', globalFilter ?? '');
+      url.searchParams.set('sorting', JSON.stringify(sorting ?? []));
+
+      try {
+        const response = await fetch(url.href);
+        const json = (await response.json()) as UserApiResponse;
+        setData(json.data);
+        setRowCount(json.meta.totalRowCount);
+      } catch (error) {
+        setIsError(true);
+        console.error(error);
+        return;
+      }
+      setIsError(false);
+      setIsLoading(false);
+      setIsRefetching(false);
+    };
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    columnFilters, //re-fetch when column filters change
+    globalFilter, //re-fetch when global filter changes
+    pagination.pageIndex, //re-fetch when page index changes
+    pagination.pageSize, //re-fetch when page size changes
+    sorting, //re-fetch when sorting changes
+  ]);
+
+  const columns = useMemo<MRT_ColumnDef<User>[]>(
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      //column definitions...
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+      {
+        accessorKey: 'phoneNumber',
+        header: 'Phone Number',
+      },
+      //end
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableRowSelection: true,
+    getRowId: (row) => row.phoneNumber,
+    initialState: { showColumnFilters: true },
+    manualFiltering: true,
+    manualPagination: true,
+    manualSorting: true,
+    muiToolbarAlertBannerProps: isError
+      ? {
+          color: 'error',
+          children: 'Error loading data',
+        }
+      : undefined,
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    rowCount,
+    state: {
+      columnFilters,
+      globalFilter,
+      isLoading,
+      pagination,
+      showAlertBanner: isError,
+      showProgressBars: isRefetching,
+      sorting,
+    },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

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

@@ -0,0 +1,54 @@
+import { useMemo, useState } from 'react';
+import { MaterialReactTable } 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 } from './makeData';
+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 [data, setData] = useState(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-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.js

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, MRT_ActionMenuItem, } from 'material-react-table';
+import { data } from './makeData';
+import { Edit, Delete } from '@mui/icons-material';
+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',
+        },
+    ], []);
+    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/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.js

@@ -0,0 +1,74 @@
+import { useMemo, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+//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(
+    //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',
+        },
+    ], []);
+    //optionally, you can manage the row selection state yourself
+    const [rowSelection, setRowSelection] = useState({});
+    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/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.js

@@ -0,0 +1,122 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { makeData } from './makeData';
+const Example = () => {
+    const columns = useMemo(
+    //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',
+        },
+    ], []);
+    //optionally access the underlying virtualizer instance
+    const rowVirtualizerInstanceRef = useRef(null);
+    const [data, setData] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [sorting, setSorting] = useState([]);
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            setData(makeData(10000));
+            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;