@lminii/material-react-table-mcp 4.0.1

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

@@ -0,0 +1,80 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { Box, Typography } from '@mui/material';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'email',
+        header: 'Email',
+      },
+    ],
+    [],
+    //end
+  );
+
+  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-expanding-tree.tsx

@@ -0,0 +1,110 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+
+export type Person = {
+  firstName: string;
+  lastName: string;
+  address: string;
+  city: string;
+  state: string;
+  subRows?: Person[]; //Each person can have sub rows of more people
+};
+
+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<MRT_ColumnDef<Person>[]>(
+    //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',
+      },
+    ],
+    [],
+    //end
+  );
+
+  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-filter-facet-values.tsx

@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: 'Name',
+        filterVariant: 'autocomplete', // default
+        size: 100,
+      },
+      {
+        accessorKey: 'salary',
+        header: 'Salary',
+        Cell: ({ cell }) =>
+          cell.getValue<number>().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: 5_000,
+          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-dragging.tsx

@@ -0,0 +1,137 @@
+import { useMemo, useState } from 'react';
+import {
+  type MRT_TableOptions,
+  type MRT_ColumnDef,
+  type MRT_Row,
+  MaterialReactTable,
+  useMaterialReactTable,
+} from 'material-react-table';
+import { Box, Typography } from '@mui/material';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const [data1, setData1] = useState<Person[]>(() => data.slice(0, 3));
+  const [data2, setData2] = useState<Person[]>(() => data.slice(3, 5));
+
+  const [draggingRow, setDraggingRow] = useState<MRT_Row<Person> | null>(null);
+  const [hoveredTable, setHoveredTable] = useState<string | null>(null);
+
+  const commonTableProps: Partial<MRT_TableOptions<Person>> & {
+    columns: MRT_ColumnDef<Person>[];
+  } = {
+    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;