@mini_7/material-react-table-mcp 4.0.0

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