@lminii/material-react-table-mcp 4.0.1

package/data/examples/customize-global-filter-component.tsx

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, 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: 'middleName',
+        header: 'Middle Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'age',
+        header: 'Age',
+      },
+    ],
+    [],
+    //end
+  );
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={data}
+      enableGlobalFilterModes
+      initialState={{
+        showGlobalFilter: true,
+      }}
+      positionGlobalFilter="left"
+      muiSearchTextFieldProps={{
+        placeholder: `Search ${data.length} rows`,
+        sx: { minWidth: '300px' },
+        variant: 'outlined',
+      }}
+    />
+  );
+};
+
+export default Example;

package/data/examples/customize-remove-column-grouping.js

@@ -0,0 +1,75 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, MRT_ExpandAllButton, } from 'material-react-table';
+import { data } from './makeData';
+import { Box, Stack } from '@mui/material';
+const Example = () => {
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            header: 'First Name',
+            accessorKey: 'firstName',
+        },
+        {
+            header: 'Last Name',
+            accessorKey: 'lastName',
+        },
+        {
+            header: 'Age',
+            accessorKey: 'age',
+        },
+        {
+            header: 'Gender',
+            accessorKey: 'gender',
+        },
+        {
+            header: 'State',
+            accessorKey: 'state',
+        },
+        {
+            header: 'Salary',
+            accessorKey: 'salary',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        displayColumnDefOptions: {
+            'mrt-row-expand': {
+                Header: () => (<Stack direction="row" sx={{
+                        alignItems: 'center',
+                    }}>
+            <MRT_ExpandAllButton table={table}/>
+            <Box>Groups</Box>
+          </Stack>),
+                GroupedCell: ({ row, table }) => {
+                    const { grouping } = table.getState();
+                    return row.getValue(grouping[grouping.length - 1]);
+                },
+                enableResizing: true,
+                muiTableBodyCellProps: ({ row }) => ({
+                    sx: (theme) => ({
+                        color: row.depth === 0
+                            ? theme.palette.primary.main
+                            : row.depth === 1
+                                ? theme.palette.secondary.main
+                                : undefined,
+                    }),
+                }),
+                size: 200,
+            },
+        },
+        enableGrouping: true,
+        enableColumnResizing: true,
+        groupedColumnMode: 'remove',
+        initialState: {
+            density: 'compact',
+            expanded: true, //expand all groups by default
+            grouping: ['state', 'gender'], //an array of columns to group by by default (can be multiple)
+            pagination: { pageIndex: 0, pageSize: 20 },
+            sorting: [{ id: 'state', desc: false }],
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/customize-remove-column-grouping.tsx

@@ -0,0 +1,94 @@
+import { useMemo, useState } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_Row,
+  MRT_ExpandAllButton,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+import { Box, Stack } from '@mui/material';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        header: 'First Name',
+        accessorKey: 'firstName',
+      },
+      {
+        header: 'Last Name',
+        accessorKey: 'lastName',
+      },
+      {
+        header: 'Age',
+        accessorKey: 'age',
+      },
+      {
+        header: 'Gender',
+        accessorKey: 'gender',
+      },
+      {
+        header: 'State',
+        accessorKey: 'state',
+      },
+      {
+        header: 'Salary',
+        accessorKey: 'salary',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    displayColumnDefOptions: {
+      'mrt-row-expand': {
+        Header: () => (
+          <Stack
+            direction="row"
+            sx={{
+              alignItems: 'center',
+            }}
+          >
+            <MRT_ExpandAllButton table={table} />
+            <Box>Groups</Box>
+          </Stack>
+        ),
+        GroupedCell: ({ row, table }) => {
+          const { grouping } = table.getState();
+          return row.getValue(grouping[grouping.length - 1]);
+        },
+        enableResizing: true,
+        muiTableBodyCellProps: ({ row }) => ({
+          sx: (theme) => ({
+            color:
+              row.depth === 0
+                ? theme.palette.primary.main
+                : row.depth === 1
+                  ? theme.palette.secondary.main
+                  : undefined,
+          }),
+        }),
+        size: 200,
+      },
+    },
+    enableGrouping: true,
+    enableColumnResizing: true,
+    groupedColumnMode: 'remove',
+    initialState: {
+      density: 'compact',
+      expanded: true, //expand all groups by default
+      grouping: ['state', 'gender'], //an array of columns to group by by default (can be multiple)
+      pagination: { pageIndex: 0, pageSize: 20 },
+      sorting: [{ id: 'state', desc: false }],
+    },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/customize-row-selection.js

@@ -0,0 +1,43 @@
+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: 'age',
+            header: 'Age',
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableSelectAll: false,
+        enableRowSelection: (row) => row.original.age >= 21, //enable row selection conditionally per row
+        muiSelectCheckboxProps: { color: 'secondary' },
+        positionToolbarAlertBanner: 'head-overlay',
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/customize-row-selection.tsx

@@ -0,0 +1,54 @@
+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: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'age',
+        header: 'Age',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableSelectAll: false,
+    enableRowSelection: (row) => row.original.age >= 21, //enable row selection conditionally per row
+    muiSelectCheckboxProps: { color: 'secondary' },
+    positionToolbarAlertBanner: 'head-overlay',
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/customize-table-styles.js

@@ -0,0 +1,81 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+import { darken, lighten, useTheme } from '@mui/material';
+const Example = () => {
+    const theme = useTheme();
+    //light or dark green
+    const baseBackgroundColor = theme.palette.mode === 'dark'
+        ? 'rgba(3, 44, 43, 1)'
+        : 'rgba(244, 255, 233, 1)';
+    const columns = useMemo(
+    //column definitions...
+    () => [
+        {
+            accessorKey: 'id',
+            header: 'ID',
+            size: 100,
+            enableColumnFilter: false,
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'middleName',
+            header: 'Middle Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+            size: 300,
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableColumnResizing: true,
+        enableRowPinning: true,
+        enableRowSelection: true,
+        muiTablePaperProps: {
+            elevation: 0,
+            sx: {
+                borderRadius: '0',
+            },
+        },
+        muiTableBodyProps: {
+            sx: (theme) => ({
+                '& tr:nth-of-type(odd):not([data-selected="true"]):not([data-pinned="true"]) > td': {
+                    backgroundColor: darken(baseBackgroundColor, 0.1),
+                },
+                '& tr:nth-of-type(odd):not([data-selected="true"]):not([data-pinned="true"]):hover > td': {
+                    backgroundColor: darken(baseBackgroundColor, 0.2),
+                },
+                '& tr:nth-of-type(even):not([data-selected="true"]):not([data-pinned="true"]) > td': {
+                    backgroundColor: lighten(baseBackgroundColor, 0.1),
+                },
+                '& tr:nth-of-type(even):not([data-selected="true"]):not([data-pinned="true"]):hover > td': {
+                    backgroundColor: darken(baseBackgroundColor, 0.2),
+                },
+            }),
+        },
+        mrtTheme: (theme) => ({
+            baseBackgroundColor: baseBackgroundColor,
+            draggingBorderColor: theme.palette.secondary.main,
+        }),
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/customize-table-styles.tsx

@@ -0,0 +1,100 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+import { darken, lighten, useTheme } from '@mui/material';
+
+const Example = () => {
+  const theme = useTheme();
+
+  //light or dark green
+  const baseBackgroundColor =
+    theme.palette.mode === 'dark'
+      ? 'rgba(3, 44, 43, 1)'
+      : 'rgba(244, 255, 233, 1)';
+
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'id',
+        header: 'ID',
+        size: 100,
+        enableColumnFilter: false,
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'middleName',
+        header: 'Middle Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+        size: 300,
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableColumnResizing: true,
+    enableRowPinning: true,
+    enableRowSelection: true,
+    muiTablePaperProps: {
+      elevation: 0,
+      sx: {
+        borderRadius: '0',
+      },
+    },
+    muiTableBodyProps: {
+      sx: (theme) => ({
+        '& tr:nth-of-type(odd):not([data-selected="true"]):not([data-pinned="true"]) > td':
+          {
+            backgroundColor: darken(baseBackgroundColor, 0.1),
+          },
+        '& tr:nth-of-type(odd):not([data-selected="true"]):not([data-pinned="true"]):hover > td':
+          {
+            backgroundColor: darken(baseBackgroundColor, 0.2),
+          },
+        '& tr:nth-of-type(even):not([data-selected="true"]):not([data-pinned="true"]) > td':
+          {
+            backgroundColor: lighten(baseBackgroundColor, 0.1),
+          },
+        '& tr:nth-of-type(even):not([data-selected="true"]):not([data-pinned="true"]):hover > td':
+          {
+            backgroundColor: darken(baseBackgroundColor, 0.2),
+          },
+      }),
+    },
+    mrtTheme: (theme) => ({
+      baseBackgroundColor: baseBackgroundColor,
+      draggingBorderColor: theme.palette.secondary.main,
+    }),
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

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

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'id',
+            enableColumnActions: false,
+            header: 'ID',
+        },
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/disable-column-actions.tsx

@@ -0,0 +1,37 @@
+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: 'id',
+        enableColumnActions: false,
+        header: 'ID',
+      },
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/disable-column-hiding.js

@@ -0,0 +1,74 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'firstName',
+            enableHiding: false,
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'lastName',
+            enableHiding: false,
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+        {
+            accessorKey: 'state',
+            header: 'State',
+        },
+    ], []);
+    const data = useMemo(() => [
+        //data definitions...
+        {
+            firstName: 'Dylan',
+            lastName: 'Murray',
+            address: '261 Erdman Ford',
+            city: 'East Daphne',
+            state: 'Kentucky',
+        },
+        {
+            firstName: 'Raquel',
+            lastName: 'Kohler',
+            address: '769 Dominic Grove',
+            city: 'Columbus',
+            state: 'Ohio',
+        },
+        {
+            firstName: 'Ervin',
+            lastName: 'Reinger',
+            address: '566 Brakus Inlet',
+            city: 'South Linda',
+            state: 'West Virginia',
+        },
+        {
+            firstName: 'Brittany',
+            lastName: 'McCullough',
+            address: '722 Emie Stream',
+            city: 'Lincoln',
+            state: 'Nebraska',
+        },
+        {
+            firstName: 'Branson',
+            lastName: 'Frami',
+            address: '32188 Larkin Turnpike',
+            city: 'Charleston',
+            state: 'South Carolina',
+        },
+        //end
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        initialState: { columnVisibility: { address: false } },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;