@mini_7/material-react-table-mcp 4.0.0

package/data/guides/row-actions.md

@@ -0,0 +1,116 @@
+## Row Actions Feature Guide
+
+The row actions feature is simply a pre-built [Display Column](/docs/guides/display-columns) feature that adds a column as a place to store either a row action menu or other row action buttons.
+
+Using the built-in Row Actions column is optional, as you can simply create your own display columns, but this feature has some built-in conveniences that make it easy to add row actions to your table.
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `displayColumnDefOptions` - type `{ [key: string]: MRT_DisplayColumnDef<TData> }` - Customize and override the column definition options for the built-in display columns. (Select, Expand, Row Actions, etc.)
+- `enableRowActions` - type `boolean`
+- `positionActionsColumn` - type `'first' | 'last'`
+- `renderRowActionMenuItems` - type `({ closeMenu, row, table }) => ReactNode[]`
+- `renderRowActions` - type `({ cell, row, table }) => ReactNode`
+
+### Enable Row Actions
+
+You can enable the row actions feature by setting the `enableRowActions` table option to `true`.
+
+You can then add your row action components with either the `renderRowActions` or `renderRowActionMenuItems` props.
+
+#### Add Row Actions Menu Items
+
+If you want to embed all of your row actions into a single menu, you can use the `renderRowActionMenuItems` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowActions: true,
+  renderRowActionMenuItems: ({ row }) => [
+    <MenuItem key="edit" onClick={() => console.info('Edit')}>
+      Edit
+    </MenuItem>,
+    <MenuItem key="delete" onClick={() => console.info('Delete')}>
+      Delete
+    </MenuItem>,
+  ],
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+> Live example: `row-actions-menu-items` (call get_mrt_example with that id).
+
+#### Add Row Action Buttons
+
+If you want to add row action buttons, you can use the `renderRowActions` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowActions: true,
+  renderRowActions: ({ row }) => (
+    <Box>
+      <IconButton onClick={() => console.info('Edit')}>
+        <EditIcon />
+      </IconButton>
+      <IconButton onClick={() => console.info('Delete')}>
+        <DeleteIcon />
+      </IconButton>
+    </Box>
+  ),
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+> Live example: `row-actions-buttons` (call get_mrt_example with that id).
+
+### Customize Row Actions Column
+
+#### Change Row Actions Display Column Options
+
+You can customize all column def options for the row actions column, including the column width, header text, and more using the `displayColumnDefOptions` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowActions: true,
+  displayColumnDefOptions: {
+    'mrt-row-actions': {
+      header: 'Change Account Settings', //change header text
+      size: 300, //make actions column wider
+    },
+  },
+  renderRowActions: ({ table }) => (
+    <Box>
+      <Button>Button 1</Button>
+      <Button>Button 2</Button>
+      <Button>Button 3</Button>
+    </Box>
+  ),
+});
+```
+
+#### Position Row Actions Column
+
+You can position the row actions column to the left or right (first or last column) of the table using the `positionActionsColumn` table option. The default is as the first column.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowActions: true,
+  positionActionsColumn: 'last',
+  renderRowActions: ({ table }) => (
+    //...
+  ),
+})
+```
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-row-actions-examples)**

package/data/guides/row-numbers.md

@@ -0,0 +1,24 @@
+## Row Numbers Feature Guide
+
+Material React Table has an easy to implement row number features. There are two row number modes that you can enable. You can have row numbers that are associated with the data in the table ([original mode](<#enable-row-numbers-(original-mode)>)), or you can have row numbers that are just statically part of the table ([static mode](<#enable-row-numbers-(static-mode)>)).
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `enableRowNumbers` - type `boolean`
+- `rowNumberDisplayMode` - type `'original' | 'static'` - default `'original'`
+
+### Enable Row Numbers (Static Mode)
+
+In the default rowNumberDisplayMode (`static`), row numbers are just a static part of the table in their own column. They act like the row numbers in an excel spreadsheet. Sorting and filtering will not affect the row numbers.
+
+> Live example: `enable-row-numbers-static` (call get_mrt_example with that id).
+
+### Enable Row Numbers (Original Mode)
+
+Alternatively, use the `"original"` rowNumberDisplayMode to have row numbers linked to the original index of the data array. This means that when you search or filter, the same row numbers will stay with the same rows as data is sorted and filtered.
+
+> Live example: `enable-row-numbers-original` (call get_mrt_example with that id).
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-row-number-examples)**

package/data/guides/row-ordering-dnd.md

@@ -0,0 +1,51 @@
+## Row Ordering (DnD) Feature Guide
+
+Material React Table has exposed all the APIs necessary to enable rich row drag-and-drop features that you can easily build to meet your needs. This includes the ability to reorder rows, drag rows to other tables, or drag rows to other UI in your application.
+
+> This is not the [Sorting Guide](/docs/guides/sorting), which is a different feature.
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `enableRowOrdering` - type `boolean`
+- `muiRowDragHandleProps` - type `IconButtonProps | ({ row, table }) => IconButtonProps`
+- `onDraggingRowChange` - type `OnChangeFn<MRT_Row<TData> | null>`
+- `onHoveredRowChange` - type `OnChangeFn<MRT_Row<TData> | null>`
+
+### Relevant State
+
+Relevant state options (get_mrt_api has full details):
+
+- `draggingRow` - type `MRT_Row | null` - a variable representing the currently dragged row
+- `hoveredRow` - type `MRT_Row | null`
+
+### Enable Row Ordering
+
+A common use for row drag and drop is to allow users to reorder rows in a table. This can be done by setting the `enableRowOrdering` table option to `true`, then setting up an `onDragEnd` event handler on the `muiRowDragHandleProps` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowOrdering: true,
+  enableSorting: false, //usually you do not want to sort when re-ordering
+  muiRowDragHandleProps: {
+    onDragEnd: (event, data) => {
+      //data re-ordering logic here
+    },
+  },
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+> Live example: `enable-row-ordering` (call get_mrt_example with that id).
+
+### Drag and Drop Rows to Other UI or Tables
+
+The drag-and-drop features are not limited to just internally within the same table. You can also use them to drag rows to other UI elements in your application or even to other tables. This can be done by setting the `enableRowDragging` table option to `true` and setting up an `onDragEnd` event handler on the `muiRowDragHandleProps` table option to perform whatever logic you want to happen when a row is dropped.
+
+> Live example: `enable-row-dragging` (call get_mrt_example with that id).
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-row-ordering-examples)**

package/data/guides/row-pinning.md

@@ -0,0 +1,96 @@
+## Row Pinning Feature Guide
+
+Material React Table has a powerful row pinning feature that allows you to either pin rows to the top and bottom of the table as a user scrolls, or pin rows to the top and bottom of the table regardless of scrolling.
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `enableRowSelection` - type `boolean | (row: MRT_Row) => boolean` - Enables row selection either for every row, or on a per-row basis using a function.
+- `keepPinnedRows` - type `boolean` - default `true`
+- `onRowPinningChange` - type `OnChangeFn<RowSelectionState>` - If provided, this function will be called with an updaterFn when state.rowPinning changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+- `rowPinningDisplayMode` - type `'sticky' | 'top' | 'bottom' | 'top-and-bottom' | 'select-sticky' | 'select-top' | 'select-bottom'` - default `'sticky'`
+
+### Relevant State
+
+Relevant state options (get_mrt_api has full details):
+
+- `rowPinning` - type `{ top: string[], bottom: string[] }` - default `{ top: [], bottom: [] }` - an object with top and bottom properties, each of which is an array of strings representing the rows that are pinned to the top or bottom of the table
+
+### Row Pinning Display Modes
+
+You can enable the row pinning feature with the `enableRowPinning` table option. There are multiple display modes that you can choose from with the `rowPinningDisplayMode` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowPinning: true,
+  rowPinningDisplayMode: 'sticky', // default
+});
+```
+
+- `sticky` - This is the default display mode. It will make rows stick to the top and bottom of the table as a user scrolls.
+- `top` - This will statically pin rows to the top of the table upon pinning.
+- `bottom` - This will statically pin rows to the bottom of the table upon pinning.
+- `top-and-bottom` - This allows the user to statically pin rows to either the top or bottom of the table.
+- `select-sticky` - This pins selected rows to the top and bottom of the table as a user scrolls. (alternative pinning UI)
+- `select-top` - This statically pins selected rows to the top of the table upon pinning. (alternative pinning UI)
+- `select-bottom` - This statically pins selected rows to the bottom of the table upon pinning. (alternative pinning UI)
+
+### Sticky Row Pinning
+
+By default, the row pinning feature will add a position sticky style to the pinned rows. This means that the pinned rows will stay in place if the row is already in view. However, the rows will stay in view as the user scrolls up or down.
+
+Sticky row pinning will work best if you give your rows a fixed height, or at least disable any kind of whitespace wrapping.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowPinning: true,
+  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,
+      },
+    };
+  },
+  rowPinningDisplayMode: 'sticky', // default
+});
+```
+
+> Live example: `enable-row-pinning-sticky` (call get_mrt_example with that id).
+
+> Note: Sticky Row Pinning is not currently compatible with row virtualization.
+
+### Static Row Pinning
+
+Some of the other row pinning modes will show pinned rows at the top or bottom of the the table regardless of scrolling. This is a simpler implementation of the row pinning feature.
+
+Static row pinning does not require set row heights, as they will render in a normal `<tbody>` element that itself is what is sticky.
+
+> Live example: `enable-row-pinning-static` (call get_mrt_example with that id).
+
+### Alternative Selection Row Pinning UI
+
+By default, the row pinning feature adds a pinning display column with pinning buttons for each row. However, you can instead combine the row pinning feature with the row selection feature to pin selected rows.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowPinning: true,
+  enableRowSelection: true,
+  rowPinningDisplayMode: 'select-sticky',
+});
+```
+
+> Live example: `enable-row-pinning-select` (call get_mrt_example with that id).

package/data/guides/row-selection.md

@@ -0,0 +1,237 @@
+## Row Selection Guide
+
+Material React Table has a built-in row selection feature and makes it easy to manage the selection state yourself. This guide demonstrates how to enable row selection and customize the selection behavior.
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `enableBatchRowSelection` - type `boolean` - default `true` - If true, the user can select multiple rows at once by holding down the shift key while clicking.
+- `enableMultiRowSelection` - type `boolean` - default `true` - If true, the user can select multiple rows at once with a checkbox. If false, the user can only select one row at a time with a radio button.
+- `enableRowSelection` - type `boolean | (row: MRT_Row) => boolean` - Enables row selection either for every row, or on a per-row basis using a function.
+- `enableSelectAll` - type `boolean` - default `true`
+- `enableSubRowSelection` - type `boolean` - default `true`
+- `getRowId` - type `(originalRow: TData, index: number, parent?: MRT_Row<TData>) => string` - This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with . using their grandparents' index eg. index.index.index). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc.
+- `muiSelectAllCheckboxProps` - type `CheckboxProps | ({ table }) => CheckboxProps`
+- `muiSelectCheckboxProps` - type `CheckboxProps | ({ row, table }) => CheckboxProps`
+- `onRowSelectionChange` - type `OnChangeFn<RowSelectionState>` - If provided, this function will be called with an updaterFn when state.rowSelection changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+- `positionToolbarAlertBanner` - type `'bottom' | 'top' | 'none'` - default `'top'`
+- `renderToolbarAlertBannerContent` - type `({ table, groupedAlert, selectedAlert }) => ReactNode`
+- `rowPinningDisplayMode` - type `'sticky' | 'top' | 'bottom' | 'top-and-bottom' | 'select-sticky' | 'select-top' | 'select-bottom'` - default `'sticky'`
+- `selectAllMode` - type `'all' | 'page'` - default `'page'`
+
+### Relevant State
+
+Relevant state options (get_mrt_api has full details):
+
+- `rowSelection` - type `Record<string, boolean>` - default `{}`
+
+### Enable Row Selection
+
+Selection checkboxes can be enabled with the `enableRowSelection` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowSelection: true,
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+#### Enable Row Selection Conditionally Per Row
+
+You can also enable row selection conditionally per row with the same `enableRowSelection` table option, but with a callback function instead of a boolean.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowSelection: (row) => row.original.age > 18, //disable row selection for rows with age <= 18
+});
+```
+
+### Batch Row Selection
+
+> New in v2.11.0
+
+By default, when the user holds down the <kbd>Shift</kbd> key and clicks a row, all rows between the last selected row and the clicked row will be selected. This can be disabled with the `enableBatchRowSelection` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowSelection: true,
+  enableBatchRowSelection: false, //disable batch row selection with shift key
+});
+```
+
+### Access Row Selection State
+
+There are two ways to access the selection state. You can either manage the selection state yourself or read it from the table instance.
+
+#### Manage Row Selection State
+
+The row selection state is managed internally by default, but you will more than likely want to have access to that state yourself. Here is how you can simply get access to the row selection state, specifically:
+
+```tsx
+const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({}); //ts type available
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowSelection: true,
+  onRowSelectionChange: setRowSelection,
+  state: { rowSelection },
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+#### Read Row Selection State from Table Instance
+
+Alternatively, you can read the selection state directly from the `table` instance like so:
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowSelection: true,
+  renderTopToolbarCustomActions: ({ table }) => (
+    <Button
+      onClick={() => {
+        const rowSelection = table.getState().rowSelection; //read state
+        const selectedRows = table.getSelectedRowModel().rows; //or read entire rows
+      }}
+    >
+      Download Selected Users
+    </Button>
+  ),
+});
+
+useEffect(() => {
+  //fetch data based on row selection state or something
+}, [table.getState().rowSelection]);
+
+return <MaterialReactTable table={table} />;
+```
+
+> Note: `table.getSelectedRowModel().rows` only really works with client-side pagination. Use `rowSelection` state if you are using server-side pagination. Row Models only contain rows based on the `data` you pass in.
+
+#### Useful Row IDs
+
+By default, the `row.id` for each row in the table is simply the index of the row in the table. You can override this and instruct Material React Table to use a more useful Row ID with the `getRowId` table option. For example, you may want something like this:
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowSelection: true,
+  getRowId: (originalRow) => originalRow.userId,
+});
+```
+
+As rows get selected, the `rowSelection` state will look like this:
+
+```tsx
+{
+  "3f25309c-8fa1-470f-811e-cdb082ab9017": true,
+  "be731030-df83-419c-b3d6-9ef04e7f4a9f": true,
+  ...
+}
+```
+
+This can be very useful when you are trying to read your selection state and do something with your data as the row selection changes.
+
+> Live example: `enable-row-selection` (call get_mrt_example with that id).
+
+### Select Row on Row Click
+
+By default, a row can only be selected by either clicking the checkbox or radio button in the `mrt-row-select` column. If you want to be able to select a row by clicking anywhere on the row, you can add your own `onClick` function to a table body row like this:
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowSelection: true,
+  //clicking anywhere on the row will select it
+  muiTableBodyRowProps: ({ row, staticRowIndex, table }) => ({
+    onClick: (event) =>
+      getMRT_RowSelectionHandler({ row, staticRowIndex, table })(event), //import this helper function from material-react-table
+    sx: { cursor: 'pointer' },
+  }),
+});
+```
+
+### Disable Select All
+
+By default, if you enable selection for each row, there will also be a select all checkbox in the header of the checkbox column. It can be hidden with the `enableSelectAll` table option.
+
+```tsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowSelection: true,
+  enableSelectAll: false,
+});
+```
+
+### Position or Hide Alert Banner Selection Message
+
+By default, an alert banner will be show as rows are selected. You can use the `positionToolbarAlertBanner` table option to show the alert banner in the top toolbar, bottom toolbar, as an overlay in the table head, or hide it completely.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowSelection: true,
+  positionToolbarAlertBanner: 'head-overlay', //show alert banner over table head, top toolbar, or bottom toolbar
+});
+```
+
+### Single Row Selection
+
+By default, the `enableMultiRowSelection` table option is set to `true`, which means that multiple rows can be selected at once with a checkbox. If you want to only allow a single row to be selected at a time, you can set this table option to `false` and a radio button will be used instead of a checkbox.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableMultiRowSelection: false, //shows radio buttons instead of checkboxes
+  enableRowSelection: true,
+});
+```
+
+> Live example: `single-row-selection` (call get_mrt_example with that id).
+
+### Customize Select Checkboxes or Radio Buttons
+
+The selection checkboxes can be customized with the `muiSelectCheckboxProps` table option. Any prop that can be passed to a Mui Checkbox component can be specified here. For example, you may want to use a different color for the checkbox or use some logic to disable certain rows from being selected.
+
+```tsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowSelection: true,
+  muiSelectCheckboxProps: {
+    color: 'secondary',
+  },
+});
+```
+
+> Live example: `customize-row-selection` (call get_mrt_example with that id).
+
+### Manual Row Selection Without Checkboxes
+
+You may have a use case where you want to be able to select rows by clicking them, but you do not want to show any checkboxes or radio buttons. You can do this by implementing a row selection feature yourself while keeping the `enableRowSelection` table option `false` so that the default selection behavior is disabled.
+
+> Live example: `manual-selection` (call get_mrt_example with that id).
+
+### Sticky Pinned Row Selection
+
+You can combine the row pinning feature with the row selection feature to create a cool user experience where selected rows always stay within view.
+
+> Live example: `enable-row-pinning-select` (call get_mrt_example with that id).
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-selection-examples)**