@lminii/material-react-table-mcp 4.0.1

package/data/examples/enable-column-grouping.tsx

@@ -0,0 +1,120 @@
+import { useMemo, useState } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+import {
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  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
+  );
+
+  //demo state
+  const [groupedColumnMode, setGroupedColumnMode] = useState<
+    false | 'remove' | 'reorder'
+  >('reorder'); //default is 'reorder
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableGrouping: true,
+    groupedColumnMode,
+    initialState: {
+      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 },
+    },
+    muiTableContainerProps: { sx: { maxHeight: '800px' } },
+  });
+
+  return (
+    <Stack
+      sx={{
+        gap: '1rem',
+      }}
+    >
+      <DemoRadioGroup
+        groupedColumnMode={groupedColumnMode}
+        setGroupedColumnMode={setGroupedColumnMode}
+      />
+      <MaterialReactTable table={table} />
+    </Stack>
+  );
+};
+
+export default Example;
+
+//demo...
+const DemoRadioGroup = ({
+  groupedColumnMode,
+  setGroupedColumnMode,
+}: {
+  groupedColumnMode: false | 'remove' | 'reorder';
+  setGroupedColumnMode: (
+    groupedColumnMode: false | 'remove' | 'reorder',
+  ) => void;
+}) => {
+  return (
+    <FormControl sx={{ margin: 'auto', textAlign: 'center' }}>
+      <FormLabel>Grouped Column Mode</FormLabel>
+      <RadioGroup
+        row
+        value={groupedColumnMode}
+        onChange={(event) =>
+          setGroupedColumnMode(
+            event.target.value === 'false'
+              ? false
+              : (event.target.value as any),
+          )
+        }
+      >
+        <FormControlLabel
+          control={<Radio />}
+          label='"reorder" (default)'
+          value="reorder"
+        />
+        <FormControlLabel control={<Radio />} label='"remove"' value="remove" />
+        <FormControlLabel value={false} control={<Radio />} label="false" />
+      </RadioGroup>
+    </FormControl>
+  );
+};
+//end

package/data/examples/enable-column-ordering.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(() => [
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        //column definitions...
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+        },
+        //end
+        {
+            accessorKey: 'state',
+            enableColumnOrdering: false, //disable column ordering for this column,
+            header: 'State',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableColumnOrdering: true,
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-column-ordering.tsx

@@ -0,0 +1,48 @@
+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',
+      },
+      //column definitions...
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      //end
+      {
+        accessorKey: 'state',
+        enableColumnOrdering: false, //disable column ordering for this column,
+        header: 'State',
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableColumnOrdering: true,
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/enable-column-pinning.js

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { data } from './makeData';
+import { MenuItem } from '@mui/material';
+const Example = () => {
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'id',
+            enableColumnPinning: false, //disable column pinning for this column
+            header: 'ID',
+            size: 50,
+        },
+        //column definitions...
+        {
+            accessorKey: 'firstName',
+            header: 'First Name',
+        },
+        {
+            accessorKey: 'middleName',
+            header: 'Middle Name',
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'address',
+            header: 'Address',
+            size: 300,
+        },
+        //end
+        {
+            accessorKey: 'city', //this column gets pinned to the right by default because of the initial state,
+            header: 'City',
+        },
+        {
+            accessorKey: 'state', //this column gets pinned left by default because of the the initial state,
+            header: 'State',
+        },
+        {
+            accessorKey: 'country',
+            header: 'Country',
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        enableColumnPinning: true,
+        enableRowActions: true,
+        layoutMode: 'grid-no-grow', //constant column widths
+        renderRowActionMenuItems: () => [<MenuItem key="action">Action</MenuItem>],
+        initialState: {
+            columnPinning: { end: ['city'], start: ['mrt-row-actions', 'state'] },
+        },
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-column-pinning.tsx

@@ -0,0 +1,69 @@
+import { useMemo } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from 'material-react-table';
+import { data, type Person } from './makeData';
+import { MenuItem } from '@mui/material';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        accessorKey: 'id',
+        enableColumnPinning: false, //disable column pinning for this column
+        header: 'ID',
+        size: 50,
+      },
+      //column definitions...
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'middleName',
+        header: 'Middle Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+        size: 300,
+      },
+      //end
+      {
+        accessorKey: 'city', //this column gets pinned to the right by default because of the initial state,
+        header: 'City',
+      },
+      {
+        accessorKey: 'state', //this column gets pinned left by default because of the the initial state,
+        header: 'State',
+      },
+      {
+        accessorKey: 'country',
+        header: 'Country',
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableColumnPinning: true,
+    enableRowActions: true,
+    layoutMode: 'grid-no-grow', //constant column widths
+    renderRowActionMenuItems: () => [<MenuItem key="action">Action</MenuItem>],
+    initialState: {
+      columnPinning: { end: ['city'], start: ['mrt-row-actions', 'state'] },
+    },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/enable-column-resizing.js

@@ -0,0 +1,45 @@
+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', //uses the default width from defaultColumn prop
+        },
+        {
+            accessorKey: 'lastName',
+            header: 'Last Name',
+        },
+        {
+            accessorKey: 'email',
+            header: 'Email Address',
+            size: 250, //increase the width of this column
+        },
+        {
+            accessorKey: 'city',
+            header: 'City',
+            size: 200, //decrease the width of this column
+            enableResizing: false, //disable resizing for this column
+        },
+        {
+            accessorKey: 'country',
+            header: 'Country',
+            size: 140, //decrease the width of this column
+        },
+    ], []);
+    const table = useMaterialReactTable({
+        columns,
+        data,
+        //optionally override the default column widths
+        defaultColumn: {
+            maxSize: 400,
+            minSize: 80,
+            size: 160, //default size is usually 180
+        },
+        enableColumnResizing: true,
+        columnResizeMode: 'onChange', //default
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-column-resizing.tsx

@@ -0,0 +1,56 @@
+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', //uses the default width from defaultColumn prop
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'email',
+        header: 'Email Address',
+        size: 250, //increase the width of this column
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+        size: 200, //decrease the width of this column
+        enableResizing: false, //disable resizing for this column
+      },
+      {
+        accessorKey: 'country',
+        header: 'Country',
+        size: 140, //decrease the width of this column
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    //optionally override the default column widths
+    defaultColumn: {
+      maxSize: 400,
+      minSize: 80,
+      size: 160, //default size is usually 180
+    },
+    enableColumnResizing: true,
+    columnResizeMode: 'onChange', //default
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/enable-column-virtualization.js

@@ -0,0 +1,19 @@
+import { useRef } from 'react';
+import { MaterialReactTable, useMaterialReactTable, } from 'material-react-table';
+import { fakeColumns, fakeData } from './makeData';
+const Example = () => {
+    //optionally access the underlying virtualizer instance
+    const columnVirtualizerInstanceRef = useRef(null);
+    const table = useMaterialReactTable({
+        columnVirtualizerInstanceRef, //optional
+        columnVirtualizerOptions: { overscan: 4 }, //optionally customize the virtualizer
+        columns: fakeColumns, //500 columns
+        data: fakeData,
+        enableColumnPinning: true,
+        enableColumnResizing: true,
+        enableColumnVirtualization: true,
+        enableRowNumbers: true,
+    });
+    return <MaterialReactTable table={table}/>;
+};
+export default Example;

package/data/examples/enable-column-virtualization.tsx

@@ -0,0 +1,27 @@
+import { useRef } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnVirtualizer,
+} from 'material-react-table';
+import { fakeColumns, fakeData } from './makeData';
+
+const Example = () => {
+  //optionally access the underlying virtualizer instance
+  const columnVirtualizerInstanceRef = useRef<MRT_ColumnVirtualizer>(null);
+
+  const table = useMaterialReactTable({
+    columnVirtualizerInstanceRef, //optional
+    columnVirtualizerOptions: { overscan: 4 }, //optionally customize the virtualizer
+    columns: fakeColumns, //500 columns
+    data: fakeData,
+    enableColumnPinning: true,
+    enableColumnResizing: true,
+    enableColumnVirtualization: true,
+    enableRowNumbers: true,
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

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-conditionally.tsx

@@ -0,0 +1,78 @@
+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: '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,
+    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;