@lminii/material-react-table-mcp 4.0.1

package/data/examples/infinite-scrolling.tsx

@@ -0,0 +1,208 @@
+import {
+  lazy,
+  Suspense,
+  type UIEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_ColumnFiltersState,
+  type MRT_SortingState,
+  type MRT_RowVirtualizer,
+} from 'material-react-table';
+import { Typography } from '@mui/material';
+import {
+  QueryClient,
+  QueryClientProvider,
+  useInfiniteQuery,
+} from '@tanstack/react-query'; //Note: this is TanStack React Query V5
+
+//Your API response shape will probably be different. Knowing a total row count is important though.
+type UserApiResponse = {
+  data: Array<User>;
+  meta: {
+    totalRowCount: number;
+  };
+};
+
+type User = {
+  firstName: string;
+  lastName: string;
+  address: string;
+  state: string;
+  phoneNumber: string;
+};
+
+const columns: MRT_ColumnDef<User>[] = [
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+  },
+  {
+    accessorKey: 'address',
+    header: 'Address',
+  },
+  {
+    accessorKey: 'state',
+    header: 'State',
+  },
+  {
+    accessorKey: 'phoneNumber',
+    header: 'Phone Number',
+  },
+];
+
+const fetchSize = 25;
+
+const Example = () => {
+  const tableContainerRef = useRef<HTMLDivElement>(null); //we can get access to the underlying TableContainer element and react to its scroll events
+  const rowVirtualizerInstanceRef = useRef<MRT_RowVirtualizer>(null); //we can get access to the underlying Virtualizer instance and call its scrollToIndex method
+
+  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
+    [],
+  );
+  const [globalFilter, setGlobalFilter] = useState<string>();
+  const [sorting, setSorting] = useState<MRT_SortingState>([]);
+
+  const { data, fetchNextPage, isError, isFetching, isLoading } =
+    useInfiniteQuery<UserApiResponse>({
+      queryKey: [
+        'users-list',
+        {
+          columnFilters, //refetch when columnFilters changes
+          globalFilter, //refetch when globalFilter changes
+          sorting, //refetch when sorting changes
+        },
+      ],
+      queryFn: async ({ pageParam }) => {
+        const url = new URL('/api/data', location.origin); // nextjs api route
+        url.searchParams.set('start', `${(pageParam as number) * fetchSize}`);
+        url.searchParams.set('size', `${fetchSize}`);
+        url.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
+        url.searchParams.set('globalFilter', globalFilter ?? '');
+        url.searchParams.set('sorting', JSON.stringify(sorting ?? []));
+
+        const response = await fetch(url.href);
+        const json = (await response.json()) as UserApiResponse;
+        return json;
+      },
+      initialPageParam: 0,
+      getNextPageParam: (_lastGroup, groups) => groups.length,
+      refetchOnWindowFocus: false,
+    });
+
+  const flatData = useMemo(
+    () => data?.pages.flatMap((page) => page.data) ?? [],
+    [data],
+  );
+
+  const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0;
+  const totalFetched = flatData.length;
+
+  //called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table
+  const fetchMoreOnBottomReached = useCallback(
+    (containerRefElement?: HTMLDivElement | null) => {
+      if (containerRefElement) {
+        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+        //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can
+        if (
+          scrollHeight - scrollTop - clientHeight < 400 &&
+          !isFetching &&
+          totalFetched < totalDBRowCount
+        ) {
+          fetchNextPage();
+        }
+      }
+    },
+    [fetchNextPage, isFetching, totalFetched, totalDBRowCount],
+  );
+
+  //scroll to top of table when sorting or filters change
+  useEffect(() => {
+    //scroll to the top of the table when the sorting changes
+    try {
+      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [sorting, columnFilters, globalFilter]);
+
+  //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data
+  useEffect(() => {
+    fetchMoreOnBottomReached(tableContainerRef.current);
+  }, [fetchMoreOnBottomReached]);
+
+  const table = useMaterialReactTable({
+    columns,
+    data: flatData,
+    enablePagination: false,
+    enableRowNumbers: true,
+    enableRowVirtualization: true,
+    manualFiltering: true,
+    manualSorting: true,
+    muiTableContainerProps: {
+      ref: tableContainerRef, //get access to the table container element
+      sx: { maxHeight: '600px' }, //give the table a max height
+      onScroll: (event: UIEvent<HTMLDivElement>) =>
+        fetchMoreOnBottomReached(event.target as HTMLDivElement), //add an event listener to the table container element
+    },
+    muiToolbarAlertBannerProps: isError
+      ? {
+          color: 'error',
+          children: 'Error loading data',
+        }
+      : undefined,
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    onSortingChange: setSorting,
+    renderBottomToolbarCustomActions: () => (
+      <Typography>
+        Fetched {totalFetched} of {totalDBRowCount} total rows.
+      </Typography>
+    ),
+    state: {
+      columnFilters,
+      globalFilter,
+      isLoading,
+      showAlertBanner: isError,
+      showProgressBars: isFetching,
+      sorting,
+    },
+    rowVirtualizerInstanceRef, //get access to the virtualizer instance
+    rowVirtualizerOptions: { overscan: 4 },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+//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>
+  );
+}

package/data/examples/lazy-detail-panel.js

@@ -0,0 +1,164 @@
+import { lazy, Suspense, useMemo, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { Alert, CircularProgress, Stack } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import MinusIcon from '@mui/icons-material/Remove';
+import { QueryClient, QueryClientProvider, keepPreviousData, useQuery, } from '@tanstack/react-query'; //note: this is TanStack React Query V5
+const DetailPanel = ({ row }) => {
+    const { data: userInfo, isLoading, isError, } = useFetchUserInfo({
+        phoneNumber: row.id, //the row id is set to the user's phone number
+    }, {
+        enabled: row.getIsExpanded(),
+    });
+    if (isLoading)
+        return <CircularProgress />;
+    if (isError)
+        return <Alert severity="error">Error Loading User Info</Alert>;
+    const { favoriteMusic, favoriteSong, quote } = userInfo ?? {};
+    return (<Stack sx={{
+            gap: '0.5rem',
+            minHeight: '00px',
+        }}>
+      <div>
+        <b>Favorite Music:</b> {favoriteMusic}
+      </div>
+      <div>
+        <b>Favorite Song:</b> {favoriteSong}
+      </div>
+      <div>
+        <b>Quote:</b> {quote}
+      </div>
+    </Stack>);
+};
+const Example = () => {
+    //manage our own state for stuff we want to pass to the API
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [sorting, setSorting] = useState([]);
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize: 5,
+    });
+    const { data: { data = [], meta } = {}, isError, isRefetching, isLoading, } = useFetchUsers({
+        columnFilters,
+        globalFilter,
+        pagination,
+        sorting,
+    });
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+        },
+        {
+            accessorKey: 'phoneNumber',
+            header: 'Phone Number',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        getRowId: (row) => row.phoneNumber,
+        manualFiltering: true, //turn off built-in client-side filtering
+        manualPagination: true, //turn off built-in client-side pagination
+        manualSorting: true, //turn off built-in client-side sorting
+        muiExpandButtonProps: ({ row }) => ({
+            children: row.getIsExpanded() ? <MinusIcon /> : <AddIcon />,
+        }),
+        muiToolbarAlertBannerProps: isError
+            ? {
+                color: 'error',
+                children: 'Error loading data',
+            }
+            : undefined,
+        onColumnFiltersChange: setColumnFilters,
+        onGlobalFilterChange: setGlobalFilter,
+        onPaginationChange: setPagination,
+        onSortingChange: setSorting,
+        renderDetailPanel: ({ row }) => <DetailPanel row={row}/>,
+        rowCount: meta?.totalRowCount ?? 0,
+        state: {
+            columnFilters,
+            globalFilter,
+            isLoading,
+            pagination,
+            showAlertBanner: isError,
+            showProgressBars: isRefetching,
+            sorting,
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+//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>);
+}
+//fetch user hook
+const useFetchUsers = ({ columnFilters, globalFilter, pagination, sorting, }) => {
+    return useQuery({
+        queryKey: [
+            'users', //give a unique key for this query
+            columnFilters, //refetch when columnFilters changes
+            globalFilter, //refetch when globalFilter changes
+            pagination.pageIndex, //refetch when pagination.pageIndex changes
+            pagination.pageSize, //refetch when pagination.pageSize changes
+            sorting, //refetch when sorting changes
+        ],
+        queryFn: async () => {
+            const fetchURL = new URL('/api/data', location.origin);
+            //read our state and pass it to the API as query params
+            fetchURL.searchParams.set('start', `${pagination.pageIndex * pagination.pageSize}`);
+            fetchURL.searchParams.set('size', `${pagination.pageSize}`);
+            fetchURL.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
+            fetchURL.searchParams.set('globalFilter', globalFilter ?? '');
+            fetchURL.searchParams.set('sorting', JSON.stringify(sorting ?? []));
+            //use whatever fetch library you want, fetch, axios, etc
+            const response = await fetch(fetchURL.href);
+            const json = (await response.json());
+            return json;
+        },
+        placeholderData: keepPreviousData, //don't go to 0 rows when refetching or paginating to next page
+    });
+};
+//fetch more user info hook
+const useFetchUserInfo = (params, options) => {
+    return useQuery({
+        enabled: options.enabled, //only fetch when the detail panel is opened
+        staleTime: 60 * 1000, //don't refetch for 60 seconds
+        queryKey: ['user', params.phoneNumber], //give a unique key for this query for each user fetch
+        queryFn: async () => {
+            const fetchURL = new URL(`/api/moredata/${params.phoneNumber
+                .replaceAll('-', '')
+                .replaceAll('.', '')
+                .replaceAll('(', '')
+                .replaceAll(')', '')}`, location.origin);
+            //use whatever fetch library you want, fetch, axios, etc
+            const response = await fetch(fetchURL.href);
+            const json = (await response.json());
+            return json;
+        },
+    });
+};

package/data/examples/lazy-detail-panel.tsx

@@ -0,0 +1,262 @@
+import { lazy, Suspense, useMemo, useState } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_ColumnFiltersState,
+  type MRT_PaginationState,
+  type MRT_SortingState,
+  type MRT_Row,
+} from 'material-react-table';
+import { Alert, CircularProgress, Stack } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import MinusIcon from '@mui/icons-material/Remove';
+import {
+  QueryClient,
+  QueryClientProvider,
+  keepPreviousData,
+  useQuery,
+} from '@tanstack/react-query'; //note: this is TanStack React Query V5
+
+//Your API response shape will probably be different. Knowing a total row count is important though.
+type UserApiResponse = {
+  data: Array<User>;
+  meta: {
+    totalRowCount: number;
+  };
+};
+
+type User = {
+  firstName: string;
+  lastName: string;
+  address: string;
+  state: string;
+  phoneNumber: string;
+  lastLogin: Date;
+};
+
+type FullUserInfoApiResponse = FullUserInfo;
+
+type FullUserInfo = User & {
+  favoriteMusic: string;
+  favoriteSong: string;
+  quote: string;
+};
+
+const DetailPanel = ({ row }: { row: MRT_Row<User> }) => {
+  const {
+    data: userInfo,
+    isLoading,
+    isError,
+  } = useFetchUserInfo(
+    {
+      phoneNumber: row.id, //the row id is set to the user's phone number
+    },
+    {
+      enabled: row.getIsExpanded(),
+    },
+  );
+  if (isLoading) return <CircularProgress />;
+  if (isError) return <Alert severity="error">Error Loading User Info</Alert>;
+
+  const { favoriteMusic, favoriteSong, quote } = userInfo ?? {};
+
+  return (
+    <Stack
+      sx={{
+        gap: '0.5rem',
+        minHeight: '00px',
+      }}
+    >
+      <div>
+        <b>Favorite Music:</b> {favoriteMusic}
+      </div>
+      <div>
+        <b>Favorite Song:</b> {favoriteSong}
+      </div>
+      <div>
+        <b>Quote:</b> {quote}
+      </div>
+    </Stack>
+  );
+};
+
+const Example = () => {
+  //manage our own state for stuff we want to pass to the API
+  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: 5,
+  });
+
+  const {
+    data: { data = [], meta } = {},
+    isError,
+    isRefetching,
+    isLoading,
+  } = useFetchUsers({
+    columnFilters,
+    globalFilter,
+    pagination,
+    sorting,
+  });
+
+  const columns = useMemo<MRT_ColumnDef<User>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+      {
+        accessorKey: 'phoneNumber',
+        header: 'Phone Number',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    getRowId: (row) => row.phoneNumber,
+    manualFiltering: true, //turn off built-in client-side filtering
+    manualPagination: true, //turn off built-in client-side pagination
+    manualSorting: true, //turn off built-in client-side sorting
+    muiExpandButtonProps: ({ row }) => ({
+      children: row.getIsExpanded() ? <MinusIcon /> : <AddIcon />,
+    }),
+    muiToolbarAlertBannerProps: isError
+      ? {
+          color: 'error',
+          children: 'Error loading data',
+        }
+      : undefined,
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    renderDetailPanel: ({ row }) => <DetailPanel row={row} />,
+    rowCount: meta?.totalRowCount ?? 0,
+    state: {
+      columnFilters,
+      globalFilter,
+      isLoading,
+      pagination,
+      showAlertBanner: isError,
+      showProgressBars: isRefetching,
+      sorting,
+    },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+//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>
+  );
+}
+
+//fetch user hook
+const useFetchUsers = ({
+  columnFilters,
+  globalFilter,
+  pagination,
+  sorting,
+}: {
+  columnFilters: MRT_ColumnFiltersState;
+  globalFilter: string;
+  pagination: MRT_PaginationState;
+  sorting: MRT_SortingState;
+}) => {
+  return useQuery<UserApiResponse>({
+    queryKey: [
+      'users', //give a unique key for this query
+      columnFilters, //refetch when columnFilters changes
+      globalFilter, //refetch when globalFilter changes
+      pagination.pageIndex, //refetch when pagination.pageIndex changes
+      pagination.pageSize, //refetch when pagination.pageSize changes
+      sorting, //refetch when sorting changes
+    ],
+    queryFn: async () => {
+      const fetchURL = new URL('/api/data', location.origin);
+
+      //read our state and pass it to the API as query params
+      fetchURL.searchParams.set(
+        'start',
+        `${pagination.pageIndex * pagination.pageSize}`,
+      );
+      fetchURL.searchParams.set('size', `${pagination.pageSize}`);
+      fetchURL.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
+      fetchURL.searchParams.set('globalFilter', globalFilter ?? '');
+      fetchURL.searchParams.set('sorting', JSON.stringify(sorting ?? []));
+
+      //use whatever fetch library you want, fetch, axios, etc
+      const response = await fetch(fetchURL.href);
+      const json = (await response.json()) as UserApiResponse;
+      return json;
+    },
+    placeholderData: keepPreviousData, //don't go to 0 rows when refetching or paginating to next page
+  });
+};
+
+//fetch more user info hook
+const useFetchUserInfo = (
+  params: { phoneNumber: string },
+  options: { enabled: boolean },
+) => {
+  return useQuery<FullUserInfoApiResponse>({
+    enabled: options.enabled, //only fetch when the detail panel is opened
+    staleTime: 60 * 1000, //don't refetch for 60 seconds
+    queryKey: ['user', params.phoneNumber], //give a unique key for this query for each user fetch
+    queryFn: async () => {
+      const fetchURL = new URL(
+        `/api/moredata/${params.phoneNumber
+          .replaceAll('-', '')
+          .replaceAll('.', '')
+          .replaceAll('(', '')
+          .replaceAll(')', '')}`,
+        location.origin,
+      );
+
+      //use whatever fetch library you want, fetch, axios, etc
+      const response = await fetch(fetchURL.href);
+      const json = (await response.json()) as FullUserInfoApiResponse;
+      return json;
+    },
+  });
+};