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

package/README.md

@@ -15,7 +15,7 @@ It serves the same data as the docs site: the API pages, every feature guide, th
 | `search_mrt_docs` | Find which guide, reference page, skill, or example covers a topic, and which tool returns it. |
 | `get_mrt_guide` | One of the 38 feature guides as Markdown, with its relevant options expanded and its live examples named. Call without a name to list them. |
 | `get_mrt_reference` | The MRT components or MRT hooks reference page. |
-| `get_mrt_example` | The full TypeScript source of one of the 113 docs examples. Call without an id to list them with the guides that embed each one. |
+| `get_mrt_example` | The source of one of the 113 docs examples, as TypeScript or JavaScript. Call without an id to list them with the guides that embed each one. |
 
 ## Setup
 

package/data/examples/advanced.js

@@ -0,0 +1,215 @@
+import { useMemo } from 'react';
+//MRT Imports
+import { MaterialReactTable, useMaterialReactTable, MRT_GlobalFilterTextField, MRT_ToggleFiltersButton, } from 'material-react-table';
+//Material UI Imports
+import { Box, Button, ListItemIcon, MenuItem, Typography, lighten, } from '@mui/material';
+//Icons Imports
+import { AccountCircle, Send } from '@mui/icons-material';
+//Mock Data
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            id: 'employee', //id used to define `group` column
+            header: 'Employee',
+            columns: [
+                {
+                    accessorFn: (row) => `${row.firstName} ${row.lastName}`, //accessorFn used to join multiple data into a single cell
+                    id: 'name', //id is still required when using accessorFn instead of accessorKey
+                    header: 'Name',
+                    size: 250,
+                    Cell: ({ renderedCellValue, row }) => (<Box sx={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '1rem',
+                        }}>
+                <img alt="avatar" height={30} src={row.original.avatar} loading="lazy" style={{ borderRadius: '50%' }}/>
+                {/* using renderedCellValue instead of cell.getValue() preserves filter match highlighting */}
+                <span>{renderedCellValue}</span>
+              </Box>),
+                },
+                {
+                    accessorKey: 'email', //accessorKey used to define `data` column. `id` gets set to accessorKey automatically
+                    enableClickToCopy: true,
+                    filterVariant: 'autocomplete',
+                    header: 'Email',
+                    size: 300,
+                },
+            ],
+        },
+        {
+            id: 'id',
+            header: 'Job Info',
+            columns: [
+                {
+                    accessorKey: 'salary',
+                    // filterVariant: 'range', //if not using filter modes feature, use this instead of filterFn
+                    filterFn: 'between',
+                    header: 'Salary',
+                    size: 200,
+                    //custom conditional format and styling
+                    Cell: ({ cell }) => (<Box component="span" sx={(theme) => ({
+                            backgroundColor: cell.getValue() < 50000
+                                ? theme.palette.error.dark
+                                : cell.getValue() >= 50000 &&
+                                    cell.getValue() < 75000
+                                    ? theme.palette.warning.dark
+                                    : theme.palette.success.dark,
+                            borderRadius: '0.25rem',
+                            color: '#fff',
+                            maxWidth: '9ch',
+                            p: '0.25rem',
+                        })}>
+                {cell.getValue()?.toLocaleString?.('en-US', {
+                            style: 'currency',
+                            currency: 'USD',
+                            minimumFractionDigits: 0,
+                            maximumFractionDigits: 0,
+                        })}
+              </Box>),
+                },
+                {
+                    accessorKey: 'jobTitle', //hey a simple column for once
+                    header: 'Job Title',
+                    size: 350,
+                },
+                {
+                    accessorFn: (row) => new Date(row.startDate), //convert to Date for sorting and filtering
+                    id: 'startDate',
+                    header: 'Start Date',
+                    filterVariant: 'date',
+                    filterFn: 'lessThan',
+                    sortFn: 'datetime',
+                    Cell: ({ cell }) => cell.getValue()?.toLocaleDateString(), //render Date as a string
+                    Header: ({ column }) => <em>{column.columnDef.header}</em>, //custom header markup
+                    muiFilterTextFieldProps: {
+                        sx: {
+                            minWidth: '250px',
+                        },
+                    },
+                },
+            ],
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
+        enableColumnFilterModes: true,
+        enableColumnOrdering: true,
+        enableGrouping: true,
+        enableColumnPinning: true,
+        enableFacetedValues: true,
+        enableRowActions: true,
+        enableRowSelection: true,
+        initialState: {
+            showColumnFilters: true,
+            showGlobalFilter: true,
+            columnPinning: {
+                end: ['mrt-row-actions'],
+                start: ['mrt-row-expand', 'mrt-row-select'],
+            },
+        },
+        paginationDisplayMode: 'pages',
+        positionToolbarAlertBanner: 'bottom',
+        muiSearchTextFieldProps: {
+            size: 'small',
+            variant: 'outlined',
+        },
+        muiPaginationProps: {
+            color: 'secondary',
+            rowsPerPageOptions: [10, 20, 30],
+            shape: 'rounded',
+            variant: 'outlined',
+        },
+        renderDetailPanel: ({ row }) => (<Box sx={{
+                alignItems: 'center',
+                display: 'flex',
+                justifyContent: 'space-around',
+                left: '30px',
+                maxWidth: '1000px',
+                position: 'sticky',
+                width: '100%',
+            }}>
+        <img alt="avatar" height={200} src={row.original.avatar} loading="lazy" style={{ borderRadius: '50%' }}/>
+        <Box sx={{ textAlign: 'center' }}>
+          <Typography variant="h4">Signature Catch Phrase:</Typography>
+          <Typography variant="h1">
+            &quot;{row.original.signatureCatchPhrase}&quot;
+          </Typography>
+        </Box>
+      </Box>),
+        renderRowActionMenuItems: ({ closeMenu }) => [
+            <MenuItem key={0} onClick={() => {
+                    // View profile logic...
+                    closeMenu();
+                }} sx={{ m: 0 }}>
+        <ListItemIcon>
+          <AccountCircle />
+        </ListItemIcon>
+        View Profile
+      </MenuItem>,
+            <MenuItem key={1} onClick={() => {
+                    // Send email logic...
+                    closeMenu();
+                }} sx={{ m: 0 }}>
+        <ListItemIcon>
+          <Send />
+        </ListItemIcon>
+        Send Email
+      </MenuItem>,
+        ],
+        renderTopToolbar: ({ table }) => {
+            const handleDeactivate = () => {
+                table.getSelectedRowModel().flatRows.map((row) => {
+                    alert('deactivating ' + row.getValue('name'));
+                });
+            };
+            const handleActivate = () => {
+                table.getSelectedRowModel().flatRows.map((row) => {
+                    alert('activating ' + row.getValue('name'));
+                });
+            };
+            const handleContact = () => {
+                table.getSelectedRowModel().flatRows.map((row) => {
+                    alert('contact ' + row.getValue('name'));
+                });
+            };
+            return (<Box sx={(theme) => ({
+                    backgroundColor: lighten(theme.palette.background.default, 0.05),
+                    display: 'flex',
+                    gap: '0.5rem',
+                    p: '8px',
+                    justifyContent: 'space-between',
+                })}>
+          <Box sx={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+            {/* import MRT sub-components */}
+            <MRT_GlobalFilterTextField table={table}/>
+            <MRT_ToggleFiltersButton table={table}/>
+          </Box>
+          <Box>
+            <Box sx={{ display: 'flex', gap: '0.5rem' }}>
+              <Button color="error" disabled={!table.getIsSomeRowsSelected()} onClick={handleDeactivate} variant="contained">
+                Deactivate
+              </Button>
+              <Button color="success" disabled={!table.getIsSomeRowsSelected()} onClick={handleActivate} variant="contained">
+                Activate
+              </Button>
+              <Button color="info" disabled={!table.getIsSomeRowsSelected()} onClick={handleContact} variant="contained">
+                Contact
+              </Button>
+            </Box>
+          </Box>
+        </Box>);
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+//Date Picker Imports - these should just be in your Context Provider
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+const ExampleWithLocalizationProvider = () => (
+//App.tsx or AppProviders file
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+    <Example />
+  </LocalizationProvider>);
+export default ExampleWithLocalizationProvider;

package/data/examples/aggregation-and-grouping.js

@@ -0,0 +1,116 @@
+import { useMemo } from 'react';
+import { Box, Stack } from '@mui/material';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+const Example = () => {
+    const averageSalary = useMemo(() => data.reduce((acc, curr) => acc + curr.salary, 0) / data.length, []);
+    const maxAge = useMemo(() => data.reduce((acc, curr) => Math.max(acc, curr.age), 0), []);
+    const columns = useMemo(() => [
+        {
+            header: 'First Name',
+            accessorKey: 'firstName',
+            enableGrouping: false, //do not let this column be grouped
+        },
+        {
+            header: 'Last Name',
+            accessorKey: 'lastName',
+        },
+        {
+            header: 'Age',
+            accessorKey: 'age',
+            aggregationFn: 'max', //show the max age in the group (lots of pre-built aggregationFns to choose from)
+            //required to render an aggregated cell
+            AggregatedCell: ({ cell, table }) => (<>
+            Oldest by{' '}
+            {table.getColumn(cell.row.groupingColumnId ?? '').columnDef.header}:{' '}
+            <Box sx={{ color: 'info.main', display: 'inline', fontWeight: 'bold' }}>
+              {cell.getValue()}
+            </Box>
+          </>),
+            Footer: () => (<Stack>
+            Max Age:
+            <Box sx={{
+                    color: 'warning.main',
+                }}>
+              {Math.round(maxAge)}
+            </Box>
+          </Stack>),
+        },
+        {
+            header: 'Gender',
+            accessorKey: 'gender',
+            //optionally, customize the cell render when this column is grouped. Make the text blue and pluralize the word
+            GroupedCell: ({ cell, row }) => (<Box sx={{ color: 'primary.main' }}>
+            <strong>{cell.getValue()}s </strong> ({row.subRows?.length})
+          </Box>),
+        },
+        {
+            header: 'State',
+            accessorKey: 'state',
+        },
+        {
+            header: 'Salary',
+            accessorKey: 'salary',
+            aggregationFn: 'mean',
+            //required to render an aggregated cell, show the average salary in the group
+            AggregatedCell: ({ cell, table }) => (<>
+            Average by{' '}
+            {table.getColumn(cell.row.groupingColumnId ?? '').columnDef.header}:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell.getValue()?.toLocaleString?.('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 0,
+                })}
+            </Box>
+          </>),
+            //customize normal cell render on normal non-aggregated rows
+            Cell: ({ cell }) => (<>
+            {cell.getValue()?.toLocaleString?.('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 0,
+                })}
+          </>),
+            Footer: () => (<Stack>
+            Average Salary:
+            <Box sx={{
+                    color: 'warning.main',
+                }}>
+              {averageSalary?.toLocaleString?.('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 0,
+                })}
+            </Box>
+          </Stack>),
+        },
+    ], [averageSalary, maxAge]);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        displayColumnDefOptions: {
+            'mrt-row-expand': {
+                enableResizing: true,
+            },
+        },
+        enableColumnResizing: true,
+        enableGrouping: true,
+        enableStickyHeader: true,
+        enableStickyFooter: true,
+        initialState: {
+            density: 'compact',
+            expanded: true, //expand all groups by default
+            grouping: ['state'], //an array of columns to group by by default (can be multiple)
+            pagination: { pageIndex: 0, pageSize: 20 },
+            sorting: [{ id: 'state', desc: false }], //sort by state by default
+        },
+        muiToolbarAlertBannerChipProps: { color: 'primary' },
+        muiTableContainerProps: { sx: { maxHeight: 700 } },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/aggregation-multi.js

@@ -0,0 +1,89 @@
+import { useMemo } from 'react';
+import { Box } from '@mui/material';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+const localeStringOptions = {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+};
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            header: 'First Name',
+            accessorKey: 'firstName',
+        },
+        {
+            header: 'Last Name',
+            accessorKey: 'lastName',
+        },
+        {
+            header: 'Gender',
+            accessorKey: 'gender',
+        },
+        {
+            header: 'State',
+            accessorKey: 'state',
+        },
+        {
+            header: 'Salary',
+            accessorKey: 'salary',
+            aggregationFn: ['count', 'mean', 'median', 'min', 'max'],
+            //required to render an aggregated cell, show the average salary in the group
+            AggregatedCell: ({ cell }) => (<>
+            Count:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell.getValue()?.[0]}
+            </Box>
+            Average:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                    .getValue()?.[1]
+                    ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+            Median:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                    .getValue()?.[2]
+                    ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+            Min:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                    .getValue()?.[3]
+                    ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+            Max:{' '}
+            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
+              {cell
+                    .getValue()?.[4]
+                    ?.toLocaleString?.('en-US', localeStringOptions)}
+            </Box>
+          </>),
+            //customize normal cell render on normal non-aggregated rows
+            Cell: ({ cell }) => (<>
+            {cell
+                    .getValue()
+                    ?.toLocaleString?.('en-US', localeStringOptions)}
+          </>),
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableGrouping: true,
+        enableStickyHeader: true,
+        initialState: {
+            density: 'compact',
+            expanded: true, //expand all groups by default
+            grouping: ['state'], //an array of columns to group by by default (can be multiple)
+            pagination: { pageIndex: 0, pageSize: 20 },
+            sorting: [{ id: 'state', desc: false }], //sort by state by default
+        },
+        muiToolbarAlertBannerChipProps: { color: 'primary' },
+        muiTableContainerProps: { sx: { maxHeight: 700 } },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/alternate-column-filtering.js

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'id',
+            header: 'ID',
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'gender',
+            header: 'Gender',
+            filterFn: 'equals',
+            filterSelectOptions: ['Male', 'Female', 'Other'],
+            filterVariant: 'select',
+        },
+        {
+            accessorKey: 'age',
+            header: 'Age',
+            filterVariant: 'range',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        columnFilterDisplayMode: 'popover',
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/alternate-detail-panel.js

@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { Box, Typography, useMediaQuery } from '@mui/material';
+import { data } from './makeData';
+const Example = () => {
+    const isMobile = useMediaQuery('(max-width: 720px)');
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'id',
+            header: 'ID',
+            size: 50,
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'middleName',
+            header: 'Middle Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        // displayColumnDefOptions: { //built-in now in v2.6.0 when positionExpandColumn is 'last'
+        //   'mrt-row-expand': {
+        //     muiTableHeadCellProps: {
+        //       align: 'right',
+        //     },
+        //     muiTableBodyCellProps: {
+        //       align: 'right',
+        //     },
+        //   },
+        // },
+        enableColumnPinning: isMobile, //alternative
+        initialState: {
+            expanded: true,
+        },
+        state: {
+            columnPinning: isMobile
+                ? { end: ['mrt-row-expand'], start: [] }
+                : { end: [], start: [] }, //alternative
+        },
+        renderDetailPanel: ({ row }) => (<Box sx={{
+                display: 'grid',
+                margin: 'auto',
+                gridTemplateColumns: '1fr 1fr',
+                width: '100%',
+            }}>
+        <Typography>Address: {row.original.address}</Typography>
+        <Typography>City: {row.original.city}</Typography>
+        <Typography>State: {row.original.state}</Typography>
+        <Typography>Country: {row.original.country}</Typography>
+      </Box>),
+        positionExpandColumn: 'last',
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/alternate-pagination.js

@@ -0,0 +1,17 @@
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { columns, data } from './makeData';
+const Example = () => {
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        muiPaginationProps: {
+            color: 'primary',
+            shape: 'rounded',
+            showRowsPerPage: false,
+            variant: 'outlined',
+        },
+        paginationDisplayMode: 'pages',
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/basic.js

@@ -0,0 +1,86 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+//nested data is ok, see accessorKeys in ColumnDef below
+const data = [
+    {
+        name: {
+            firstName: 'John',
+            lastName: 'Doe',
+        },
+        address: '261 Erdman Ford',
+        city: 'East Daphne',
+        state: 'Kentucky',
+    },
+    {
+        name: {
+            firstName: 'Jane',
+            lastName: 'Doe',
+        },
+        address: '769 Dominic Grove',
+        city: 'Columbus',
+        state: 'Ohio',
+    },
+    {
+        name: {
+            firstName: 'Joe',
+            lastName: 'Doe',
+        },
+        address: '566 Brakus Inlet',
+        city: 'South Linda',
+        state: 'West Virginia',
+    },
+    {
+        name: {
+            firstName: 'Kevin',
+            lastName: 'Vandy',
+        },
+        address: '722 Emie Stream',
+        city: 'Lincoln',
+        state: 'Nebraska',
+    },
+    {
+        name: {
+            firstName: 'Joshua',
+            lastName: 'Rolluffs',
+        },
+        address: '32188 Larkin Turnpike',
+        city: 'Omaha',
+        state: 'Nebraska',
+    },
+];
+const Example = () => {
+    //should be memoized or stable
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'name.firstName', //access nested data with dot notation
+            header: 'First Name',
+            size: 150,
+        },
+        {
+            accessorKey: 'name.lastName',
+            header: 'Last Name',
+            size: 150,
+        },
+        {
+            accessorKey: 'address', //normal accessorKey
+            header: 'Address',
+            size: 200,
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+            size: 150,
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+            size: 150,
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;