@mini_7/material-react-table-mcp 4.0.0

package/data/examples/mui-theme.tsx

@@ -0,0 +1,136 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+
+type Person = {
+  firstName: string;
+  lastName: string;
+  address: string;
+  city: string;
+  state: string;
+};
+
+//column definitions...
+const columns: MRT_ColumnDef<Person>[] = [
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+  },
+  {
+    accessorKey: 'address',
+    header: 'Address',
+  },
+  {
+    accessorKey: 'city',
+    header: 'City',
+  },
+  {
+    accessorKey: 'state',
+    header: 'State',
+  },
+];
+//end
+
+//data definitions...
+const data = [
+  {
+    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 Example = () => {
+  const globalTheme = useTheme(); //(optional) if you already have a theme defined in your app root, you can import here
+
+  const tableTheme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: globalTheme.palette.mode, //let's use the same dark/light mode as the global theme
+          primary: globalTheme.palette.secondary, //swap in the secondary color as the primary for the table
+          info: {
+            main: 'rgb(255,122,0)', //add in a custom color for the toolbar alert background stuff
+          },
+          background: {
+            default:
+              globalTheme.palette.mode === 'light'
+                ? 'rgb(254,255,244)' //random light yellow color for the background in light mode
+                : '#000', //pure black table in dark mode for fun
+          },
+        },
+        typography: {
+          button: {
+            textTransform: 'none', //customize typography styles for all buttons in table by default
+            fontSize: '1.2rem',
+          },
+        },
+        components: {
+          MuiTooltip: {
+            styleOverrides: {
+              tooltip: {
+                fontSize: '1.1rem', //override to make tooltip font size larger
+              },
+            },
+          },
+          MuiSwitch: {
+            styleOverrides: {
+              thumb: {
+                color: 'pink', //change the color of the switch thumb in the columns show/hide menu to pink
+              },
+            },
+          },
+        },
+      }),
+    [globalTheme],
+  );
+
+  return (
+    <ThemeProvider theme={tableTheme}>
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        enableRowSelection
+        enableColumnOrdering
+        enableColumnPinning
+      />
+    </ThemeProvider>
+  );
+};
+
+export default Example;

package/data/examples/multi-sorting.tsx

@@ -0,0 +1,58 @@
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+import { Button } from '@mui/material';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+    sortDescFirst: false, //sort first name in ascending order by default on first sort click (default for non-numeric columns)
+  },
+  //column definitions...
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+  },
+  {
+    accessorKey: 'city',
+    header: 'City',
+  },
+  {
+    accessorKey: 'state',
+    header: 'State',
+  },
+  //end
+  {
+    accessorKey: 'salary',
+    header: 'Salary',
+    sortDescFirst: true, //sort salary in descending order by default on first sort click (default for numeric columns)
+  },
+];
+
+const Example = () => {
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    isMultiSortEvent: () => true, //now no need to hold `shift` key to multi-sort
+    maxMultiSortColCount: 3, //prevent more than 3 columns from being sorted at once
+    initialState: {
+      sorting: [
+        { id: 'state', desc: false }, //sort by state in ascending order by default
+        { id: 'city', desc: true }, //then sort by city in descending order by default
+      ],
+    },
+    renderTopToolbarCustomActions: ({ table }) => (
+      <Button onClick={() => table.resetSorting(true)}>
+        Clear All Sorting
+      </Button>
+    ),
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/persistent-state.tsx

@@ -0,0 +1,184 @@
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@mui/material';
+import {
+  MaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_ColumnFiltersState,
+  type MRT_DensityState,
+  type MRT_SortingState,
+  type MRT_VisibilityState,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+
+//column definitions...
+const columns: MRT_ColumnDef<Person>[] = [
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+  },
+  {
+    accessorKey: 'city',
+    header: 'City',
+  },
+  {
+    accessorKey: 'state',
+    header: 'State',
+  },
+  {
+    accessorKey: 'salary',
+    header: 'Salary',
+  },
+];
+//end
+
+const Example = () => {
+  const isFirstRender = useRef(true);
+
+  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
+    [],
+  );
+  const [columnVisibility, setColumnVisibility] = useState<MRT_VisibilityState>(
+    {},
+  );
+  const [density, setDensity] = useState<MRT_DensityState>('comfortable');
+  const [globalFilter, setGlobalFilter] = useState<string | undefined>(
+    undefined,
+  );
+  const [showGlobalFilter, setShowGlobalFilter] = useState(false);
+  const [showColumnFilters, setShowColumnFilters] = useState(false);
+  const [sorting, setSorting] = useState<MRT_SortingState>([]);
+
+  //load state from local storage
+  useEffect(() => {
+    const columnFilters = sessionStorage.getItem('mrt_columnFilters_table_1');
+    const columnVisibility = sessionStorage.getItem(
+      'mrt_columnVisibility_table_1',
+    );
+    const density = sessionStorage.getItem('mrt_density_table_1');
+    const globalFilter = sessionStorage.getItem('mrt_globalFilter_table_1');
+    const showGlobalFilter = sessionStorage.getItem(
+      'mrt_showGlobalFilter_table_1',
+    );
+    const showColumnFilters = sessionStorage.getItem(
+      'mrt_showColumnFilters_table_1',
+    );
+    const sorting = sessionStorage.getItem('mrt_sorting_table_1');
+
+    if (columnFilters) {
+      setColumnFilters(JSON.parse(columnFilters));
+    }
+    if (columnVisibility) {
+      setColumnVisibility(JSON.parse(columnVisibility));
+    }
+    if (density) {
+      setDensity(JSON.parse(density));
+    }
+    if (globalFilter) {
+      setGlobalFilter(JSON.parse(globalFilter) || undefined);
+    }
+    if (showGlobalFilter) {
+      setShowGlobalFilter(JSON.parse(showGlobalFilter));
+    }
+    if (showColumnFilters) {
+      setShowColumnFilters(JSON.parse(showColumnFilters));
+    }
+    if (sorting) {
+      setSorting(JSON.parse(sorting));
+    }
+    isFirstRender.current = false;
+  }, []);
+
+  //save states to local storage
+  useEffect(() => {
+    if (isFirstRender.current) return;
+    sessionStorage.setItem(
+      'mrt_columnFilters_table_1',
+      JSON.stringify(columnFilters),
+    );
+  }, [columnFilters]);
+
+  useEffect(() => {
+    if (isFirstRender.current) return;
+    sessionStorage.setItem(
+      'mrt_columnVisibility_table_1',
+      JSON.stringify(columnVisibility),
+    );
+  }, [columnVisibility]);
+
+  useEffect(() => {
+    if (isFirstRender.current) return;
+    sessionStorage.setItem('mrt_density_table_1', JSON.stringify(density));
+  }, [density]);
+
+  useEffect(() => {
+    if (isFirstRender.current) return;
+    sessionStorage.setItem(
+      'mrt_globalFilter_table_1',
+      JSON.stringify(globalFilter ?? ''),
+    );
+  }, [globalFilter]);
+
+  useEffect(() => {
+    if (isFirstRender.current) return;
+    sessionStorage.setItem(
+      'mrt_showGlobalFilter_table_1',
+      JSON.stringify(showGlobalFilter),
+    );
+  }, [showGlobalFilter]);
+
+  useEffect(() => {
+    if (isFirstRender.current) return;
+    sessionStorage.setItem(
+      'mrt_showColumnFilters_table_1',
+      JSON.stringify(showColumnFilters),
+    );
+  }, [showColumnFilters]);
+
+  useEffect(() => {
+    if (isFirstRender.current) return;
+    sessionStorage.setItem('mrt_sorting_table_1', JSON.stringify(sorting));
+  }, [sorting]);
+
+  const resetState = () => {
+    sessionStorage.removeItem('mrt_columnFilters_table_1');
+    sessionStorage.removeItem('mrt_columnVisibility_table_1');
+    sessionStorage.removeItem('mrt_density_table_1');
+    sessionStorage.removeItem('mrt_globalFilter_table_1');
+    sessionStorage.removeItem('mrt_showGlobalFilter_table_1');
+    sessionStorage.removeItem('mrt_showColumnFilters_table_1');
+    sessionStorage.removeItem('mrt_sorting_table_1');
+    window.location.reload();
+  };
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      onColumnFiltersChange={setColumnFilters}
+      onColumnVisibilityChange={setColumnVisibility}
+      onDensityChange={setDensity}
+      onGlobalFilterChange={setGlobalFilter}
+      onShowColumnFiltersChange={setShowColumnFilters}
+      onShowGlobalFilterChange={setShowGlobalFilter}
+      onSortingChange={setSorting}
+      state={{
+        columnFilters,
+        columnVisibility,
+        density,
+        globalFilter,
+        showColumnFilters,
+        showGlobalFilter,
+        sorting,
+      }}
+      renderTopToolbarCustomActions={() => (
+        <Button onClick={resetState}>Reset State</Button>
+      )}
+    />
+  );
+};
+
+export default Example;

package/data/examples/react-query.tsx

@@ -0,0 +1,182 @@
+import { lazy, Suspense, useMemo, useState } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_ColumnFiltersState,
+  type MRT_PaginationState,
+  type MRT_SortingState,
+} from 'material-react-table';
+import { IconButton, Tooltip } from '@mui/material';
+import RefreshIcon from '@mui/icons-material/Refresh';
+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;
+};
+
+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,
+  });
+
+  //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);
+
+      //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
+  });
+
+  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',
+      },
+      {
+        accessorFn: (row) => new Date(row.lastLogin),
+        id: 'lastLogin',
+        header: 'Last Login',
+        Cell: ({ cell }) => new Date(cell.getValue<Date>()).toLocaleString(),
+        filterFn: 'greaterThan',
+        filterVariant: 'date',
+        enableGlobalFilter: false,
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    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
+    muiToolbarAlertBannerProps: isError
+      ? {
+          color: 'error',
+          children: 'Error loading data',
+        }
+      : undefined,
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    renderTopToolbarCustomActions: () => (
+      <Tooltip arrow title="Refresh Data">
+        <IconButton onClick={() => refetch()}>
+          <RefreshIcon />
+        </IconButton>
+      </Tooltip>
+    ),
+    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>
+  );
+}

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;