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

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

@@ -0,0 +1,69 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { useTheme } from '@mui/material/styles';
+import { LineChart } from '@mui/x-charts/LineChart';
+import { data } from './makeData';
+const Example = () => {
+    const theme = useTheme();
+    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,
+        initialState: { expanded: { 0: true } },
+        muiTableBodyRowProps: {
+            sx: {
+                '.Mui-TableBodyCell-DetailPanel': {
+                    backgroundColor: theme.palette.mode === 'dark'
+                        ? theme.palette.grey[900]
+                        : theme.palette.grey[100],
+                },
+            },
+        },
+        renderDetailPanel: ({ row }) => (<LineChart xAxis={[
+                {
+                    data: row.original.gamesPlayed,
+                    label: 'Games Played',
+                    valueFormatter: (value) => `#${value}`,
+                    tickLabelInterval: (value) => value % 1 === 0,
+                },
+            ]} yAxis={[{ min: 0, max: 60 }]} series={[
+                {
+                    color: theme.palette.primary.dark,
+                    data: row.original.points,
+                    label: 'Points',
+                },
+                {
+                    color: theme.palette.secondary.main,
+                    data: row.original.assists,
+                    label: 'Assists',
+                },
+                {
+                    color: theme.palette.error.main,
+                    data: row.original.turnovers,
+                    label: 'Turnovers',
+                },
+            ]} height={250}/>),
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/column-actions-space.js

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'id',
+            header: 'ID',
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        muiTableHeadCellProps: {
+            sx: {
+                '& .Mui-TableHeadCell-Content': {
+                    justifyContent: 'space-between',
+                },
+            },
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/column-alignment.js

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+            size: 100,
+            muiTableHeadCellProps: {
+                align: 'center',
+            },
+            muiTableBodyCellProps: {
+                align: 'center',
+            },
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+            size: 100,
+            muiTableHeadCellProps: {
+                align: 'center',
+            },
+            muiTableBodyCellProps: {
+                align: 'center',
+            },
+        },
+        {
+            accessorKey: 'age',
+            header: 'Age',
+            muiTableHeadCellProps: {
+                align: 'right',
+            },
+            muiTableBodyCellProps: {
+                align: 'right',
+            },
+        },
+        {
+            accessorKey: 'salary',
+            header: 'Salary',
+            muiTableHeadCellProps: {
+                align: 'right',
+            },
+            muiTableBodyCellProps: {
+                align: 'right',
+            },
+            Cell: ({ cell }) => cell
+                .getValue()
+                .toLocaleString('en-US', { style: 'currency', currency: 'USD' }),
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/custom-column-actions.js

@@ -0,0 +1,74 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { Divider, MenuItem } from '@mui/material';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'id',
+            header: 'ID',
+            renderColumnActionsMenuItems: ({ closeMenu }) => [
+                <MenuItem key={1} onClick={() => {
+                        console.log('Item 1 clicked');
+                        closeMenu();
+                    }}>
+            Item 1
+          </MenuItem>,
+                <MenuItem key={2} onClick={() => {
+                        console.log('Item 2 clicked');
+                        closeMenu();
+                    }}>
+            Item 2
+          </MenuItem>,
+            ],
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+            renderColumnActionsMenuItems: ({ closeMenu, internalColumnMenuItems, }) => [
+                ...internalColumnMenuItems,
+                <Divider key="divider-1"/>,
+                <MenuItem key={'item-1'} onClick={() => {
+                        console.log('Item 1 clicked');
+                        closeMenu();
+                    }}>
+            Item 1
+          </MenuItem>,
+                <MenuItem key={'item-2'} onClick={() => {
+                        console.log('Item 2 clicked');
+                        closeMenu();
+                    }}>
+            Item 2
+          </MenuItem>,
+            ],
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+            renderColumnActionsMenuItems: ({ closeMenu, internalColumnMenuItems, }) => [
+                <MenuItem key={'item-1'} onClick={() => {
+                        console.log('Item 1 clicked');
+                        closeMenu();
+                    }}>
+            Item 1
+          </MenuItem>,
+                <MenuItem key={'item-2'} onClick={() => {
+                        console.log('Item 2 clicked');
+                        closeMenu();
+                    }}>
+            Item 2
+          </MenuItem>,
+                <Divider key="divider-1"/>,
+                ...internalColumnMenuItems.splice(0, 3),
+            ],
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        //or you could define the menu items here for all columns
+        // renderColumnActionsMenuItems: ({ closeMenu }) => [],
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/custom-column-filtering-ui.js

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { useMaterialReactTable, MRT_TableContainer, MRT_TableHeadCellFilterContainer, } from 'material-react-table';
+import { data } from './makeData';
+import { Paper, Stack, useMediaQuery } from '@mui/material';
+const Example = () => {
+    const isMobile = useMediaQuery('(max-width: 1000px)');
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'id',
+            header: 'ID',
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+            filterVariant: 'autocomplete',
+        },
+        {
+            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: 'custom', //we will render our own filtering UI
+        enableFacetedValues: true,
+        muiFilterTextFieldProps: ({ column }) => ({
+            label: `Filter by ${column.columnDef.header}`,
+        }),
+    });
+    return (<Stack direction={isMobile ? 'column-reverse' : 'row'} sx={{
+            gap: '8px',
+        }}>
+      <MRT_TableContainer table={table}/>
+      <Paper>
+        <Stack sx={{
+            p: '8px',
+            gap: '8px',
+        }}>
+          {table
+            .getLeafHeaders()
+            .map((header) => header.column.getCanFilter() && (<MRT_TableHeadCellFilterContainer key={header.id} header={header} table={table} in/>))}
+        </Stack>
+      </Paper>
+    </Stack>);
+};
+export default Example;

package/data/examples/custom-headless.js

@@ -0,0 +1,85 @@
+import { MRT_GlobalFilterTextField, MRT_TableBodyCellValue, MRT_TablePagination, MRT_ToolbarAlertBanner, flexRender, useMaterialReactTable, } from 'material-react-table';
+import { Box, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, } from '@mui/material';
+import { data } from './makeData';
+const columns = [
+    {
+        accessorKey: 'name.firstName',
+        header: 'First Name',
+    },
+    {
+        accessorKey: 'name.lastName',
+        header: 'Last Name',
+    },
+    {
+        accessorKey: 'address',
+        header: 'Address',
+    },
+    {
+        accessorKey: 'city',
+        header: 'City',
+    },
+    {
+        accessorKey: 'state',
+        header: 'State',
+    },
+];
+const Example = () => {
+    const table = useMaterialReactTable({
+        columns,
+        data, //must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
+        //MRT display columns can still work, optionally override cell renders with `displayColumnDefOptions`
+        enableRowSelection: true,
+        initialState: {
+            pagination: { pageSize: 5, pageIndex: 0 },
+            showGlobalFilter: true,
+        },
+        //customize the MRT components
+        muiPaginationProps: {
+            rowsPerPageOptions: [5, 10, 15],
+            variant: 'outlined',
+        },
+        paginationDisplayMode: 'pages',
+    });
+    return (<Stack sx={{ m: '2rem 0' }}>
+      <Typography variant="h4">My Custom Headless Table</Typography>
+      <Box sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+        }}>
+        {/**
+         * Use MRT components along side your own markup.
+         * They just need the `table` instance passed as a prop to work!
+         */}
+        <MRT_GlobalFilterTextField table={table}/>
+        <MRT_TablePagination table={table}/>
+      </Box>
+      {/* Using Vanilla Material-UI Table components here */}
+      <TableContainer>
+        <Table>
+          {/* Use your own markup, customize however you want using the power of TanStack Table */}
+          <TableHead>
+            {table.getHeaderGroups().map((headerGroup) => (<TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (<TableCell align="center" variant="head" key={header.id}>
+                    {header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.Header ??
+                        header.column.columnDef.header, header.getContext())}
+                  </TableCell>))}
+              </TableRow>))}
+          </TableHead>
+          <TableBody>
+            {table.getRowModel().rows.map((row, rowIndex) => (<TableRow key={row.id} selected={row.getIsSelected()}>
+                {row.getVisibleCells().map((cell, _columnIndex) => (<TableCell align="center" variant="body" key={cell.id}>
+                    {/* Use MRT's cell renderer that provides better logic than flexRender */}
+                    <MRT_TableBodyCellValue cell={cell} table={table} staticRowIndex={rowIndex} //just for batch row selection to work
+            />
+                  </TableCell>))}
+              </TableRow>))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <MRT_ToolbarAlertBanner stackAlertBanner table={table}/>
+    </Stack>);
+};
+export default Example;

package/data/examples/custom-top-toolbar.js

@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, MRT_ToggleDensePaddingButton, MRT_ToggleFullScreenButton, useMaterialReactTable, } from 'material-react-table';
+import { Box, Button, IconButton } from '@mui/material';
+import PrintIcon from '@mui/icons-material/Print';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'age',
+            header: 'Age',
+        },
+        {
+            accessorKey: 'salary',
+            header: 'Salary',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableRowSelection: true,
+        positionToolbarAlertBanner: 'bottom', //show selected rows count on bottom toolbar
+        //add custom action buttons to top-left of top toolbar
+        renderTopToolbarCustomActions: ({ table }) => (<Box sx={{ display: 'flex', gap: '1rem', p: '4px' }}>
+        <Button color="secondary" onClick={() => {
+                alert('Create New Account');
+            }} variant="contained">
+          Create Account
+        </Button>
+        <Button color="error" disabled={!table.getIsSomeRowsSelected()} onClick={() => {
+                alert('Delete Selected Accounts');
+            }} variant="contained">
+          Delete Selected Accounts
+        </Button>
+      </Box>),
+        //customize built-in buttons in the top-right of top toolbar
+        renderToolbarInternalActions: ({ table }) => (<Box>
+        {/* add custom button to print table  */}
+        <IconButton onClick={() => {
+                window.print();
+            }}>
+          <PrintIcon />
+        </IconButton>
+        {/* along-side built-in buttons in whatever order you want them */}
+        <MRT_ToggleDensePaddingButton table={table}/>
+        <MRT_ToggleFullScreenButton table={table}/>
+      </Box>),
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/customize-display-columns.js

@@ -0,0 +1,72 @@
+import { useMemo } from 'react';
+import { Box, Button } from '@mui/material';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+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 table = useMaterialReactTable({
+        columns,
+        data,
+        defaultDisplayColumn: {
+            enableResizing: true, //turn on some features that are usually off for all display columns
+        },
+        displayColumnDefOptions: {
+            'mrt-row-actions': {
+                size: 350, //set custom width
+                muiTableHeadCellProps: {
+                    align: 'center', //change head cell props
+                },
+            },
+            'mrt-row-numbers': {
+                enableColumnDragging: true,
+                enableColumnOrdering: true, //turn on some features that are usually off
+                enableResizing: true,
+                muiTableHeadCellProps: {
+                    sx: {
+                        fontSize: '1.2rem',
+                    },
+                },
+            },
+            'mrt-row-select': {
+                enableColumnActions: true,
+                enableHiding: true,
+                size: 100,
+            },
+        },
+        enableColumnResizing: true,
+        enableColumnOrdering: true,
+        enableRowNumbers: true,
+        enableRowSelection: true,
+        enableRowActions: true,
+        renderRowActions: ({ row }) => (<Box sx={{ display: 'flex', gap: '1rem' }}>
+        <Button>Button 1</Button>
+        <Button>Button 2</Button>
+        <Button>Button 3</Button>
+      </Box>),
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/customize-filter-components.js

@@ -0,0 +1,78 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'id',
+            header: 'ID',
+            muiFilterTextFieldProps: { placeholder: 'ID' },
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'gender',
+            header: 'Gender',
+            filterFn: 'equals',
+            filterSelectOptions: [
+                { label: 'Male', value: 'Male' },
+                { label: 'Female', value: 'Female' },
+                { label: 'Other', value: 'Other' },
+            ],
+            filterVariant: 'select',
+        },
+        {
+            accessorKey: 'age',
+            header: 'Age',
+            filterVariant: 'range',
+        },
+    ], []);
+    const data = useMemo(
+    //data definitions...
+    () => [
+        {
+            id: 1,
+            firstName: 'Hugh',
+            lastName: 'Mungus',
+            gender: 'Male',
+            age: 42,
+        },
+        {
+            id: 2,
+            firstName: 'Leroy',
+            lastName: 'Jenkins',
+            gender: 'Male',
+            age: 51,
+        },
+        {
+            id: 3,
+            firstName: 'Candice',
+            lastName: 'Nutella',
+            gender: 'Female',
+            age: 27,
+        },
+        {
+            id: 4,
+            firstName: 'Micah',
+            lastName: 'Johnson',
+            gender: 'Other',
+            age: 32,
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        initialState: { showColumnFilters: true },
+        muiFilterTextFieldProps: {
+            sx: { m: '0.5rem 0', width: '100%' },
+            variant: 'outlined',
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/customize-filter-modes.js

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { MenuItem } from '@mui/material';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'id',
+            enableColumnFilterModes: false, //disable changing filter mode for this column
+            filterFn: 'equals', //set filter mode to equals
+            header: 'ID',
+        },
+        {
+            accessorKey: 'firstName', //normal, all filter modes are enabled
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'middleName',
+            enableColumnFilterModes: false, //disable changing filter mode for this column
+            filterFn: 'startsWith', //even though changing the mode is disabled, you can still set the default filter mode
+            header: 'Middle Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+            //if you do not want to use the default filter modes, you can provide your own and render your own menu
+            renderColumnFilterModeMenuItems: ({ onSelectFilterMode }) => [
+                <MenuItem key="0" onClick={() => onSelectFilterMode('contains')}>
+            <div>Contains</div>
+          </MenuItem>,
+                <MenuItem key="1" onClick={() => onSelectFilterMode('customFilterFn')}>
+            <div>Custom Filter Fn</div>
+          </MenuItem>,
+            ],
+        },
+        {
+            accessorKey: 'age',
+            columnFilterModeOptions: ['between', 'greaterThan', 'lessThan'], //only allow these filter modes
+            filterFn: 'between',
+            header: 'Age',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableColumnFilterModes: true, //enable changing filter mode for all columns unless explicitly disabled in a column def
+        initialState: { showColumnFilters: true }, //show filters by default
+        filterFns: {
+            customFilterFn: (row, id, filterValue) => {
+                return row.getValue(id) === filterValue;
+            },
+        },
+        localization: {
+            filterCustomFilterFn: 'Custom Filter Fn',
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;