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

package/data/examples/enable-detail-panel-conditionally.js

@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { Box, Typography } from '@mui/material';
+import { data } from './makeData';
+const Example = () => {
+    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,
+        enableExpandAll: false, //disable expand all button
+        muiDetailPanelProps: () => ({
+            sx: (theme) => ({
+                backgroundColor: theme.palette.mode === 'dark'
+                    ? 'rgba(255,210,244,0.1)'
+                    : 'rgba(0,0,0,0.1)',
+            }),
+        }),
+        //custom expand button rotation
+        muiExpandButtonProps: ({ row, table }) => ({
+            onClick: () => table.setExpanded({ [row.id]: !row.getIsExpanded() }), //only 1 detail panel open at a time
+            sx: {
+                transform: row.getIsExpanded() ? 'rotate(180deg)' : 'rotate(-90deg)',
+                transition: 'transform 0.2s',
+            },
+        }),
+        //conditionally render detail panel
+        renderDetailPanel: ({ row }) => row.original.address ? (<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>) : null,
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-detail-panel-virtualized.js

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { Box, Typography } from '@mui/material';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'email',
+            header: 'Email',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableBottomToolbar: false,
+        enablePagination: false,
+        enableRowVirtualization: true,
+        muiTableContainerProps: {
+            sx: {
+                maxHeight: '500px',
+            },
+        },
+        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>),
+        rowVirtualizerOptions: ({ table }) => {
+            const { density, expanded } = table.getState();
+            return {
+                //adjust to your needs
+                estimateSize: (index) => index % 2 === 1 //even rows are normal rows, odd rows are detail panels
+                    ? //Estimate open detail panels as 80px tall, closed detail panels as 0px tall
+                        expanded === true
+                            ? 80
+                            : 0
+                    : //estimate normal row heights
+                        density === 'compact'
+                            ? 37
+                            : density === 'comfortable'
+                                ? 58
+                                : 73,
+            };
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-expanding-tree.js

@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+export const data = [
+    {
+        firstName: 'Dylan',
+        lastName: 'Murray',
+        address: '261 Erdman Ford',
+        city: 'East Daphne',
+        state: 'Kentucky',
+        subRows: [
+            {
+                firstName: 'Ervin',
+                lastName: 'Reinger',
+                address: '566 Brakus Inlet',
+                city: 'South Linda',
+                state: 'West Virginia',
+                subRows: [
+                    {
+                        firstName: 'Jordane',
+                        lastName: 'Homenick',
+                        address: '1234 Brakus Inlet',
+                        city: 'South Linda',
+                        state: 'West Virginia',
+                    },
+                ],
+            },
+            {
+                firstName: 'Brittany',
+                lastName: 'McCullough',
+                address: '722 Emie Stream',
+                city: 'Lincoln',
+                state: 'Nebraska',
+            },
+        ],
+    },
+    {
+        firstName: 'Raquel',
+        lastName: 'Kohler',
+        address: '769 Dominic Grove',
+        city: 'Columbus',
+        state: 'Ohio',
+        subRows: [
+            {
+                firstName: 'Branson',
+                lastName: 'Frami',
+                address: '32188 Larkin Turnpike',
+                city: 'Charleston',
+                state: 'South Carolina',
+            },
+        ],
+    },
+];
+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',
+            enableColumnOrdering: false,
+            header: 'State',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableExpandAll: false, //hide expand all double arrow in column header
+        enableExpanding: true,
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-filter-facet-values.js

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'name',
+            header: 'Name',
+            filterVariant: 'autocomplete', // default
+            size: 100,
+        },
+        {
+            accessorKey: 'salary',
+            header: 'Salary',
+            Cell: ({ cell }) => cell.getValue().toLocaleString('en-US', {
+                style: 'currency',
+                currency: 'USD',
+            }),
+            filterVariant: 'range-slider',
+            filterFn: 'betweenInclusive', // default (or between)
+            muiFilterSliderProps: {
+                //no need to specify min/max/step if using faceted values
+                marks: true,
+                step: 5000,
+                valueLabelFormat: (value) => value.toLocaleString('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                }),
+            },
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+            filterVariant: 'select',
+            //no need to specify filterSelectOptions if using faceted values
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+            filterVariant: 'multi-select',
+            //no need to specify filterSelectOptions if using faceted values
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableFacetedValues: true,
+        initialState: { showColumnFilters: true },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-row-dragging.js

@@ -0,0 +1,102 @@
+import { useMemo, useState } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { Box, Typography } from '@mui/material';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+    ], []);
+    const [data1, setData1] = useState(() => data.slice(0, 3));
+    const [data2, setData2] = useState(() => data.slice(3, 5));
+    const [draggingRow, setDraggingRow] = useState(null);
+    const [hoveredTable, setHoveredTable] = useState(null);
+    const commonTableProps = {
+        columns,
+        enableRowDragging: true,
+        enableFullScreenToggle: false,
+        muiTableContainerProps: {
+            sx: {
+                minHeight: '320px',
+            },
+        },
+        onDraggingRowChange: setDraggingRow,
+        state: { draggingRow },
+    };
+    const table1 = useMaterialReactTable({
+        ...commonTableProps,
+        data: data1,
+        getRowId: (originalRow) => `table-1-${originalRow.firstName}`,
+        muiRowDragHandleProps: {
+            onDragEnd: () => {
+                if (hoveredTable === 'table-2') {
+                    setData2((data2) => [...data2, draggingRow.original]);
+                    setData1((data1) => data1.filter((d) => d !== draggingRow.original));
+                }
+                setHoveredTable(null);
+            },
+        },
+        muiTablePaperProps: {
+            onDragEnter: () => setHoveredTable('table-1'),
+            sx: {
+                outline: hoveredTable === 'table-1' ? '2px dashed pink' : undefined,
+            },
+        },
+        renderTopToolbarCustomActions: () => (<Typography component="span" variant="h4" sx={{
+                color: 'success.main',
+            }}>
+        Nice List
+      </Typography>),
+    });
+    const table2 = useMaterialReactTable({
+        ...commonTableProps,
+        data: data2,
+        defaultColumn: {
+            size: 100,
+        },
+        getRowId: (originalRow) => `table-2-${originalRow.firstName}`,
+        muiRowDragHandleProps: {
+            onDragEnd: () => {
+                if (hoveredTable === 'table-1') {
+                    setData1((data1) => [...data1, draggingRow.original]);
+                    setData2((data2) => data2.filter((d) => d !== draggingRow.original));
+                }
+                setHoveredTable(null);
+            },
+        },
+        muiTablePaperProps: {
+            onDragEnter: () => setHoveredTable('table-2'),
+            sx: {
+                outline: hoveredTable === 'table-2' ? '2px dashed pink' : undefined,
+            },
+        },
+        renderTopToolbarCustomActions: () => (<Typography component="span" variant="h4" sx={{
+                color: 'error.main',
+            }}>
+        Naughty List
+      </Typography>),
+    });
+    return (<Box sx={{
+            display: 'grid',
+            gridTemplateColumns: { xs: 'auto', lg: '1fr 1fr' },
+            gap: '1rem',
+            overflow: 'auto',
+            p: '4px',
+        }}>
+      <MaterialReactTable table={table1}/>
+      <MaterialReactTable table={table2}/>
+    </Box>);
+};
+export default Example;

package/data/examples/enable-row-numbers-original.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+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,
+        enableRowNumbers: true,
+        rowNumberDisplayMode: 'original',
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-row-numbers-static.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+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,
+        enableRowNumbers: true,
+        rowNumberDisplayMode: 'static', // default
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-row-ordering.js

@@ -0,0 +1,40 @@
+import { useMemo, useState } from 'react';
+import { useMaterialReactTable, MRT_TableContainer, } from 'material-react-table';
+import { data as initData } from './makeData';
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+    ], []);
+    const [data, setData] = useState(() => initData);
+    const table = useMaterialReactTable({
+        autoResetPageIndex: false,
+        columns,
+        data,
+        enableRowOrdering: true,
+        enableSorting: false,
+        muiRowDragHandleProps: ({ table }) => ({
+            onDragEnd: () => {
+                const { draggingRow, hoveredRow } = table.getState();
+                if (hoveredRow && draggingRow) {
+                    data.splice(hoveredRow.index, 0, data.splice(draggingRow.index, 1)[0]);
+                    setData([...data]);
+                }
+            },
+        }),
+    });
+    return <MRT_TableContainer table={table}/>;
+};
+export default Example;

package/data/examples/enable-row-pinning-select.js

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+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: 'email',
+            header: 'Email',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enablePagination: false,
+        enableRowPinning: true,
+        enableRowSelection: true,
+        enableStickyHeader: true,
+        rowPinningDisplayMode: 'select-sticky',
+        getRowId: (row) => row.email,
+        initialState: {
+            rowPinning: {
+                bottom: [],
+                top: ['ereinger@mailinator.com'],
+            },
+            rowSelection: {
+                'ereinger@mailinator.com': true,
+            },
+        },
+        muiTableContainerProps: {
+            sx: {
+                maxHeight: '400px',
+            },
+        },
+        muiTableBodyRowProps: ({ row, table }) => {
+            const { density } = table.getState();
+            return {
+                sx: {
+                    //Set a fixed height for pinned rows
+                    height: row.getIsPinned()
+                        ? `${
+                        //Default mrt row height estimates. Adjust as needed.
+                        density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69}px`
+                        : undefined,
+                },
+            };
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-row-pinning-static.js

@@ -0,0 +1,39 @@
+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',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'email',
+            header: 'Email',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableRowPinning: true,
+        enablePagination: false,
+        enableStickyHeader: true,
+        rowPinningDisplayMode: 'top-and-bottom',
+        getRowId: (row) => row.email,
+        muiTableContainerProps: {
+            sx: {
+                maxHeight: '400px',
+            },
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-row-pinning-sticky.js

@@ -0,0 +1,57 @@
+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',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'email',
+            header: 'Email',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableRowPinning: true,
+        enablePagination: false,
+        enableStickyHeader: true,
+        getRowId: (row) => row.email,
+        initialState: {
+            rowPinning: {
+                top: ['rkholer33@yopmail.com', 'egarcia@yopmail.com'],
+                bottom: [],
+            },
+        },
+        muiTableContainerProps: {
+            sx: {
+                maxHeight: '400px',
+            },
+        },
+        muiTableBodyRowProps: ({ row, table }) => {
+            const { density } = table.getState();
+            return {
+                sx: {
+                    //Set a fixed height for pinned rows
+                    height: row.getIsPinned()
+                        ? `${
+                        //Default mrt row height estimates. Adjust as needed.
+                        density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69}px`
+                        : undefined,
+                },
+            };
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;