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

package/data/examples/react-query.js

@@ -0,0 +1,122 @@
+import { lazy, Suspense, useMemo, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } 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
+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: 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({
+        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());
+            return json;
+        },
+        placeholderData: keepPreviousData, //don't go to 0 rows when refetching or paginating to next page
+    });
+    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',
+        },
+        {
+            accessorFn: (row) => new Date(row.lastLogin),
+            id: 'lastLogin',
+            header: 'Last Login',
+            Cell: ({ cell }) => new Date(cell.getValue()).toLocaleString(),
+            filterFn: 'greaterThan',
+            filterVariant: 'date',
+            enableGlobalFilter: false,
+        },
+    ], []);
+    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.js

@@ -0,0 +1,113 @@
+import { useEffect, useMemo, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+const Example = () => {
+    //data and fetching state
+    const [data, setData] = useState([]);
+    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([]);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [sorting, setSorting] = useState([]);
+    const [pagination, setPagination] = useState({
+        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());
+                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(() => [
+        {
+            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;

package/data/examples/row-actions-buttons.js

@@ -0,0 +1,54 @@
+import { useMemo, useState } from 'react';
+import { MaterialReactTable } from 'material-react-table';
+import { Box, IconButton } from '@mui/material';
+import { Edit as EditIcon, Delete as DeleteIcon, Email as EmailIcon, } from '@mui/icons-material';
+import { data as initialData } from './makeData';
+export 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',
+        },
+    ], []);
+    const [data, setData] = useState(initialData);
+    return (<MaterialReactTable columns={columns} data={data} layoutMode="grid" displayColumnDefOptions={{
+            'mrt-row-actions': {
+                size: 180, //if using layoutMode that is not 'semantic', the columns will not auto-size, so you need to set the size manually
+                grow: false,
+            },
+        }} enableRowActions renderRowActions={({ row, table }) => (<Box sx={{ display: 'flex', flexWrap: 'nowrap', gap: '8px' }}>
+          <IconButton color="primary" onClick={() => window.open(`mailto:kevinvandy@mailinator.com?subject=Hello ${row.original.firstName}!`)}>
+            <EmailIcon />
+          </IconButton>
+          <IconButton color="secondary" onClick={() => {
+                table.setEditingRow(row);
+            }}>
+            <EditIcon />
+          </IconButton>
+          <IconButton color="error" onClick={() => {
+                data.splice(row.index, 1); //assuming simple data table
+                setData([...data]);
+            }}>
+            <DeleteIcon />
+          </IconButton>
+        </Box>)}/>);
+};
+export default Example;

package/data/examples/row-actions-menu-items.js

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, MRT_ActionMenuItem, } from 'material-react-table';
+import { data } from './makeData';
+import { Edit, Delete } from '@mui/icons-material';
+export 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} enableRowActions renderRowActionMenuItems={({ row, table }) => [
+            <MRT_ActionMenuItem //or just use a normal MUI MenuItem component
+             icon={<Edit />} key="edit" label="Edit" onClick={() => console.info('Edit')} table={table}/>,
+            <MRT_ActionMenuItem icon={<Delete />} key="delete" label="Delete" onClick={() => console.info('Delete')} table={table}/>,
+        ]}/>);
+};
+export default Example;

package/data/examples/single-row-selection.js

@@ -0,0 +1,74 @@
+import { useMemo, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+//end
+const data = [
+    //data definitions...
+    {
+        userId: '3f25309c-8fa1-470f-811e-cdb082ab9017', //we'll use this as a unique row id
+        firstName: 'Dylan',
+        lastName: 'Murray',
+        age: 22,
+        address: '261 Erdman Ford',
+        city: 'East Daphne',
+        state: 'Kentucky',
+    },
+    {
+        userId: 'be731030-df83-419c-b3d6-9ef04e7f4a9f',
+        firstName: 'Raquel',
+        lastName: 'Kohler',
+        age: 18,
+        address: '769 Dominic Grove',
+        city: 'Columbus',
+        state: 'Ohio',
+    },
+    //end
+];
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'age',
+            header: 'Age',
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+        },
+    ], []);
+    //optionally, you can manage the row selection state yourself
+    const [rowSelection, setRowSelection] = useState({});
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableRowSelection: true,
+        enableMultiRowSelection: false, //use radio buttons instead of checkboxes
+        getRowId: (row) => row.userId, //give each row a more useful id
+        muiTableBodyRowProps: ({ row }) => ({
+            //add onClick to row to select upon clicking anywhere in the row
+            onClick: row.getToggleSelectedHandler(),
+            sx: { cursor: 'pointer' },
+        }),
+        positionToolbarAlertBanner: 'bottom', //move the alert banner to the bottom
+        onRowSelectionChange: setRowSelection, //connect internal row selection state to your own
+        state: { rowSelection }, //pass our managed row selection state to the table to use
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/virtualized.js

@@ -0,0 +1,122 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { makeData } from './makeData';
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+            size: 150,
+        },
+        {
+            accessorKey: 'middleName',
+            header: 'Middle Name',
+            size: 170,
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+            size: 150,
+        },
+        {
+            accessorKey: 'email',
+            header: 'Email Address',
+            size: 300,
+        },
+        {
+            accessorKey: 'phoneNumber',
+            header: 'Phone Number',
+            size: 250,
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+            size: 300,
+        },
+        {
+            accessorKey: 'zipCode',
+            header: 'Zip Code',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+            size: 220,
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+        },
+        {
+            accessorKey: 'country',
+            header: 'Country',
+            size: 350,
+        },
+        {
+            accessorKey: 'petName',
+            header: 'Pet Name',
+        },
+        {
+            accessorKey: 'age',
+            header: 'Age',
+        },
+        {
+            accessorKey: 'salary',
+            header: 'Salary',
+        },
+        {
+            accessorKey: 'dateOfBirth',
+            header: 'Date of Birth',
+        },
+        {
+            accessorKey: 'dateOfJoining',
+            header: 'Date of Joining',
+        },
+        {
+            accessorKey: 'isActive',
+            header: 'Is Active',
+        },
+    ], []);
+    //optionally access the underlying virtualizer instance
+    const rowVirtualizerInstanceRef = useRef(null);
+    const [data, setData] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [sorting, setSorting] = useState([]);
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            setData(makeData(10000));
+            setIsLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        //scroll to the top of the table when the sorting changes
+        try {
+            rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }, [sorting]);
+    const table = useMaterialReactTable({
+        columns,
+        data, //10,000 rows
+        defaultDisplayColumn: { enableResizing: true },
+        enableBottomToolbar: false,
+        enableColumnResizing: true,
+        enableColumnVirtualization: true,
+        enableGlobalFilterModes: true,
+        enablePagination: false,
+        enableColumnPinning: true,
+        enableRowNumbers: true,
+        enableRowVirtualization: true,
+        muiTableContainerProps: { sx: { maxHeight: '600px' } },
+        onSortingChange: setSorting,
+        state: { isLoading, sorting },
+        rowVirtualizerInstanceRef, //optional
+        rowVirtualizerOptions: { overscan: 5 }, //optionally customize the row virtualizer
+        columnVirtualizerOptions: { overscan: 2 }, //optionally customize the column virtualizer
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/dist/data.js

@@ -36,13 +36,28 @@ export const loadReference = (name) => {
         return undefined;
     return readFileSync(file, 'utf8');
 };
-export const loadExample = (id) => {
-    const file = join(dataDir, 'examples', `${id}.tsx`);
+export const loadExample = (id, language = 'ts') => {
+    const ext = language === 'js' ? 'js' : 'tsx';
+    const file = join(dataDir, 'examples', `${id}.${ext}`);
     if (!safeName.test(id) || !existsSync(file))
         return undefined;
     return readFileSync(file, 'utf8');
 };
 const tokenize = (query) => query.toLowerCase().split(/\s+/).filter(Boolean);
+const STEM_SUFFIXES = ['ings', 'ing', 'ed', 'es', 's'];
+const MIN_STEM_LENGTH = 3;
+/**
+ * Strips a common English suffix so e.g. "filtering" and "filters" meet in the
+ * middle at "filter". Leaves words too short to keep a meaningful stem
+ * untouched (e.g. "is", "us").
+ */
+const stem = (word) => {
+    for (const suffix of STEM_SUFFIXES) {
+        if (word.length - suffix.length >= MIN_STEM_LENGTH && word.endsWith(suffix))
+            return word.slice(0, -suffix.length);
+    }
+    return word;
+};
 /** Ranks name matches above description matches; exact and prefix matches first. */
 export const searchApi = (api, query, categories = CATEGORIES, limit = 20) => {
     const terms = tokenize(query);
@@ -76,9 +91,12 @@ export const searchApi = (api, query, categories = CATEGORIES, limit = 20) => {
         .sort((a, b) => b.score - a.score || a.name.localeCompare(b.name))
         .slice(0, limit);
 };
-/** Every term must match the name, title, headings, or description of a document. */
+/**
+ * Every term must match the name, title, headings, or description of a document.
+ * Terms and indexed text are lightly stemmed so e.g. "filters" matches "filtering".
+ */
 export const searchDocs = (index, query, limit = 20, kinds = ['guide', 'reference', 'skill', 'example']) => {
-    const terms = tokenize(query);
+    const terms = tokenize(query).map((term) => ({ term, termStem: stem(term) }));
     if (terms.length === 0)
         return [];
     const docs = [];
@@ -108,15 +126,19 @@ export const searchDocs = (index, query, limit = 20, kinds = ['guide', 'referenc
         if (!kinds.includes(doc.kind))
             continue;
         const name = doc.name.toLowerCase();
+        const nameParts = name.split('-');
+        const nameStem = stem(name);
+        const namePartStems = nameParts.map(stem);
+        const textStem = doc.text.split(/\s+/).map(stem).join(' ');
         let score = 0;
-        for (const term of terms) {
-            if (name === term)
+        for (const { term, termStem } of terms) {
+            if (name === term || nameStem === termStem)
                 score += 100;
-            else if (name.split('-').includes(term))
+            else if (nameParts.includes(term) || namePartStems.includes(termStem))
                 score += 60;
-            else if (name.includes(term))
+            else if (name.includes(term) || nameStem.includes(termStem))
                 score += 40;
-            else if (doc.text.includes(term))
+            else if (doc.text.includes(term) || textStem.includes(termStem))
                 score += 10;
             else {
                 score = 0;

package/dist/index.js

@@ -201,14 +201,18 @@ server.registerTool('get_mrt_reference', {
 }, async ({ page }) => text(loadReference(page) ?? `Unknown page "${page}".`));
 server.registerTool('get_mrt_example', {
     title: 'Get a Material React Table example',
-    description: `Return the full TypeScript source of one of the ${docs.examples.length} runnable docs examples. Call without an id to list every example with the guides that embed it.`,
+    description: `Return the source of one of the ${docs.examples.length} runnable docs examples, as TypeScript or JavaScript. Call without an id to list every example with the guides that embed it.`,
     inputSchema: {
         id: z
             .string()
             .optional()
             .describe('Example id, e.g. "basic", "editing-crud-modal", "virtualized", "remote". Omit to list all examples.'),
+        language: z
+            .enum(['ts', 'js'])
+            .optional()
+            .describe('Source language to return, "ts" or "js". Defaults to "ts".'),
     },
-}, async ({ id }) => {
+}, async ({ id, language }) => {
     if (!id) {
         const lines = docs.examples.map((example) => {
             const where = [
@@ -221,12 +225,20 @@ server.registerTool('get_mrt_example', {
         });
         return text(`Examples:\n${lines.join('\n')}`);
     }
-    const source = loadExample(id);
+    const lang = language ?? 'ts';
+    const source = loadExample(id, lang);
     if (!source) {
-        const suggestions = searchDocs(docs, id, 5, ['example']).map((hit) => hit.name);
-        return text(`Unknown example "${id}".${suggestions.length ? ` Did you mean: ${suggestions.join(', ')}?` : ''} Call get_mrt_example without an id to list them.`);
+        const known = docs.examples.some((example) => example.id === id);
+        if (!known) {
+            const suggestions = searchDocs(docs, id, 5, ['example']).map((hit) => hit.name);
+            return text(`Unknown example "${id}".${suggestions.length ? ` Did you mean: ${suggestions.join(', ')}?` : ''} Call get_mrt_example without an id to list them.`);
+        }
+        return text(`No ${lang} source is available for example "${id}".`);
     }
-    return text(`// examples/${id}/sandbox/src/TS.tsx\n${source}`);
+    const sourceNote = lang === 'js'
+        ? `// examples/${id}/sandbox/src/TS.tsx (JavaScript, types stripped)`
+        : `// examples/${id}/sandbox/src/TS.tsx`;
+    return text(`${sourceNote}\n${source}`);
 });
 const transport = new StdioServerTransport();
 await server.connect(transport);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mini_7/material-react-table-mcp",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "MCP server that lets AI coding agents look up Material React Table V4 table options, column options, state, instance APIs, the V3 to V4 migration guide, and the bundled agent skills.",
   "license": "MIT",
   "author": "Tyler Lee",