@mini_7/material-react-table-mcp 4.0.0

package/data/examples/customize-table-styles.tsx

@@ -0,0 +1,100 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+import { darken, lighten, useTheme } from '@mui/material';
+
+const Example = () => {
+  const theme = useTheme();
+
+  //light or dark green
+  const baseBackgroundColor =
+    theme.palette.mode === 'dark'
+      ? 'rgba(3, 44, 43, 1)'
+      : 'rgba(244, 255, 233, 1)';
+
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'id',
+        header: 'ID',
+        size: 100,
+        enableColumnFilter: false,
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'middleName',
+        header: 'Middle Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+        size: 300,
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableColumnResizing: true,
+    enableRowPinning: true,
+    enableRowSelection: true,
+    muiTablePaperProps: {
+      elevation: 0,
+      sx: {
+        borderRadius: '0',
+      },
+    },
+    muiTableBodyProps: {
+      sx: (theme) => ({
+        '& tr:nth-of-type(odd):not([data-selected="true"]):not([data-pinned="true"]) > td':
+          {
+            backgroundColor: darken(baseBackgroundColor, 0.1),
+          },
+        '& tr:nth-of-type(odd):not([data-selected="true"]):not([data-pinned="true"]):hover > td':
+          {
+            backgroundColor: darken(baseBackgroundColor, 0.2),
+          },
+        '& tr:nth-of-type(even):not([data-selected="true"]):not([data-pinned="true"]) > td':
+          {
+            backgroundColor: lighten(baseBackgroundColor, 0.1),
+          },
+        '& tr:nth-of-type(even):not([data-selected="true"]):not([data-pinned="true"]):hover > td':
+          {
+            backgroundColor: darken(baseBackgroundColor, 0.2),
+          },
+      }),
+    },
+    mrtTheme: (theme) => ({
+      baseBackgroundColor: baseBackgroundColor,
+      draggingBorderColor: theme.palette.secondary.main,
+    }),
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/disable-column-actions.tsx

@@ -0,0 +1,37 @@
+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: 'id',
+        enableColumnActions: false,
+        header: 'ID',
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/disable-column-hiding.tsx

@@ -0,0 +1,90 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+
+const Example = () => {
+  const columns = useMemo(
+    () =>
+      [
+        {
+          accessorKey: 'firstName',
+          enableHiding: false,
+          header: 'First Name',
+        },
+        {
+          accessorKey: 'lastName',
+          enableHiding: false,
+          header: 'Last Name',
+        },
+        {
+          accessorKey: 'address',
+          header: 'Address',
+        },
+        {
+          accessorKey: 'city',
+          header: 'City',
+        },
+        {
+          accessorKey: 'state',
+          header: 'State',
+        },
+      ] as MRT_ColumnDef<(typeof data)[0]>[],
+    [],
+  );
+
+  const data = useMemo(
+    () => [
+      //data definitions...
+      {
+        firstName: 'Dylan',
+        lastName: 'Murray',
+        address: '261 Erdman Ford',
+        city: 'East Daphne',
+        state: 'Kentucky',
+      },
+      {
+        firstName: 'Raquel',
+        lastName: 'Kohler',
+        address: '769 Dominic Grove',
+        city: 'Columbus',
+        state: 'Ohio',
+      },
+      {
+        firstName: 'Ervin',
+        lastName: 'Reinger',
+        address: '566 Brakus Inlet',
+        city: 'South Linda',
+        state: 'West Virginia',
+      },
+      {
+        firstName: 'Brittany',
+        lastName: 'McCullough',
+        address: '722 Emie Stream',
+        city: 'Lincoln',
+        state: 'Nebraska',
+      },
+      {
+        firstName: 'Branson',
+        lastName: 'Frami',
+        address: '32188 Larkin Turnpike',
+        city: 'Charleston',
+        state: 'South Carolina',
+      },
+      //end
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    initialState: { columnVisibility: { address: false } },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/disable-density-toggle.tsx

@@ -0,0 +1,49 @@
+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(
+    //column definitions...
+    () =>
+      [
+        {
+          accessorKey: 'firstName',
+          header: 'First Name',
+        },
+        {
+          accessorKey: 'lastName',
+          header: 'Last Name',
+        },
+        {
+          accessorKey: 'address',
+          header: 'Address',
+        },
+        {
+          accessorKey: 'city',
+          header: 'City',
+        },
+        {
+          accessorKey: 'state',
+          header: 'State',
+        },
+      ] as MRT_ColumnDef<Person>[],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableDensityToggle: false,
+    initialState: { density: 'compact' },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/dynamic-columns.tsx

@@ -0,0 +1,189 @@
+import { lazy, Suspense, useMemo, useState } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_ColumnFiltersState,
+  type MRT_PaginationState,
+  type MRT_SortingState,
+  // type MRT_ColumnOrderState,
+} from 'material-react-table';
+import { IconButton, Tooltip } from '@mui/material';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import {
+  keepPreviousData,
+  QueryClient,
+  QueryClientProvider,
+  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;
+};
+
+const columnNames = {
+  firstName: 'First Name',
+  lastName: 'Last Name',
+  address: 'Address',
+  state: 'State',
+  phoneNumber: 'Phone Number',
+  lastLogin: 'Last Login',
+} as const;
+
+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: 10,
+  });
+
+  //if using dynamic columns that are loaded after table instance creation, we will need to manage the column order state ourselves
+  //UPDATE: No longer needed as of v2.10.0
+  // const [columnOrder, setColumnOrder] = useState<MRT_ColumnOrderState>([]);
+
+  //consider storing this code in a custom hook (i.e useFetchUsers)
+  const {
+    data: { data = [], meta } = {}, //your data and api response will probably be different
+    isError,
+    isRefetching,
+    isLoading,
+    refetch,
+  } = useQuery<UserApiResponse>({
+    queryKey: [
+      'users-list',
+      {
+        columnFilters, //refetch when columnFilters changes
+        globalFilter, //refetch when globalFilter changes
+        pagination, //refetch when pagination changes
+        sorting, //refetch when sorting changes
+      },
+    ],
+    queryFn: async () => {
+      const fetchURL = new URL('/api/data', location.origin); // nextjs api route
+
+      //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
+  });
+
+  //create columns from data
+  const columns = useMemo<MRT_ColumnDef<User>[]>(
+    () =>
+      data.length
+        ? Object.keys(data[0]).map((columnId) => ({
+            header: columnNames[columnId as keyof User] ?? columnId,
+            accessorKey: columnId,
+            id: columnId,
+          }))
+        : [],
+    [data],
+  );
+
+  //UPDATE: No longer needed as of v2.10.0
+  // useEffect(() => {
+  //   //if using dynamic columns that are loaded after table instance creation, we will need to set the column order state ourselves
+  //   setColumnOrder(columns.map((column) => column.id!));
+  // }, [columns]);
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableRowSelection: true,
+    initialState: { showColumnFilters: true },
+    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
+    //give loading spinner somewhere to go while loading
+    muiTableBodyProps: {
+      children: isLoading ? (
+        <tr style={{ height: '200px' }}>
+          <td />
+        </tr>
+      ) : undefined,
+    },
+    muiToolbarAlertBannerProps: isError
+      ? {
+          color: 'error',
+          children: 'Error loading data',
+        }
+      : undefined,
+    onColumnFiltersChange: setColumnFilters,
+    // onColumnOrderChange: setColumnOrder,
+    onGlobalFilterChange: setGlobalFilter,
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    renderTopToolbarCustomActions: () => (
+      <Tooltip arrow title="Refresh Data">
+        <IconButton onClick={() => refetch()}>
+          <RefreshIcon />
+        </IconButton>
+      </Tooltip>
+    ),
+    rowCount: meta?.totalRowCount ?? 0,
+    state: {
+      columnFilters,
+      // columnOrder,
+      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>
+  );
+}