@mini_7/material-react-table-mcp 4.0.0

package/data/reference/mrt-components.md

@@ -0,0 +1,183 @@
+## MRT Components
+
+In previous versions of `material-react-table`, you only had the option to use the `<MaterialReactTable />` component. Now in version 2, all internal MRT components are exported for you to optionally use to build up your own custom table components.
+
+### \<MaterialReactTable /\>
+
+[View Source Code on GitHub](https://github.com/gyminii/material-react-table/blob/v4/packages/material-react-table/src/components/MaterialReactTable.tsx)
+
+For most use cases, you will probably just use the default `<MaterialReactTable />` component.
+
+It accepts table options as props, just like in v1, but it also now simply accepts the `table` instance as its only prop instead. You have the choice to use the `useMaterialReactTable` hook to create the table instance in your own scope or not. Using the `table` prop with the `useMaterialReactTable` hook is recommended, because it will give you more flexibility as your table features get more complex.
+
+```jsx
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+} from 'material-react-table';
+//...
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowPinning: true,
+});
+return <MaterialReactTable table={table} />; //recommended
+```
+
+```jsx
+import { MaterialReactTable } from 'material-react-table';
+//...
+return <MaterialReactTable columns={columns} data={data} enableRowPinning />; //passing props instead like in v1 is possible
+```
+
+> Do not pass both a `table` prop and other table options as props. Additional table options passed to the `<MaterialReactTable />` component will be ignored if a `table` prop is passed. Either specify all table options in the `useMaterialReactTable` hook or pass all of them as props to the `<MaterialReactTable />` component.
+
+### MRT\_\* Sub Components
+
+Material React Table now exports all of its internal components. You can use them for your own use cases.
+
+#### Table Components
+
+[View Table Components Source Code on GitHub](https://github.com/gyminii/material-react-table/tree/v4/packages/material-react-table/src/components/table)
+
+##### \<MRT_TablePaper /\>
+
+The `<MRT_TablePaper />` component is the outermost component of the table. Using this is pretty much the same thing as using the `<MaterialReactTable />` component, except that you cannot pass table options as props to it.
+
+The Paper component includes UI for the table and the toolbar components.
+
+##### \<MRT_TableContainer /\>
+
+The `<MRT_TableContainer />` component is the container for the table. It only contains the table ui, but none of the toolbar components.
+
+This is a popular use case for tables that do not want the built-in toolbars, but still want all of the other table features.
+
+##### \<MRT_Table /\>
+
+The `<MRT_Table />` component contains the `<table>` element, and all of the table head, body, and footer components.
+
+Be aware that using this deep of a component, you will lose out on row virtualization, modal editing, and full screen features. Use the above `<MRT_TableContainer />` if you want to use those features.
+
+##### \<MRT_TableLoadingOverlay /\>
+
+Shows a loading spinner over the table above the `MRT_Table` component when the table is loading.
+
+#### TableHead Components
+
+[View TableHead Components Source Code on GitHub](https://github.com/gyminii/material-react-table/tree/v4/packages/material-react-table/src/components/head)
+
+##### \<MRT_TableHead /\>
+
+The `<MRT_TableHead />` component contains the `<thead>` element, and all of the table head rows.
+
+##### \<MRT_TableHeadRow /\>
+
+The `<MRT_TableHeadRow />` is a `<tr>` element that contains all of the table head cells in a row
+
+##### \<MRT_TableHeadCell /\>
+
+The `<MRT_TableHeadCell />` is a `<th>` element that contains all of the table head cell components. It contains all of the other table head cell components down below depending on which features are enabled.
+
+##### \<MRT_TableHeadCellColumnActionsButton /\>
+
+A button that opens up the column actions menu.
+
+##### \<MRT_TableHeadCellSortLabel /\>
+
+The Sort Icon Button and Label next to a table header
+
+##### \<MRT_TableHeadCellFilterLabel /\>
+
+The Filter Icon Button and Label next to a table header
+
+##### \<MRT_TableHeadCellGrabHandle /\>
+
+The Grab Handle Icon Button next to a table header used for column dragging
+
+##### \<MRT_TableHeadCellResizeHandle /\>
+
+The Resize Handle Icon Button next to a table header used for column resizing
+
+##### \<MRT_TableHeadCellFilterContainer /\>
+
+The Filter Container that contains the filter input and filter actions
+
+#### TableBody Components
+
+[View TableBody Components Source Code on GitHub](https://github.com/gyminii/material-react-table/tree/v4/packages/material-react-table/src/components/body)
+
+##### \<MRT_TableBody /\>
+
+The `<MRT_TableBody />` component contains the `<tbody>` element, and all of the table body rows. It has the ability to render multiple table bodies, depending on if static row pinning features are enabled and used.
+
+##### \<MRT_TableBodyRow /\>
+
+The `<MRT_TableBodyRow />` is a `<tr>` element that contains all of the table body cells in a row.
+
+##### \<MRT_TableDetailPanel /\>
+
+A row and all column-spanning row for rendering detail panels for a row.
+
+##### \<MRT_TableBodyCell /\>
+
+The `<MRT_TableBodyCell />` is a `<td>` element that surrounds the cell value or custom `Cell` render.
+
+##### \<MRT_TableBodyCellValue /\>
+
+Renders the value of a cell. This is a popular component to use as an alternative to TanStack Table's `flexRender` method. It renders everything inside of the `<td>`, but not the `<td>` itself.
+
+##### \<MRT_TableBodyRowGrabHandle /\>
+
+A button for grabbing a row for dragging.
+
+##### \<MRT_TableBodyRowPinButton /\>
+
+A button or buttons for pinning a row.
+
+#### TableFooter Components
+
+[View TableFooter Components Source Code on GitHub](https://github.com/gyminii/material-react-table/tree/v4/packages/material-react-table/src/components/footer)
+
+##### \<MRT_TableFooter /\>
+
+The `<MRT_TableFooter />` component contains the `<tfoot>` element, and all of the table footer rows.
+
+##### \<MRT_TableFooterRow /\>
+
+The `<MRT_TableFooterRow />` is a `<tr>` element that contains all of the table footer cells in a row.
+
+##### \<MRT_TableFooterCell /\>
+
+The `<MRT_TableFooterCell />` is a `<td>` element that surrounds the cell value or custom `Footer` render.
+
+#### Input Components
+
+[View Input Components Source Code on GitHub](https://github.com/gyminii/material-react-table/tree/v4/packages/material-react-table/src/components/inputs)
+
+##### \<MRT_EditCellTextField /\>
+
+The textfield component for editing a cell value that can either show in a modal or table cell.
+
+##### \<MRT_GlobalFilterTextField /\>
+
+The search textfield component for global filtering.
+
+##### \<MRT_FilterTextField /\>
+
+The textfield component for filtering a column. A somewhat comprehensive component that can be a textfield, select, multi-select, or date picker.
+
+##### \<MRT_FilterCheckbox /\>
+
+The checkbox component for filtering a column by boolean values.
+
+##### \<MRT_FilterRangeSlider /\>
+
+The range slider component for filtering a column by a range of numbers.
+
+##### \<MRT_FilterFilterRangeFields /\>
+
+A Container component that will render two MRT_FilterTextField components for filtering in a range (min and max).
+
+##### \<MRT_SelectCheckbox /\>
+
+A checkbox component for selecting a row or selecting all rows from the table header.

package/data/reference/mrt-hooks.md

@@ -0,0 +1,125 @@
+## MRT Hooks
+
+MRT has been adopting more and more of a hooks based approach for its internal logic. Its API is becoming more standardized so that you can use the same hooks that the MRT components use internally to build your own custom headless table if you want to.
+
+### useMaterialReactTable
+
+[Source Code](https://github.com/gyminii/material-react-table/blob/v4/packages/material-react-table/src/hooks/useMaterialReactTable.ts)
+
+> This is probably the only MRT hook you will need to use, unless you are writing a custom headless table.
+
+This is the main hook from Material React Table. It creates a TanStack Table instance with all of the features that MRT provides and that you enable, and uses the proper default table options.
+
+```tsx
+import { useMaterialReactTable } from 'material-react-table';
+
+const table = useMaterialReactTable({
+  ...options,
+});
+```
+
+This hook is the combination of 2 other internal MRT hooks: [`useMRT_TableOptions`](#usemrt_tableoptions), and [`useMRT_TableInstance`](#usemrt_tableinstance).
+
+### useMRT_TableOptions
+
+[Source Code](https://github.com/gyminii/material-react-table/blob/v4/packages/material-react-table/src/hooks/useMRT_TableOptions.ts)
+
+This hook simply takes in your custom table options and merges them with the default table options. It also does some extra logic to make sure that some default table options are set correctly based on other enabled features. For example, if you enable row virtualization features, the sticky header will also be enabled by default, and the layoutMode will adjust accordingly.
+
+```tsx
+import { useMRT_TableOptions } from 'material-react-table';
+
+const transformedTableOptions = useMRT_TableOptions({
+  ...options,
+});
+```
+
+### useMRT_TableInstance
+
+[Source Code](https://github.com/gyminii/material-react-table/blob/v4/packages/material-react-table/src/hooks/useMRT_TableInstance.ts)
+
+This is where most of the magic happens. This hook is responsible for creating the TanStack Table instance, and adding all of the MRT features to it. It needs table options to be passed in to it correctly, with good defaults, and it will return the table instance.
+
+```tsx
+import { useMRT_TableInstance } from 'material-react-table';
+
+const table = useMRT_TableInstance({
+  ...transformedTableOptions, //usually from useMRT_TableOptions
+});
+```
+
+This hook also uses the [`useMRT_Effects`](#usemrt_effects)
+
+### useMRT_Effects
+
+[Source Code](https://github.com/gyminii/material-react-table/blob/v4/packages/material-react-table/src/hooks/useMRT_Effects.ts)
+
+This hook is responsible for adding some extra useEffect hooks to the table instance. These hooks are needed by some MRT features on a table wide level.
+
+### useMRT_Rows
+
+> New in v2.2.0
+
+[Source Code](https://github.com/gyminii/material-react-table/blob/v4/packages/material-react-table/src/hooks/useMRT_Rows.ts)
+
+This hook is mostly a wrapper around `table.getRowModel`, but with a bit more custom logic for fuzzy ranking, row pinning, and more. It consumes a `table` instance and returns the rows that should be rendered in the main table body. This can be a useful hook if you are writing a custom headless table, but still want all of the extra MRT enhanced behavior for fuzzy ranking, row pinning, etc. Alternatively, you can just use `table.getRowModel()` for a more vanilla TanStack Table experience.
+
+```tsx
+import { useMaterialReactTable, useMRT_Rows } from 'material-react-table';
+
+const table = useMaterialReactTable({
+  ...options,
+});
+
+const rows = useMRT_Rows(table);
+
+return rows.map((row) => {
+  //render row
+});
+```
+
+### useMRT_ColumnVirtualizer
+
+> New in v2.2.0
+
+[Source Code](https://github.com/gyminii/material-react-table/blob/v4/packages/material-react-table/src/hooks/useMRT_ColumnVirtualizer.ts)
+
+This hook is a wrapper around the `useVirtualizer` hook from TanStack Virtual. It consumes a `table` instance and returns a Column Virtualizer instance that is optimized for MRT table columns, with considerations for other MRT features like column pinning, column resizing, column hiding, and more.
+
+```tsx
+import {
+  useMaterialReactTable,
+  useMRT_ColumnVirtualizer,
+} from 'material-react-table';
+
+const table = useMaterialReactTable({
+  ...options,
+});
+
+const columnVirtualizer = useMRT_ColumnVirtualizer(table);
+```
+
+You would only need to use this hook if you are writing a custom headless table and want the same default column virtualization behavior that MRT provides. If you are using the MRT components, this hook is already used internally by the `MRT_Table` component.
+
+### useMRT_RowVirtualizer
+
+> New in v2.2.0
+
+[Source Code](https://github.com/gyminii/material-react-table/blob/v4/packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts)
+
+This hook is a wrapper around the `useVirtualizer` hook from TanStack Virtual. It consumes a `table` instance and returns a Row Virtualizer instance that is optimized for MRT table rows, with considerations for other MRT features like row pinning, row dragging, and more.
+
+```tsx
+import {
+  useMaterialReactTable,
+  useMRT_RowVirtualizer,
+} from 'material-react-table';
+
+const table = useMaterialReactTable({
+  ...options,
+});
+
+const rowVirtualizer = useMRT_RowVirtualizer(table);
+```
+
+You would only need to use this hook if you are writing a custom headless table and want the same default row virtualization behavior that MRT provides. If you are using the MRT components, this hook is already used internally by the `MRT_Table` component.

package/data/skills/composable-components/SKILL.md

@@ -0,0 +1,189 @@
+---
+name: composable-components
+description: >
+  Compose a custom Material React Table V4 layout from exported MRT_* components that all take the same table prop: MRT_TablePaper, MRT_TableContainer, MRT_Table, MRT_TopToolbar, MRT_TablePagination, MRT_GlobalFilterTextField, MRT_ToolbarInternalButtons, MRT_ShowHideColumnsButton, and MRT_TableBodyCellValue for fully custom markup. Load for tables inside cards or dialogs, toolbars placed outside the table, split layouts, or headless rendering with MRT state.
+metadata:
+  type: framework
+  library: '@mini_7/material-react-table'
+  library_version: '4.0.0'
+  framework: react
+requires:
+  - getting-started
+sources:
+  - 'gyminii/material-react-table:apps/material-react-table-docs/pages/docs/api/mrt-components.mdx'
+  - 'gyminii/material-react-table:apps/material-react-table-docs/examples/custom-headless/sandbox/src/TS.tsx'
+  - 'gyminii/material-react-table:apps/material-react-table-docs/examples/custom-top-toolbar/sandbox/src/TS.tsx'
+  - 'gyminii/material-react-table:apps/material-react-table-docs/examples/external-toolbar/sandbox/src/TS.tsx'
+  - 'gyminii/material-react-table:packages/material-react-table/src/index.ts'
+---
+
+This skill builds on `getting-started`. `MaterialReactTable` is a thin composition of exported sub-components. Because every sub-component takes the same `table` instance as a prop, you can render any subset of them anywhere in your tree while MRT keeps managing state.
+
+## Setup
+
+```tsx
+import {
+  MRT_GlobalFilterTextField,
+  MRT_TableContainer,
+  MRT_TablePagination,
+  MRT_ToggleFiltersButton,
+  useMaterialReactTable,
+} from '@mini_7/material-react-table'
+
+const table = useMaterialReactTable({ columns, data, enableBottomToolbar: false })
+
+return (
+  <Card>
+    <CardHeader
+      title="People"
+      action={
+        <Stack direction="row" gap={1}>
+          <MRT_GlobalFilterTextField table={table} />
+          <MRT_ToggleFiltersButton table={table} />
+        </Stack>
+      }
+    />
+    <MRT_TableContainer table={table} />
+    <CardActions sx={{ justifyContent: 'flex-end' }}>
+      <MRT_TablePagination table={table} />
+    </CardActions>
+  </Card>
+)
+```
+
+`MRT_TableContainer` renders the scroll container, the table, the loading overlay, the edit row modal, and the cell action menu. Turn off the built-in toolbars with `enableTopToolbar` and `enableBottomToolbar` when you place their pieces elsewhere.
+
+## Core Patterns
+
+### Layers of the default component
+
+```text
+MRT_TablePaper
+  MRT_TopToolbar
+    MRT_GlobalFilterTextField, MRT_ToolbarInternalButtons, MRT_ToolbarAlertBanner, MRT_TablePagination
+  MRT_TableContainer
+    MRT_Table
+      MRT_TableHead > MRT_TableHeadRow > MRT_TableHeadCell
+      MRT_TableBody > MRT_TableBodyRow > MRT_TableBodyCell, MRT_TableDetailPanel
+      MRT_TableFooter > MRT_TableFooterRow > MRT_TableFooterCell
+  MRT_BottomToolbar
+```
+
+Start from the layer just above what you need to change. Replacing `MRT_TopToolbar` with your own component is the most common cut; replacing `MRT_TableBodyRow` is rarely worth it because `muiTableBodyRowProps` covers styling and events.
+
+### Toolbar buttons are individual exports
+
+```tsx
+import {
+  MRT_ShowHideColumnsButton,
+  MRT_ToggleDensePaddingButton,
+  MRT_ToggleFullScreenButton,
+} from '@mini_7/material-react-table'
+
+<MRT_ShowHideColumnsButton table={table} />
+<MRT_ToggleDensePaddingButton table={table} />
+<MRT_ToggleFullScreenButton table={table} />
+```
+
+Each button reads and writes MRT state on the shared instance, so it works from any position in the tree.
+
+### Fully custom markup with MRT_TableBodyCellValue
+
+```tsx
+import { MRT_TableBodyCellValue, flexRender } from '@mini_7/material-react-table'
+
+<Table>
+  <TableHead>
+    {table.getHeaderGroups().map((group) => (
+      <TableRow key={group.id}>
+        {group.headers.map((header) => (
+          <TableCell key={header.id}>
+            {header.isPlaceholder ? null : flexRender(header.column.columnDef.Header ?? header.column.columnDef.header, header.getContext())}
+          </TableCell>
+        ))}
+      </TableRow>
+    ))}
+  </TableHead>
+  <TableBody>
+    {table.getRowModel().rows.map((row, staticRowIndex) => (
+      <TableRow key={row.id} selected={row.getIsSelected()}>
+        {row.getVisibleCells().map((cell) => (
+          <TableCell key={cell.id}>
+            <MRT_TableBodyCellValue cell={cell} table={table} staticRowIndex={staticRowIndex} />
+          </TableCell>
+        ))}
+      </TableRow>
+    ))}
+  </TableBody>
+</Table>
+```
+
+`MRT_TableBodyCellValue` applies the column's `Cell`, `AggregatedCell`, `GroupedCell`, filter match highlighting, and click to copy, so custom markup keeps MRT cell behaviour. `table.getRowModel()` is the final model after filtering, sorting, grouping, expanding, and pagination.
+
+### Row virtualization in custom layouts
+
+Render `MRT_TableContainer` rather than `MRT_Table` when `enableRowVirtualization` or `enableColumnVirtualization` is on. The container owns the scroll element the virtualizers measure.
+
+## Common Mistakes
+
+### HIGH Rendering MRT components without the table prop
+
+Wrong:
+
+```tsx
+<MRT_TablePagination />
+```
+
+Correct:
+
+```tsx
+<MRT_TablePagination table={table} />
+```
+
+MRT does not use React context. Every component requires the instance explicitly.
+
+Source: `packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx`
+
+### MEDIUM Duplicating the toolbar
+
+Wrong:
+
+```tsx
+const table = useMaterialReactTable({ columns, data })
+<MRT_GlobalFilterTextField table={table} />
+<MaterialReactTable table={table} />
+```
+
+Correct:
+
+```tsx
+const table = useMaterialReactTable({ columns, data, enableTopToolbar: false })
+<MRT_GlobalFilterTextField table={table} />
+<MaterialReactTable table={table} />
+```
+
+The default top toolbar already contains the search field, so two inputs fight over `globalFilter`.
+
+Source: `docs/api/mrt-components.mdx`
+
+### MEDIUM Using a v8 header render
+
+Wrong:
+
+```tsx
+flexRender(header.column.columnDef.header, header.getContext())
+```
+
+Correct:
+
+```tsx
+flexRender(header.column.columnDef.Header ?? header.column.columnDef.header, header.getContext())
+```
+
+MRT columns carry both `header` (string) and `Header` (custom render). Falling back to the string alone drops custom header markup.
+
+Source: `apps/material-react-table-docs/examples/custom-headless/sandbox/src/TS.tsx`
+
+## API Discovery
+
+`node_modules/@mini_7/material-react-table/dist/index.d.ts` exports every `MRT_*` component with its props interface; all of them include `table: MRT_TableInstance<TData>`. The component tree with links to source is at `/docs/api/mrt-components`.

package/data/skills/customization/SKILL.md

@@ -0,0 +1,190 @@
+---
+name: customization
+description: >
+  Style and extend Material React Table V4 through mui*Props objects and callbacks, the sx prop, Material UI V9 slotProps on text fields, render* slots for toolbars, row actions, detail panels and empty states, displayColumnDefOptions, icons, and localization. Load for theming, conditional row or cell styling, custom toolbar buttons, or replacing built-in display columns.
+metadata:
+  type: framework
+  library: '@mini_7/material-react-table'
+  library_version: '4.0.0'
+  framework: react
+requires:
+  - getting-started
+sources:
+  - 'gyminii/material-react-table:apps/material-react-table-docs/pages/docs/guides/customize-components.mdx'
+  - 'gyminii/material-react-table:apps/material-react-table-docs/pages/docs/guides/display-columns.mdx'
+  - 'gyminii/material-react-table:apps/material-react-table-docs/pages/docs/guides/toolbar-customization.mdx'
+  - 'gyminii/material-react-table:apps/material-react-table-docs/pages/docs/guides/row-actions.mdx'
+  - 'gyminii/material-react-table:MIGRATION.md'
+---
+
+This skill builds on `getting-started`. MRT renders Material UI components and forwards props to each of them through a matching `mui<Component>Props` option, so customization means passing Material UI props, not overriding MRT internals.
+
+## Setup
+
+```tsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  muiTablePaperProps: { elevation: 0, sx: { borderRadius: 0 } },
+  muiTableBodyRowProps: ({ row }) => ({
+    sx: { backgroundColor: row.getIsSelected() ? 'action.selected' : undefined },
+  }),
+  muiTableBodyCellProps: ({ column }) => ({
+    align: column.id === 'amount' ? 'right' : 'left',
+  }),
+})
+```
+
+Every `mui*Props` option accepts a static object or a callback. The callback receives `table` plus whatever is in scope for that component: `row`, `cell`, `column`, `staticRowIndex`, `isDetailPanel`, and similar. Static objects are cheaper; use a callback only when the props depend on data.
+
+## Core Patterns
+
+### Text field options use Material UI V9 slotProps
+
+```tsx
+muiSearchTextFieldProps: {
+  placeholder: 'Search people',
+  slotProps: {
+    input: { startAdornment: <SearchIcon /> },
+    htmlInput: { 'aria-label': 'Search people' },
+    inputLabel: { shrink: true },
+  },
+},
+```
+
+`muiEditTextFieldProps`, `muiFilterTextFieldProps`, and `muiSearchTextFieldProps` take `slotProps.input`, `slotProps.htmlInput`, `slotProps.select`, and `slotProps.inputLabel`. MRT merges the object form of each slot after its own defaults and composes `sx`. The function form `(ownerState) => props` is ignored.
+
+### Column-level props override table-level props
+
+```tsx
+const columns: MRT_ColumnDef<Person>[] = [
+  {
+    accessorKey: 'salary',
+    header: 'Salary',
+    muiTableHeadCellProps: { align: 'right' },
+    muiTableBodyCellProps: { align: 'right' },
+    Cell: ({ cell }) => cell.getValue<number>().toLocaleString('en-US', { style: 'currency', currency: 'USD' }),
+  },
+]
+```
+
+`muiTableHeadCellProps`, `muiTableBodyCellProps`, `muiTableFooterCellProps`, `muiFilter*Props`, `muiEditTextFieldProps`, `muiCopyButtonProps`, and `muiColumnActionsButtonProps` exist on both the table options and the column definition. The column value wins.
+
+### render* slots add UI without replacing MRT components
+
+```tsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowActions: true,
+  positionActionsColumn: 'last',
+  renderRowActionMenuItems: ({ row, closeMenu }) => [
+    <MenuItem key="edit" onClick={() => { edit(row.original); closeMenu() }}>Edit</MenuItem>,
+  ],
+  renderTopToolbarCustomActions: ({ table }) => (
+    <Button onClick={() => exportRows(table.getPrePaginatedRowModel().rows)}>Export</Button>
+  ),
+  renderDetailPanel: ({ row }) => <Address address={row.original.address} />,
+  renderEmptyRowsFallback: () => <Typography>No people match these filters</Typography>,
+})
+```
+
+`renderTopToolbar` and `renderBottomToolbar` replace the whole toolbar; `renderTopToolbarCustomActions`, `renderBottomToolbarCustomActions`, and `renderToolbarInternalActions` add to it. `renderRowActions` renders inline buttons; `renderRowActionMenuItems` fills the kebab menu. `renderDetailPanel` also makes every row expandable.
+
+### Adjust built-in display columns
+
+```tsx
+displayColumnDefOptions: {
+  'mrt-row-actions': { header: '', size: 80, muiTableHeadCellProps: { align: 'center' } },
+  'mrt-row-select': { enableColumnActions: false },
+  'mrt-row-expand': { size: 40 },
+},
+```
+
+Display column ids are `mrt-row-actions`, `mrt-row-drag`, `mrt-row-expand`, `mrt-row-numbers`, `mrt-row-pin`, `mrt-row-select`, and `mrt-row-spacer`. They exist only when the matching feature is enabled.
+
+### Icons and localization
+
+```tsx
+import { MRT_Localization_DE } from '@mini_7/material-react-table/locales/de'
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  localization: MRT_Localization_DE,
+  icons: { SearchIcon: (props) => <TravelExploreIcon {...props} /> },
+})
+```
+
+`icons` accepts a partial `MRT_Icons` map; `localization` accepts a partial `MRT_Localization`, so overriding a few strings is fine.
+
+## Common Mistakes
+
+### HIGH Passing removed Material UI text field props
+
+Wrong:
+
+```tsx
+muiSearchTextFieldProps: {
+  InputProps: { startAdornment: <SearchIcon /> },
+  inputProps: { 'aria-label': 'Search' },
+}
+```
+
+Correct:
+
+```tsx
+muiSearchTextFieldProps: {
+  slotProps: {
+    input: { startAdornment: <SearchIcon /> },
+    htmlInput: { 'aria-label': 'Search' },
+  },
+}
+```
+
+Material UI V9 removed `InputProps`, `inputProps`, `SelectProps`, `InputLabelProps`, and `FormHelperTextProps` from `TextField`, so the old keys are type errors and are never applied.
+
+Source: `MIGRATION.md`
+
+### MEDIUM Styling with a class selector instead of the sx prop
+
+Wrong:
+
+```tsx
+muiTableBodyCellProps: { className: 'my-cell' }
+// plus a global .my-cell rule fighting Material UI specificity
+```
+
+Correct:
+
+```tsx
+muiTableBodyCellProps: {
+  sx: (theme) => ({ borderRight: `1px solid ${theme.palette.divider}` }),
+}
+```
+
+`sx` receives the Material UI theme and wins the specificity contest with Emotion styles that MRT already applies.
+
+Source: `docs/guides/customize-components.mdx`
+
+### MEDIUM Replacing the toolbar when only a button was needed
+
+Wrong:
+
+```tsx
+renderTopToolbar: ({ table }) => <Button onClick={add}>Add</Button>
+```
+
+Correct:
+
+```tsx
+renderTopToolbarCustomActions: ({ table }) => <Button onClick={add}>Add</Button>
+```
+
+`renderTopToolbar` removes the search box, filter toggle, density and full screen buttons, and the alert banner. The `*CustomActions` slot keeps them.
+
+Source: `docs/guides/toolbar-customization.mdx`
+
+## API Discovery
+
+Search `node_modules/@mini_7/material-react-table/dist/index.d.ts` for `mui` to see every prop option and its callback arguments, and for `render` to see every render slot. The Customize Components guide at `/docs/guides/customize-components` lists the options per component, and `/docs/api/column-options` marks which options also exist on columns.