@lminii/material-react-table-mcp 4.0.1

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;

package/data/examples/basic.tsx

@@ -0,0 +1,109 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+
+//example data type
+type Person = {
+  name: {
+    firstName: string;
+    lastName: string;
+  };
+  address: string;
+  city: string;
+  state: string;
+};
+
+//nested data is ok, see accessorKeys in ColumnDef below
+const data: Person[] = [
+  {
+    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<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        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;

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/chart-detail-panel.tsx

@@ -0,0 +1,89 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { useTheme } from '@mui/material/styles';
+import { LineChart } from '@mui/x-charts/LineChart';
+import { data, type Person } from './makeData';
+
+const Example = () => {
+  const theme = useTheme();
+
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'id',
+        header: 'ID',
+        size: 50,
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'middleName',
+        header: 'Middle Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+    ],
+    [],
+    //end
+  );
+
+  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-actions-space.tsx

@@ -0,0 +1,44 @@
+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>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'id',
+        header: 'ID',
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+    ],
+    [], //end
+  );
+
+  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/column-alignment.tsx

@@ -0,0 +1,70 @@
+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: '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<number>()
+            .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;