@lminii/material-react-table-mcp 4.0.1

package/data/examples/lazy-sub-rows.js

@@ -0,0 +1,118 @@
+import { lazy, Suspense, useMemo, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { QueryClient, QueryClientProvider, keepPreviousData, useQuery, } from '@tanstack/react-query'; //note: this is TanStack React Query V5
+const columns = [
+    //column definitions...
+    {
+        accessorKey: 'firstName',
+        header: 'First Name',
+    },
+    {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+    },
+    {
+        accessorKey: 'email',
+        header: 'Email',
+    },
+    {
+        accessorKey: 'state',
+        header: 'State',
+    },
+    //end
+];
+const Example = () => {
+    const [sorting, setSorting] = useState([]);
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize: 10,
+    });
+    const [expanded, setExpanded] = useState({}); //Record<string, boolean> | true
+    //which rows have sub-rows expanded and need their direct sub-rows to be included in the API call
+    const expandedRowIds = useMemo(() => expanded === true
+        ? 'all'
+        : Object.entries(expanded)
+            .filter(([_managerId, isExpanded]) => isExpanded)
+            .map(([managerId]) => managerId), [expanded]);
+    const { data: { data = [], meta } = {}, isError, isRefetching, isLoading, } = useFetchUsers({
+        pagination,
+        sorting,
+        expandedRowIds,
+    });
+    //get data for root rows only (top of the tree data)
+    const rootData = useMemo(() => data.filter((r) => !r.managerId), [data]);
+    const table = useMaterialReactTable({
+        columns,
+        data: rootData,
+        enableExpanding: true, //enable expanding column
+        enableFilters: false,
+        //tell MRT which rows have additional sub-rows that can be fetched
+        getRowCanExpand: (row) => !!row.original.subordinateIds.length, //just some type of boolean
+        //identify rows by the user's id
+        getRowId: (row) => row.id,
+        //if data is delivered in a flat array, MRT can convert it to a tree structure
+        //though it's usually better if the API can construct the nested structure before this point
+        getSubRows: (row) => data.filter((r) => r.managerId === row.id), //parse flat array into tree structure
+        // paginateExpandedRows: false, //the back-end in this example is acting as if this option is false
+        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,
+        onExpandedChange: setExpanded,
+        onPaginationChange: setPagination,
+        onSortingChange: setSorting,
+        rowCount: meta?.totalRowCount ?? 0,
+        state: {
+            expanded,
+            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 = ({ pagination, sorting, expandedRowIds, }) => {
+    return useQuery({
+        queryKey: [
+            'users', //give a unique key for this query
+            {
+                pagination, //refetch when pagination changes
+                sorting, //refetch when sorting changes
+                expandedRowIds,
+            },
+        ],
+        queryFn: async () => {
+            const fetchURL = new URL('/api/treedata', 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('sorting', JSON.stringify(sorting ?? []));
+            fetchURL.searchParams.set('expandedRowIds', expandedRowIds === 'all' ? 'all' : JSON.stringify(expandedRowIds ?? []));
+            //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
+    });
+};

package/data/examples/lazy-sub-rows.tsx

@@ -0,0 +1,190 @@
+import { lazy, Suspense, useMemo, useState } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_PaginationState,
+  type MRT_SortingState,
+  type MRT_ExpandedState,
+} from 'material-react-table';
+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 = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  state: string;
+  managerId: string | null; //row's parent row id
+  subordinateIds: string[]; //or some type of boolean that indicates that there are sub-rows
+};
+
+const columns: MRT_ColumnDef<User>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+  },
+  {
+    accessorKey: 'state',
+    header: 'State',
+  },
+  //end
+];
+
+const Example = () => {
+  const [sorting, setSorting] = useState<MRT_SortingState>([]);
+  const [pagination, setPagination] = useState<MRT_PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [expanded, setExpanded] = useState<MRT_ExpandedState>({}); //Record<string, boolean> | true
+
+  //which rows have sub-rows expanded and need their direct sub-rows to be included in the API call
+  const expandedRowIds: string[] | 'all' = useMemo(
+    () =>
+      expanded === true
+        ? 'all'
+        : Object.entries(expanded)
+            .filter(([_managerId, isExpanded]) => isExpanded)
+            .map(([managerId]) => managerId),
+    [expanded],
+  );
+
+  const {
+    data: { data = [], meta } = {},
+    isError,
+    isRefetching,
+    isLoading,
+  } = useFetchUsers({
+    pagination,
+    sorting,
+    expandedRowIds,
+  });
+
+  //get data for root rows only (top of the tree data)
+  const rootData = useMemo(() => data.filter((r) => !r.managerId), [data]);
+
+  const table = useMaterialReactTable({
+    columns,
+    data: rootData,
+    enableExpanding: true, //enable expanding column
+    enableFilters: false,
+    //tell MRT which rows have additional sub-rows that can be fetched
+    getRowCanExpand: (row) => !!row.original.subordinateIds.length, //just some type of boolean
+    //identify rows by the user's id
+    getRowId: (row) => row.id,
+    //if data is delivered in a flat array, MRT can convert it to a tree structure
+    //though it's usually better if the API can construct the nested structure before this point
+    getSubRows: (row) => data.filter((r) => r.managerId === row.id), //parse flat array into tree structure
+    // paginateExpandedRows: false, //the back-end in this example is acting as if this option is false
+    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,
+    onExpandedChange: setExpanded,
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    rowCount: meta?.totalRowCount ?? 0,
+    state: {
+      expanded,
+      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 = ({
+  pagination,
+  sorting,
+  expandedRowIds,
+}: {
+  pagination: MRT_PaginationState;
+  sorting: MRT_SortingState;
+  expandedRowIds: string[] | 'all';
+}) => {
+  return useQuery<UserApiResponse>({
+    queryKey: [
+      'users', //give a unique key for this query
+      {
+        pagination, //refetch when pagination changes
+        sorting, //refetch when sorting changes
+        expandedRowIds,
+      },
+    ],
+    queryFn: async () => {
+      const fetchURL = new URL('/api/treedata', 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('sorting', JSON.stringify(sorting ?? []));
+      fetchURL.searchParams.set(
+        'expandedRowIds',
+        expandedRowIds === 'all' ? 'all' : JSON.stringify(expandedRowIds ?? []),
+      );
+
+      //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
+  });
+};

package/data/examples/linear-progress.js

@@ -0,0 +1,48 @@
+import { useEffect, useMemo, useState } from 'react';
+import { MaterialReactTable } from 'material-react-table';
+import { data } from './makeData';
+import { Button } from '@mui/material';
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'email',
+            header: 'Email',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+    ], []);
+    const [progress, setProgress] = useState(0);
+    //simulate random progress for demo purposes
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setProgress((oldProgress) => {
+                const newProgress = Math.random() * 20;
+                return Math.min(oldProgress + newProgress, 100);
+            });
+        }, 1000);
+        return () => clearInterval(interval);
+    }, []);
+    return (<MaterialReactTable columns={columns} data={data} muiLinearProgressProps={({ isTopToolbar }) => ({
+            color: 'secondary',
+            variant: 'determinate', //if you want to show exact progress value
+            value: progress, //value between 0 and 100
+            sx: {
+                display: isTopToolbar ? 'block' : 'none', //hide bottom progress bar
+            },
+        })} renderTopToolbarCustomActions={() => (<Button onClick={() => setProgress(0)} variant="contained">
+          Reset
+        </Button>)} state={{ showProgressBars: true }}/>);
+};
+export default Example;

package/data/examples/linear-progress.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useMemo, useState } from 'react';
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import { data, type Person } from './makeData';
+import { Button } from '@mui/material';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'email',
+        header: 'Email',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const [progress, setProgress] = useState(0);
+
+  //simulate random progress for demo purposes
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress((oldProgress) => {
+        const newProgress = Math.random() * 20;
+        return Math.min(oldProgress + newProgress, 100);
+      });
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      muiLinearProgressProps={({ isTopToolbar }) => ({
+        color: 'secondary',
+        variant: 'determinate', //if you want to show exact progress value
+        value: progress, //value between 0 and 100
+        sx: {
+          display: isTopToolbar ? 'block' : 'none', //hide bottom progress bar
+        },
+      })}
+      renderTopToolbarCustomActions={() => (
+        <Button onClick={() => setProgress(0)} variant="contained">
+          Reset
+        </Button>
+      )}
+      state={{ showProgressBars: true }}
+    />
+  );
+};
+
+export default Example;

package/data/examples/loading.js

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { MaterialReactTable } from 'material-react-table';
+const data = [];
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'email',
+            header: 'Email',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+    ], []);
+    return (<MaterialReactTable columns={columns} data={data} state={{ isLoading: true }} muiCircularProgressProps={{
+            color: 'secondary',
+            thickness: 5,
+            size: 55,
+        }} muiSkeletonProps={{
+            animation: 'pulse',
+            height: 28,
+        }}/>);
+};
+export default Example;

package/data/examples/loading.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import { type Person } from './makeData';
+
+const data: Array<Person> = [];
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'email',
+        header: 'Email',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+    ],
+    [],
+    //end
+  );
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      state={{ isLoading: true }}
+      muiCircularProgressProps={{
+        color: 'secondary',
+        thickness: 5,
+        size: 55,
+      }}
+      muiSkeletonProps={{
+        animation: 'pulse',
+        height: 28,
+      }}
+    />
+  );
+};
+
+export default Example;

package/data/examples/localization-i18n-ar.js

@@ -0,0 +1,40 @@
+//Import Material React Table and its Types
+import { MaterialReactTable } from 'material-react-table';
+//Import Material React Table Translations
+import { MRT_Localization_AR } from 'material-react-table/locales/ar';
+//mock data
+import { data } from './makeData';
+const columns = [
+    //column definitions...
+    {
+        accessorKey: 'firstName',
+        header: 'الاسم الأول',
+    },
+    {
+        accessorKey: 'lastName',
+        header: 'اسم العائلة',
+        enableClickToCopy: true,
+    },
+    {
+        accessorKey: 'age',
+        header: 'العمر',
+    },
+    //end
+];
+const Example = () => {
+    return (<MaterialReactTable columns={columns} data={data} defaultColumn={{ size: 250 }} columnResizeDirection="rtl" enableColumnFilterModes enableColumnOrdering enableColumnResizing enableEditing enableColumnPinning enableRowActions enableRowSelection enableSelectAll={false} initialState={{ showColumnFilters: true, showGlobalFilter: true }} localization={MRT_Localization_AR}/>);
+};
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { arSA } from '@mui/material/locale';
+const ExampleWithThemeProvider = () => {
+    const theme = useTheme(); //replace with your theme/createTheme
+    return (
+    //Setting Material UI locale as best practice to result in better accessibility
+    <ThemeProvider theme={createTheme({ ...theme, direction: 'rtl' }, arSA)}>
+      <div style={{ direction: 'rtl' }}>
+        <Example />
+      </div>
+    </ThemeProvider>);
+};
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-ar.tsx

@@ -0,0 +1,65 @@
+//Import Material React Table and its Types
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+
+//Import Material React Table Translations
+import { MRT_Localization_AR } from 'material-react-table/locales/ar';
+
+//mock data
+import { data, type Person } from './makeData';
+
+const columns: MRT_ColumnDef<Person>[] = [
+  //column definitions...
+  {
+    accessorKey: 'firstName',
+    header: 'الاسم الأول',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'اسم العائلة',
+    enableClickToCopy: true,
+  },
+  {
+    accessorKey: 'age',
+    header: 'العمر',
+  },
+  //end
+];
+
+const Example = () => {
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      defaultColumn={{ size: 250 }}
+      columnResizeDirection="rtl"
+      enableColumnFilterModes
+      enableColumnOrdering
+      enableColumnResizing
+      enableEditing
+      enableColumnPinning
+      enableRowActions
+      enableRowSelection
+      enableSelectAll={false}
+      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
+      localization={MRT_Localization_AR}
+    />
+  );
+};
+
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { arSA } from '@mui/material/locale';
+
+const ExampleWithThemeProvider = () => {
+  const theme = useTheme(); //replace with your theme/createTheme
+  return (
+    //Setting Material UI locale as best practice to result in better accessibility
+    <ThemeProvider theme={createTheme({ ...theme, direction: 'rtl' }, arSA)}>
+      <div style={{ direction: 'rtl' }}>
+        <Example />
+      </div>
+    </ThemeProvider>
+  );
+};
+
+export default ExampleWithThemeProvider;

package/data/examples/localization-i18n-az.js

@@ -0,0 +1,38 @@
+//Import Material React Table and its Types
+import { MaterialReactTable } from 'material-react-table';
+//Import Material React Table Translations
+import { MRT_Localization_AZ } from 'material-react-table/locales/az';
+//mock data
+import { data } from './makeData';
+const columns = [
+    //column definitions...
+    {
+        accessorKey: 'firstName',
+        header: 'Ad',
+    },
+    {
+        accessorKey: 'lastName',
+        header: 'Soyad',
+        enableClickToCopy: true,
+    },
+    {
+        accessorKey: 'age',
+        header: 'Yaş',
+    },
+    //end
+];
+const Example = () => {
+    return (<MaterialReactTable columns={columns} data={data} enableColumnFilterModes enableColumnOrdering enableEditing enableColumnPinning enableRowActions enableRowSelection enableSelectAll={false} initialState={{ showColumnFilters: true, showGlobalFilter: true }} localization={MRT_Localization_AZ}/>);
+};
+//App.tsx or similar
+import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { azAZ } from '@mui/material/locale';
+const ExampleWithThemeProvider = () => {
+    const theme = useTheme(); //replace with your theme/createTheme
+    return (
+    //Setting Material UI locale as best practice to result in better accessibility
+    <ThemeProvider theme={createTheme(theme, azAZ)}>
+      <Example />
+    </ThemeProvider>);
+};
+export default ExampleWithThemeProvider;