@mini_7/material-react-table-mcp 4.0.0 → 4.0.1

package/data/examples/external-toolbar.js

@@ -0,0 +1,82 @@
+import { MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToolbarAlertBanner, useMaterialReactTable, MRT_TableContainer, } from 'material-react-table';
+import { IconButton, Box, Button, Typography, Tooltip } from '@mui/material';
+import PrintIcon from '@mui/icons-material/Print';
+import { data } from './makeData';
+const columns = [
+    {
+        accessorKey: 'firstName',
+        header: 'First Name',
+    },
+    {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+    },
+    {
+        accessorKey: 'age',
+        header: 'Age',
+    },
+    {
+        accessorKey: 'salary',
+        header: 'Salary',
+    },
+];
+const Example = () => {
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableRowSelection: true,
+        initialState: { showGlobalFilter: true },
+    });
+    return (<Box sx={{ border: 'gray 2px dashed', padding: '16px' }}>
+      {/* Our Custom External Top Toolbar */}
+      <Box sx={(theme) => ({
+            display: 'flex',
+            backgroundColor: 'inherit',
+            borderRadius: '4px',
+            flexDirection: 'row',
+            gap: '16px',
+            justifyContent: 'space-between',
+            padding: '24px 16px',
+            '@media max-width: 768px': {
+                flexDirection: 'column',
+            },
+        })}>
+        <Box>
+          <Button color="primary" onClick={() => {
+            alert('Add User');
+        }} variant="contained">
+            Create New Account
+          </Button>
+        </Box>
+        <MRT_GlobalFilterTextField table={table}/>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <MRT_ToggleFiltersButton table={table}/>
+          <MRT_ShowHideColumnsButton table={table}/>
+          <MRT_ToggleDensePaddingButton table={table}/>
+          <Tooltip title="Print">
+            <IconButton onClick={() => window.print()}>
+              <PrintIcon />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      </Box>
+      {/* Some Page Content */}
+      <Typography sx={{
+            p: '16px 4px',
+        }}>
+        {"Hey I'm some page content. I'm just one of your normal components between your custom toolbar and the MRT Table below"}
+      </Typography>
+      {/* The MRT Table with no toolbars built-in */}
+      <MRT_TableContainer table={table}/>
+      {/* Our Custom Bottom Toolbar */}
+      <Box>
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <MRT_TablePagination table={table}/>
+        </Box>
+        <Box sx={{ display: 'grid', width: '100%' }}>
+          <MRT_ToolbarAlertBanner stackAlertBanner table={table}/>
+        </Box>
+      </Box>
+    </Box>);
+};
+export default Example;

package/data/examples/font-awesome-icons.js

@@ -0,0 +1,62 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowDownWideShort, faBars, faBarsStaggered, faColumns, faCompress, faEllipsisH, faEllipsisVertical, faExpand, faEyeSlash, faFilter, faFilterCircleXmark, faGripLines, faSearch, faSearchMinus, faSortDown, faThumbTack, } from '@fortawesome/free-solid-svg-icons';
+import '@fortawesome/fontawesome-svg-core/styles.css';
+import { config } from '@fortawesome/fontawesome-svg-core';
+config.autoAddCss = false;
+/**
+ * These are just some of the icons visible in this table's feature set.
+ * If you skip customizing some icons, those particular icons will fallback the the default Material UI icons.
+ */
+const fontAwesomeIcons = {
+    ArrowDownwardIcon: (props) => (<FontAwesomeIcon icon={faSortDown} {...props}/>),
+    ClearAllIcon: () => <FontAwesomeIcon icon={faBarsStaggered}/>,
+    DensityLargeIcon: () => <FontAwesomeIcon icon={faGripLines}/>,
+    DensityMediumIcon: () => <FontAwesomeIcon icon={faBars}/>,
+    DensitySmallIcon: () => <FontAwesomeIcon icon={faBars}/>,
+    DragHandleIcon: () => <FontAwesomeIcon icon={faGripLines}/>,
+    FilterListIcon: (props) => (<FontAwesomeIcon icon={faFilter} {...props}/>),
+    FilterListOffIcon: () => <FontAwesomeIcon icon={faFilterCircleXmark}/>,
+    FullscreenExitIcon: () => <FontAwesomeIcon icon={faCompress}/>,
+    FullscreenIcon: () => <FontAwesomeIcon icon={faExpand}/>,
+    SearchIcon: (props) => <FontAwesomeIcon icon={faSearch} {...props}/>,
+    SearchOffIcon: () => <FontAwesomeIcon icon={faSearchMinus}/>,
+    ViewColumnIcon: () => <FontAwesomeIcon icon={faColumns}/>,
+    MoreVertIcon: () => <FontAwesomeIcon icon={faEllipsisVertical}/>,
+    MoreHorizIcon: () => <FontAwesomeIcon icon={faEllipsisH}/>,
+    SortIcon: (props) => (<FontAwesomeIcon icon={faArrowDownWideShort} {...props}/> //props so that style rotation transforms are applied
+    ),
+    PushPinIcon: (props) => (<FontAwesomeIcon icon={faThumbTack} {...props}/> //props so that style rotation transforms are applied
+    ),
+    VisibilityOffIcon: () => <FontAwesomeIcon icon={faEyeSlash}/>,
+};
+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} enableColumnOrdering enableColumnPinning icons={fontAwesomeIcons}/>);
+};
+export default Example;

package/data/examples/infinite-scrolling.js

@@ -0,0 +1,137 @@
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { Typography } from '@mui/material';
+import { QueryClient, QueryClientProvider, useInfiniteQuery, } from '@tanstack/react-query'; //Note: this is TanStack React Query V5
+const columns = [
+    {
+        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(null); //we can get access to the underlying TableContainer element and react to its scroll events
+    const rowVirtualizerInstanceRef = useRef(null); //we can get access to the underlying Virtualizer instance and call its scrollToIndex method
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [globalFilter, setGlobalFilter] = useState();
+    const [sorting, setSorting] = useState([]);
+    const { data, fetchNextPage, isError, isFetching, isLoading } = useInfiniteQuery({
+        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 * 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());
+            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) => {
+        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) => fetchMoreOnBottomReached(event.target), //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-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/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/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;