@mini_7/material-react-table-mcp 4.0.0

package/data/examples/enable-row-numbers-static.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: 'static', // default
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

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

@@ -0,0 +1,57 @@
+import { useMemo, useState } from 'react';
+import {
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_Row,
+  MRT_TableContainer,
+} from 'material-react-table';
+import { data as initData, 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 [data, setData] = useState(() => initData);
+
+  const table = useMaterialReactTable({
+    autoResetPageIndex: false,
+    columns,
+    data,
+    enableRowOrdering: true,
+    enableSorting: false,
+    muiRowDragHandleProps: ({ table }) => ({
+      onDragEnd: () => {
+        const { draggingRow, hoveredRow } = table.getState();
+        if (hoveredRow && draggingRow) {
+          data.splice(
+            (hoveredRow as MRT_Row<Person>).index,
+            0,
+            data.splice(draggingRow.index, 1)[0],
+          );
+          setData([...data]);
+        }
+      },
+    }),
+  });
+
+  return <MRT_TableContainer table={table} />;
+};
+
+export default Example;

package/data/examples/enable-row-pinning-select.tsx

@@ -0,0 +1,76 @@
+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: 'email',
+        header: 'Email',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enablePagination: false,
+    enableRowPinning: true,
+    enableRowSelection: true,
+    enableStickyHeader: true,
+    rowPinningDisplayMode: 'select-sticky',
+    getRowId: (row) => row.email,
+    initialState: {
+      rowPinning: {
+        bottom: [],
+        top: ['ereinger@mailinator.com'],
+      },
+      rowSelection: {
+        'ereinger@mailinator.com': true,
+      },
+    },
+    muiTableContainerProps: {
+      sx: {
+        maxHeight: '400px',
+      },
+    },
+    muiTableBodyRowProps: ({ row, table }) => {
+      const { density } = table.getState();
+      return {
+        sx: {
+          //Set a fixed height for pinned rows
+          height: row.getIsPinned()
+            ? `${
+                //Default mrt row height estimates. Adjust as needed.
+                density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69
+              }px`
+            : undefined,
+        },
+      };
+    },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/enable-row-pinning-static.tsx

@@ -0,0 +1,50 @@
+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',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'email',
+        header: 'Email',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableRowPinning: true,
+    enablePagination: false,
+    enableStickyHeader: true,
+    rowPinningDisplayMode: 'top-and-bottom',
+    getRowId: (row) => row.email,
+    muiTableContainerProps: {
+      sx: {
+        maxHeight: '400px',
+      },
+    },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/enable-row-pinning-sticky.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';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'email',
+        header: 'Email',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+    ],
+    [],
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableRowPinning: true,
+    enablePagination: false,
+    enableStickyHeader: true,
+    getRowId: (row) => row.email,
+    initialState: {
+      rowPinning: {
+        top: ['rkholer33@yopmail.com', 'egarcia@yopmail.com'],
+        bottom: [],
+      },
+    },
+    muiTableContainerProps: {
+      sx: {
+        maxHeight: '400px',
+      },
+    },
+    muiTableBodyRowProps: ({ row, table }) => {
+      const { density } = table.getState();
+      return {
+        sx: {
+          //Set a fixed height for pinned rows
+          height: row.getIsPinned()
+            ? `${
+                //Default mrt row height estimates. Adjust as needed.
+                density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69
+              }px`
+            : undefined,
+        },
+      };
+    },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

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

@@ -0,0 +1,96 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_RowSelectionState,
+} from 'material-react-table';
+
+//data definitions...
+interface Person {
+  userId: string;
+  firstName: string;
+  lastName: string;
+  age: number;
+  address: string;
+  city: string;
+  state: string;
+}
+//end
+
+const data = [
+  {
+    userId: '3f25309c-8fa1-470f-811e-cdb082ab9017', //we'll use this as a unique row id
+    firstName: 'Dylan',
+    lastName: 'Murray',
+    age: 22,
+    address: '261 Erdman Ford',
+    city: 'East Daphne',
+    state: 'Kentucky',
+  }, //data definitions...
+  {
+    userId: 'be731030-df83-419c-b3d6-9ef04e7f4a9f',
+    firstName: 'Raquel',
+    lastName: 'Kohler',
+    age: 18,
+    address: '769 Dominic Grove',
+    city: 'Columbus',
+    state: 'Ohio',
+  },
+  //end
+];
+
+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
+  );
+
+  //optionally, you can manage the row selection state yourself
+  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableRowSelection: true,
+    getRowId: (row) => row.userId, //give each row a more useful id
+    onRowSelectionChange: setRowSelection, //connect internal row selection state to your own
+    state: { rowSelection }, //pass our managed row selection state to the table to use
+  });
+
+  //do something when the row selection changes...
+  useEffect(() => {
+    console.info({ rowSelection }); //read your managed row selection state
+    // console.info(table.getState().rowSelection); //alternate way to get the row selection state
+  }, [rowSelection]);
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

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

@@ -0,0 +1,101 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+  type MRT_SortingState,
+  type MRT_RowVirtualizer,
+} from 'material-react-table';
+import { makeData, type Person } from './makeData';
+
+const Example = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(
+    //column definitions...
+    () => [
+      {
+        accessorKey: 'firstName',
+        header: 'First Name',
+        size: 150,
+      },
+      {
+        accessorKey: 'middleName',
+        header: 'Middle Name',
+        size: 150,
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+        size: 150,
+      },
+      {
+        accessorKey: 'email',
+        header: 'Email Address',
+        size: 300,
+      },
+      {
+        accessorKey: 'address',
+        header: 'Address',
+      },
+      {
+        accessorKey: 'zipCode',
+        header: 'Zip Code',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+      {
+        accessorKey: 'country',
+        header: 'Country',
+      },
+    ],
+    [],
+    //end
+  );
+
+  //optionally access the underlying virtualizer instance
+  const rowVirtualizerInstanceRef = useRef<MRT_RowVirtualizer>(null);
+
+  const [data, setData] = useState<Person[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [sorting, setSorting] = useState<MRT_SortingState>([]);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setData(makeData(10_000));
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    //scroll to the top of the table when the sorting changes
+    try {
+      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [sorting]);
+
+  const table = useMaterialReactTable({
+    columns,
+    data, //10,000 rows
+    enableBottomToolbar: false,
+    enableGlobalFilterModes: true,
+    enablePagination: false,
+    enableRowNumbers: true,
+    enableRowVirtualization: true,
+    muiTableContainerProps: { sx: { maxHeight: '600px' } },
+    onSortingChange: setSorting,
+    state: { isLoading, sorting },
+    rowVirtualizerInstanceRef, //optional
+    rowVirtualizerOptions: { overscan: 5 }, //optionally customize the row virtualizer
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/enable-sticky-header.tsx

@@ -0,0 +1,59 @@
+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',
+        footer: 'First Name',
+      },
+      {
+        accessorKey: 'lastName',
+        header: 'Last Name',
+        footer: 'Last Name',
+      },
+      {
+        accessorKey: 'email',
+        header: 'Email',
+        footer: 'Email',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+        footer: 'City',
+      },
+    ],
+    [],
+    //end
+  );
+
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableBottomToolbar: false,
+    enableStickyHeader: true,
+    enableStickyFooter: true,
+    enablePagination: false,
+    muiTableContainerProps: { sx: { maxHeight: '400px' } },
+    muiTableBodyCellProps: {
+      sx: (theme) => ({
+        backgroundColor:
+          theme.palette.mode === 'dark'
+            ? theme.palette.grey[900]
+            : theme.palette.grey[50],
+      }),
+    },
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;

package/data/examples/expanding-tree-expanded.tsx

@@ -0,0 +1,121 @@
+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: Person[] = [
+  {
+    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: 'Jordan',
+            lastName: 'Clarkson',
+            address: '4882 Palm Rd',
+            city: 'San Francisco',
+            state: 'California',
+          },
+        ],
+      },
+      {
+        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,
+    filterFromLeafRows: true, //apply filtering to all rows instead of just parent rows
+    getSubRows: (row) => row.subRows, //default
+    initialState: { expanded: true }, //expand all rows by default
+    paginateExpandedRows: false, //When rows are expanded, do not count sub-rows as number of rows on the page towards pagination
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Example;