@mini_7/material-react-table-mcp 4.0.0

package/data/skills/drag-and-drop-ordering/SKILL.md

@@ -0,0 +1,227 @@
+---
+name: drag-and-drop-ordering
+description: >
+  Reorder columns and rows by drag and drop in Material React Table V4: enableColumnOrdering with the columnOrder state and mrt-row-* display column ids, enableRowOrdering with muiRowDragHandleProps onDragEnd reading draggingRow and hoveredRow, enableRowDragging for dropping rows onto other tables or UI, enableColumnDragging for column drags without reordering, and the draggingColumn, hoveredColumn, draggingRow, hoveredRow state. Load for user-arranged columns, sortable lists, moving rows between tables, or a drop that never fires.
+metadata:
+  type: framework
+  library: '@mini_7/material-react-table'
+  library_version: '4.0.0'
+  framework: react
+requires:
+  - getting-started
+  - state-and-server-data
+  - '@tanstack/table-core#column-ordering'
+sources:
+  - 'gyminii/material-react-table:apps/material-react-table-docs/pages/docs/guides/column-ordering-dnd.mdx'
+  - 'gyminii/material-react-table:apps/material-react-table-docs/pages/docs/guides/row-ordering-dnd.mdx'
+  - 'gyminii/material-react-table:apps/material-react-table-docs/examples/enable-row-ordering/sandbox/src/TS.tsx'
+  - 'gyminii/material-react-table:apps/material-react-table-docs/examples/enable-row-dragging/sandbox/src/TS.tsx'
+  - 'gyminii/material-react-table:packages/material-react-table/src/components/body/MRT_TableBodyRowGrabHandle.tsx'
+  - 'gyminii/material-react-table:packages/material-react-table/src/utils/column.utils.ts'
+---
+
+This skill builds on `getting-started`, `state-and-server-data`, and `@tanstack/table-core#column-ordering`. MRT uses native HTML drag events with a grab handle button. Column ordering is fully built in; row ordering exposes the drag state and leaves the reorder of `data` to you.
+
+## Setup
+
+```tsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableColumnOrdering: true, // drag handles in every header
+  enableRowOrdering: true, // adds the mrt-row-drag display column
+  enableSorting: false, // manual order and sorting fight each other
+  muiRowDragHandleProps: ({ table }) => ({
+    onDragEnd: () => {
+      const { draggingRow, hoveredRow } = table.getState()
+      if (draggingRow && hoveredRow) {
+        setData((old) => {
+          const next = [...old]
+          next.splice(hoveredRow.index!, 0, next.splice(draggingRow.index, 1)[0])
+          return next
+        })
+      }
+    },
+  }),
+})
+```
+
+Column-level `enableColumnOrdering: false` removes the handle from one column. `hoveredRow` and `hoveredColumn` are typed as partial objects because a drop target may be a placeholder; read `index` or `id` and guard for undefined.
+
+## Core Patterns
+
+### Set or persist the column order
+
+```tsx
+const [columnOrder, setColumnOrder] = useState<MRT_ColumnOrderState>([
+  'mrt-row-select',
+  'name',
+  'email',
+  'mrt-row-actions',
+])
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableRowSelection: true,
+  enableRowActions: true,
+  enableColumnOrdering: true,
+  state: { columnOrder },
+  onColumnOrderChange: setColumnOrder,
+})
+```
+
+`columnOrder` is an array of column ids (`accessorKey` or `id`). Include the display column ids you enable (`mrt-row-select`, `mrt-row-actions`, `mrt-row-expand`, `mrt-row-numbers`, `mrt-row-drag`, `mrt-row-pin`) at the position you want; missing ones are appended at the start or end. If the array length does not match the column count MRT regenerates it, so `initialState.columnOrder` is enough when you only need a default. A dropped column is also pinned to the target column's pin position.
+
+### Move rows between tables
+
+```tsx
+const [draggingRow, setDraggingRow] = useState<MRT_Row<Person> | null>(null)
+const [hoveredTable, setHoveredTable] = useState<string | null>(null)
+
+const common = {
+  columns,
+  enableRowDragging: true, // handle only; no in-table reorder
+  onDraggingRowChange: setDraggingRow,
+  state: { draggingRow },
+}
+
+const table1 = useMaterialReactTable({
+  ...common,
+  data: data1,
+  getRowId: (row) => `t1-${row.id}`,
+  muiRowDragHandleProps: {
+    onDragEnd: () => {
+      if (hoveredTable === 'table-2' && draggingRow) {
+        setData2((rows) => [...rows, draggingRow.original])
+        setData1((rows) => rows.filter((r) => r !== draggingRow.original))
+      }
+      setHoveredTable(null)
+    },
+  },
+  muiTablePaperProps: {
+    onDragEnter: () => setHoveredTable('table-1'),
+    sx: { outline: hoveredTable === 'table-1' ? '2px dashed' : undefined },
+  },
+})
+```
+
+`enableRowDragging` shows the handle and maintains `draggingRow` without the in-table hover targets that `enableRowOrdering` adds. Any element can be a drop target through its own `onDragEnter`. Share `draggingRow` across tables by controlling it. Use `enableColumnDragging` the same way for columns that should be draggable onto external targets, for example a group-by drop zone.
+
+### Style the drag interaction
+
+```tsx
+muiRowDragHandleProps: ({ row }) => ({
+  'aria-label': `Move ${row.original.name}`,
+  sx: { cursor: 'grab' },
+}),
+muiTableBodyRowProps: ({ row, table }) => ({
+  sx: {
+    opacity: table.getState().draggingRow?.id === row.id ? 0.5 : 1,
+    outline: table.getState().hoveredRow?.id === row.id ? '2px dashed' : undefined,
+  },
+}),
+```
+
+`muiRowDragHandleProps` takes `IconButtonProps`; your `onDragStart` and `onDragEnd` run before MRT sets or clears `draggingRow`. `muiColumnDragHandleProps` is the column counterpart, and `hoveredColumn` / `draggingColumn` drive header styling. Replace the handle icon through `icons.DragHandleIcon`.
+
+### Combine with virtualization
+
+```tsx
+enableRowOrdering: true,
+enableRowVirtualization: true,
+enablePagination: false,
+```
+
+The row virtualizer keeps the dragging row mounted while it is scrolled out of view, so drops still resolve. Keep `autoResetPageIndex: false` when paginated so a drop does not jump back to page one.
+
+## Common Mistakes
+
+### HIGH Reordering with the wrong row index
+
+Wrong:
+
+```tsx
+onDragEnd: () => {
+  const { draggingRow, hoveredRow } = table.getState()
+  data.splice(hoveredRow.index, 0, data.splice(draggingRow.index, 1)[0])
+  setData(data) // same array reference, no re-render
+},
+```
+
+Correct:
+
+```tsx
+onDragEnd: () => {
+  const { draggingRow, hoveredRow } = table.getState()
+  if (!draggingRow || hoveredRow?.index === undefined) return
+  setData((old) => {
+    const next = [...old]
+    next.splice(hoveredRow.index!, 0, next.splice(draggingRow.index, 1)[0])
+    return next
+  })
+},
+```
+
+`row.index` is the index in the original `data` array, so it is only meaningful when no client-side sort or filter is applied; and a mutated array with the same reference does not trigger a render.
+
+Source: `docs/examples/enable-row-ordering`
+
+### HIGH Expecting a drop callback
+
+Wrong:
+
+```tsx
+onHoveredRowChange: (row) => moveRow(row), // fires on every hover, not on drop
+```
+
+Correct:
+
+```tsx
+muiRowDragHandleProps: { onDragEnd: () => moveRow(table.getState().hoveredRow) },
+```
+
+There is no `onRowDrop`; the drop point is the handle's `onDragEnd`, after which MRT clears `draggingRow` and `hoveredRow`.
+
+Source: `packages/material-react-table/src/components/body/MRT_TableBodyRowGrabHandle.tsx`
+
+### MEDIUM Leaving sorting on with row ordering
+
+Wrong:
+
+```tsx
+enableRowOrdering: true,
+```
+
+Correct:
+
+```tsx
+enableRowOrdering: true,
+enableSorting: false,
+```
+
+A sorted view re-sorts after every drop, so the user's arrangement disappears and `row.index` no longer maps to the visible position.
+
+Source: `docs/guides/row-ordering-dnd.mdx`
+
+### MEDIUM Column order array that ignores display columns
+
+Wrong:
+
+```tsx
+initialState: { columnOrder: ['name', 'email'] }, // with enableRowSelection: true
+```
+
+Correct:
+
+```tsx
+initialState: { columnOrder: ['mrt-row-select', 'name', 'email'] },
+```
+
+The length mismatch makes MRT regenerate the order from the column definitions, discarding the custom arrangement.
+
+Source: `docs/guides/column-ordering-dnd.mdx`
+
+## API Discovery
+
+Search `node_modules/@mini_7/material-react-table/dist/index.d.ts` for `enableRowOrdering`, `enableRowDragging`, `muiRowDragHandleProps`, `muiColumnDragHandleProps`, `draggingRow`, and `hoveredColumn`. The Column Ordering and Row Ordering guides at `/docs/guides/column-ordering-dnd` and `/docs/guides/row-ordering-dnd` list the related options, and `/docs/examples/enable-column-ordering`, `enable-row-ordering`, and `enable-row-dragging` are runnable examples.

package/data/skills/editing/SKILL.md

@@ -0,0 +1,243 @@
+---
+name: editing
+description: >
+  Add create, update, and inline editing to Material React Table V4 with enableEditing, editDisplayMode (modal, row, cell, table, custom), createDisplayMode, onEditingRowSave and onCreatingRowSave with exitEditingMode, table.setEditingRow, table.setCreatingRow, muiEditTextFieldProps validation, editVariant select, and the Edit column slot. Load for CRUD tables, editable cells, row forms in a dialog, or when saved values never reach the callback.
+metadata:
+  type: framework
+  library: '@mini_7/material-react-table'
+  library_version: '4.0.0'
+  framework: react
+requires:
+  - getting-started
+  - customization
+sources:
+  - 'gyminii/material-react-table:apps/material-react-table-docs/pages/docs/guides/editing.mdx'
+  - 'gyminii/material-react-table:apps/material-react-table-docs/examples/editing-crud-modal/sandbox/src/TS.tsx'
+  - 'gyminii/material-react-table:apps/material-react-table-docs/examples/editing-crud-cell/sandbox/src/TS.tsx'
+  - 'gyminii/material-react-table:packages/material-react-table/src/components/inputs/MRT_EditCellTextField.tsx'
+  - 'gyminii/material-react-table:packages/material-react-table/src/types.ts'
+---
+
+This skill builds on `getting-started` and `customization`. MRT renders the editing inputs and tracks which row or cell is being edited; persisting the values is always application code, wired through the save callbacks or the text field events.
+
+## Setup
+
+```tsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableEditing: true,
+  editDisplayMode: 'modal', // default; also 'row' | 'cell' | 'table' | 'custom'
+  createDisplayMode: 'modal', // default; also 'row' | 'custom'
+  getRowId: (row) => row.id,
+  onEditingRowSave: async ({ values, table }) => {
+    await updateUser(values)
+    table.setEditingRow(null) // exit editing mode
+  },
+  onCreatingRowSave: async ({ values, table }) => {
+    await createUser(values)
+    table.setCreatingRow(null) // exit creating mode
+  },
+  renderRowActions: ({ row, table }) => (
+    <IconButton onClick={() => table.setEditingRow(row)}><EditIcon /></IconButton>
+  ),
+  renderTopToolbarCustomActions: ({ table }) => (
+    <Button onClick={() => table.setCreatingRow(true)}>Create</Button>
+  ),
+})
+```
+
+`enableEditing` accepts a boolean or `(row) => boolean`, on the table and on each column. Column-level `enableEditing: false` renders a disabled field in the modal and the plain cell value in the other modes. The `editingRow`, `creatingRow`, and `editingCell` state slices hold the active row or cell; `table.setEditingRow`, `table.setCreatingRow`, and `table.setEditingCell` change them.
+
+## Core Patterns
+
+### Modal and row modes save through onEditingRowSave
+
+```tsx
+const handleSave: MRT_TableOptions<User>['onEditingRowSave'] = async ({ values, row, table, exitEditingMode }) => {
+  const errors = validateUser(values)
+  if (Object.values(errors).some(Boolean)) {
+    setValidationErrors(errors)
+    return // stay in editing mode
+  }
+  setValidationErrors({})
+  await updateUser({ ...row.original, ...values })
+  exitEditingMode() // same as table.setEditingRow(null)
+}
+```
+
+`values` is a record keyed by column id, holding the edited text of every editable column. Nothing is written to `data`; the callback owns persistence. The callback may return a promise, and the `isSaving` state slice disables the save button and shows a spinner while it is true. `onEditingRowCancel` and `onCreatingRowCancel` fire when the user closes without saving, which is where validation errors get cleared.
+
+### Cell and table modes save through the text field events
+
+```tsx
+const columns: MRT_ColumnDef<User>[] = [
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    muiEditTextFieldProps: ({ cell, row }) => ({
+      type: 'email',
+      required: true,
+      error: !!validationErrors[cell.id],
+      helperText: validationErrors[cell.id],
+      onBlur: (event) => {
+        const value = event.currentTarget.value
+        setValidationErrors((prev) => ({ ...prev, [cell.id]: validateEmail(value) ? undefined : 'Invalid email' }))
+        setEditedUsers((prev) => ({ ...prev, [row.id]: { ...row.original, email: value } }))
+      },
+    }),
+  },
+]
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableEditing: true,
+  editDisplayMode: 'cell', // double-click a cell to edit it
+})
+```
+
+In `'cell'` mode a double-click opens the field for that cell; in `'table'` mode every editable cell is a field at once. `onEditingRowSave` never fires in these modes. MRT calls your `onBlur` first, then stores the value in `row._valuesCache` and clears `editingCell`, so read `event.currentTarget.value` rather than `cell.getValue()`. Enter blurs the field. For single-click editing set `muiTableBodyCellProps` with an `onClick` that calls `table.setEditingCell(cell)` and focuses `table.refs.editInputRefs.current?.[column.id]`.
+
+### Select inputs and custom Edit components
+
+```tsx
+{
+  accessorKey: 'state',
+  header: 'State',
+  editVariant: 'select',
+  editSelectOptions: usStates, // string[] or { label, value }[]
+  muiEditTextFieldProps: { select: true, required: true },
+},
+{
+  accessorKey: 'birthday',
+  header: 'Birthday',
+  Edit: ({ cell, column, row, table }) => (
+    <DatePicker
+      value={dayjs(cell.getValue<string>())}
+      onChange={(date) => {
+        row._valuesCache[column.id] = date?.toISOString()
+        if (table.getState().creatingRow?.id === row.id) table.setCreatingRow(row)
+        else table.setEditingRow(row)
+      }}
+    />
+  ),
+},
+```
+
+`editSelectOptions` also accepts a callback receiving `cell`, `column`, `row`, and `table`. Select values save on change; text values save on blur. A custom `Edit` slot replaces the text field entirely, so it must write to `row._valuesCache[column.id]` and re-set the editing or creating row, otherwise the value never reaches `values` in the save callback.
+
+### Customize the dialog and the create row
+
+```tsx
+import { MRT_EditActionButtons, createRow } from '@mini_7/material-react-table'
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableEditing: true,
+  positionCreatingRow: 'bottom', // 'top' (default), 'bottom', or a row index
+  renderEditRowDialogContent: ({ internalEditComponents, row, table }) => (
+    <>
+      <DialogTitle>Edit user</DialogTitle>
+      <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>{internalEditComponents}</DialogContent>
+      <DialogActions><MRT_EditActionButtons table={table} row={row} variant="text" /></DialogActions>
+    </>
+  ),
+  renderTopToolbarCustomActions: ({ table }) => (
+    <Button onClick={() => table.setCreatingRow(createRow(table, { id: crypto.randomUUID(), role: 'viewer' }))}>
+      Create with defaults
+    </Button>
+  ),
+})
+```
+
+`internalEditComponents` is the array of generated fields, one per column, so custom dialog content can reorder them or mix in other inputs. `renderCreateRowDialogContent` is the create counterpart. `table.setCreatingRow(true)` opens a blank row; `createRow(table, defaults)` seeds it. `muiEditRowDialogProps` reaches the Material UI `Dialog` itself. `editDisplayMode: 'custom'` and `createDisplayMode: 'custom'` keep the state slices and callbacks but render no MRT editing UI, for forms in a sidebar.
+
+## Common Mistakes
+
+### HIGH Forgetting to exit editing mode after saving
+
+Wrong:
+
+```tsx
+onEditingRowSave: async ({ values }) => {
+  await updateUser(values)
+}
+```
+
+Correct:
+
+```tsx
+onEditingRowSave: async ({ values, table }) => {
+  await updateUser(values)
+  table.setEditingRow(null)
+}
+```
+
+MRT does not close the dialog or row on its own, so validation can keep it open. Call `exitEditingMode()` or `table.setEditingRow(null)` once the save succeeds, and the create counterpart `table.setCreatingRow(null)`.
+
+Source: `docs/guides/editing.mdx`
+
+### HIGH Expecting the data array to update itself
+
+Wrong:
+
+```tsx
+editDisplayMode: 'cell',
+// no muiEditTextFieldProps handlers; edits vanish after blur
+```
+
+Correct:
+
+```tsx
+muiEditTextFieldProps: ({ cell, row }) => ({
+  onBlur: (event) => saveCell(row.id, cell.column.id, event.currentTarget.value),
+}),
+```
+
+Edited text lives only in `row._valuesCache` until your code writes it to state or a server and the `data` prop changes.
+
+Source: `packages/material-react-table/src/components/inputs/MRT_EditCellTextField.tsx`
+
+### MEDIUM Passing removed Material UI text field props to the editor
+
+Wrong:
+
+```tsx
+muiEditTextFieldProps: { InputProps: { startAdornment: <EuroIcon /> }, inputProps: { maxLength: 40 } }
+```
+
+Correct:
+
+```tsx
+muiEditTextFieldProps: {
+  slotProps: { input: { startAdornment: <EuroIcon /> }, htmlInput: { maxLength: 40 } },
+}
+```
+
+Material UI V9 removed `InputProps` and `inputProps` from `TextField`; MRT merges `slotProps.input`, `slotProps.htmlInput`, and `slotProps.select` with its own.
+
+Source: `MIGRATION.md`
+
+### MEDIUM Editing without a stable row id
+
+Wrong:
+
+```tsx
+useMaterialReactTable({ columns, data, enableEditing: true })
+```
+
+Correct:
+
+```tsx
+useMaterialReactTable({ columns, data, enableEditing: true, getRowId: (row) => row.id })
+```
+
+Without `getRowId` rows are keyed by index, so `editingRow` and `creatingRow` can point at a different record after sorting, filtering, or an optimistic insert.
+
+Source: `docs/examples/editing-crud-modal`
+
+## API Discovery
+
+Search `node_modules/@mini_7/material-react-table/dist/index.d.ts` for `editDisplayMode`, `onEditingRowSave`, `onCreatingRowSave`, `_valuesCache`, and `editInputRefs` to see the exact signatures. The Editing guide at `/docs/guides/editing` lists the related table, column, and state options, and `/docs/examples/editing-crud`, `editing-crud-row`, `editing-crud-cell`, `editing-crud-table`, and `editing-crud-tree` are complete TanStack Query CRUD examples.

package/data/skills/filtering/SKILL.md

@@ -0,0 +1,213 @@
+---
+name: filtering
+description: >
+  Configure column and global filtering in Material React Table V4: filterVariant (text, select, multi-select, autocomplete, range, range-slider, checkbox, date, datetime, time and their ranges), enableFacetedValues, filterFn and filterFns, enableColumnFilterModes with columnFilterModeOptions, columnFilterDisplayMode, globalFilterFn and ranked results, filter match highlighting, and the muiFilter*Props. Load for dropdown or date filters, custom filter logic, filter mode menus, or search that matches the wrong rows.
+metadata:
+  type: framework
+  library: '@mini_7/material-react-table'
+  library_version: '4.0.0'
+  framework: react
+requires:
+  - getting-started
+  - '@tanstack/table-core#column-filtering'
+  - '@tanstack/table-core#global-filtering'
+sources:
+  - 'gyminii/material-react-table:apps/material-react-table-docs/pages/docs/guides/column-filtering.mdx'
+  - 'gyminii/material-react-table:apps/material-react-table-docs/pages/docs/guides/global-filtering.mdx'
+  - 'gyminii/material-react-table:apps/material-react-table-docs/examples/customize-filter-variants/sandbox/src/TS.tsx'
+  - 'gyminii/material-react-table:packages/material-react-table/src/fns/filterFns.ts'
+  - 'gyminii/material-react-table:packages/material-react-table/src/utils/column.utils.ts'
+  - 'gyminii/material-react-table:packages/material-react-table/src/types.ts'
+---
+
+This skill builds on `getting-started`, `@tanstack/table-core#column-filtering`, and `@tanstack/table-core#global-filtering`. Client-side column filters and the global search are on by default. MRT adds filter inputs, filter variants, fuzzy matching, and filter mode menus on top of the TanStack filtering model; server-side filtering is covered by `state-and-server-data`.
+
+## Setup
+
+```tsx
+const columns: MRT_ColumnDef<Person>[] = [
+  { accessorKey: 'name', header: 'Name' }, // text filter, fuzzy
+  { accessorKey: 'city', header: 'City', filterVariant: 'select' },
+  { accessorKey: 'state', header: 'State', filterVariant: 'multi-select' },
+  { accessorKey: 'salary', header: 'Salary', filterVariant: 'range-slider' },
+  {
+    accessorFn: (row) => new Date(row.hireDate), // filter and sort on a Date
+    id: 'hireDate',
+    header: 'Hired',
+    filterVariant: 'date-range',
+    Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(),
+  },
+]
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableFacetedValues: true, // options and min/max come from the data
+  initialState: { showColumnFilters: true },
+})
+```
+
+`enableColumnFilters` (table) and `enableColumnFilter` (column) turn column filters off; `enableGlobalFilter` does the same for search; `enableFilters: false` removes both. `showColumnFilters` and `showGlobalFilter` are state slices, so seed them in `initialState` to show the inputs immediately.
+
+## Core Patterns
+
+### Pick the variant and let it pick the filter function
+
+```tsx
+{ accessorKey: 'isActive', accessorFn: (row) => (row.isActive ? 'true' : 'false'), id: 'isActive', header: 'Active', filterVariant: 'checkbox' },
+{ accessorKey: 'age', header: 'Age', filterVariant: 'range', filterFn: 'between' },
+{ accessorKey: 'team', header: 'Team', filterVariant: 'autocomplete', filterSelectOptions: teams },
+```
+
+Variants: `text` (default), `autocomplete`, `select`, `multi-select`, `range`, `range-slider`, `checkbox`, `date`, `date-range`, `datetime`, `datetime-range`, `time`, `time-range`. The default `filterFn` follows the variant: `multi-select` uses `arrIncludesSome`, any `range` variant uses `betweenInclusive`, `select` and `checkbox` use `equals`, everything else uses `fuzzy`. `filterSelectOptions` takes strings or `{ label, value }` objects; with `enableFacetedValues` the select, multi-select, autocomplete, and range-slider inputs fill themselves from the column's unique values or min and max. The checkbox variant compares against the strings `'true'` and `'false'`, so its accessor must return strings.
+
+### Date, datetime, and time variants need the pickers provider
+
+```tsx
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
+
+<LocalizationProvider dateAdapter={AdapterDayjs}>
+  <MaterialReactTable table={table} />
+</LocalizationProvider>
+```
+
+MRT renders `@mui/x-date-pickers` V9 components for these variants and expects one `LocalizationProvider` above the table. The accessor should return a `Date` so comparisons and sorting work. `muiFilterDatePickerProps`, `muiFilterDateTimePickerProps`, and `muiFilterTimePickerProps` forward props to the picker; for range variants the callback form receives `rangeFilterIndex` (0 for the start input, 1 for the end).
+
+### Custom filter functions
+
+```tsx
+const table = useMaterialReactTable({
+  columns: [
+    { accessorKey: 'name', header: 'Name', filterFn: 'startsWith' }, // MRT built-in
+    { accessorKey: 'code', header: 'Code', filterFn: 'includesStringSensitive' }, // TanStack built-in
+    { accessorKey: 'tags', header: 'Tags', filterFn: 'hasAllTags' }, // registered below
+  ],
+  data,
+  filterFns: {
+    hasAllTags: (row, columnId, filterValue: string) =>
+      filterValue.split(',').every((tag) => row.getValue<string[]>(columnId).includes(tag.trim())),
+  },
+  globalFilterFn: 'contains', // default is 'fuzzy'
+})
+```
+
+MRT built-ins: `between`, `betweenInclusive`, `contains`, `empty`, `endsWith`, `equals`, `fuzzy`, `greaterThan`, `greaterThanOrEqualTo`, `lessThan`, `lessThanOrEqualTo`, `notEmpty`, `notEquals`, `startsWith`. TanStack built-ins such as `includesString`, `equalsString`, `arrIncludes`, `arrIncludesAll`, `arrIncludesSome`, `weakEquals`, and `inNumberRange` also work by name. A function passed to `filterFn` receives `(row, columnId, filterValue)` and returns a boolean; functions registered in `filterFns` become names usable in `filterFn`, `globalFilterFn`, and the filter mode menus. The `fuzzy` global filter ranks rows by match quality unless `enableGlobalFilterRankedResults` is false, a sort is active, rows are expanded, or a `manual*` option is set.
+
+### Let users switch filter modes
+
+```tsx
+const table = useMaterialReactTable({
+  columns: [
+    { accessorKey: 'name', header: 'Name', columnFilterModeOptions: ['fuzzy', 'contains', 'startsWith'] },
+    { accessorKey: 'age', header: 'Age', columnFilterModeOptions: ['between', 'lessThan', 'greaterThan'] },
+  ],
+  data,
+  enableColumnFilterModes: true,
+  enableGlobalFilterModes: true,
+  globalFilterModeOptions: ['fuzzy', 'startsWith'],
+  columnFilterDisplayMode: 'popover', // 'subheader' (default), 'popover', or 'custom'
+})
+```
+
+The chosen modes live in the `columnFilterFns` and `globalFilterFn` state slices, controllable through `onColumnFilterFnsChange` and `onGlobalFilterFnChange`. `renderColumnFilterModeMenuItems` and `renderGlobalFilterModeMenuItems` replace the menu; each receives `onSelectFilterMode(name)` and `internalFilterOptions`. `columnFilterDisplayMode: 'custom'` keeps the filtering logic while you render inputs elsewhere with `column.setFilterValue`. Filter values arrive after a short debounce (200 ms client-side, 400 ms with `manualFiltering`).
+
+### Keep match highlighting in custom cells
+
+```tsx
+{
+  accessorKey: 'name',
+  header: 'Name',
+  Cell: ({ renderedCellValue }) => <strong>{renderedCellValue}</strong>,
+}
+```
+
+Text filters and the global search highlight matches inside cells. A custom `Cell` keeps that only when it renders `renderedCellValue` instead of `cell.getValue()`. `enableFilterMatchHighlighting: false` turns it off per table or per column.
+
+## Common Mistakes
+
+### HIGH Filter variant does not match the accessor value type
+
+Wrong:
+
+```tsx
+{ accessorKey: 'hireDate', header: 'Hired', filterVariant: 'date-range' } // hireDate is an ISO string
+```
+
+Correct:
+
+```tsx
+{
+  accessorFn: (row) => new Date(row.hireDate),
+  id: 'hireDate',
+  header: 'Hired',
+  filterVariant: 'date-range',
+  Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(),
+}
+```
+
+The `betweenInclusive` comparison the date variants use works on `Date` objects and numbers, not on date strings, so string columns silently match everything or nothing.
+
+Source: `docs/examples/customize-filter-variants`
+
+### HIGH Reading the filter value with the wrong shape
+
+Wrong:
+
+```tsx
+filterFn: (row, id, filterValue) => row.getValue<number>(id) >= filterValue, // range variant
+```
+
+Correct:
+
+```tsx
+filterFn: (row, id, [min, max]: [number, number]) => {
+  const value = row.getValue<number>(id)
+  return (min === '' || value >= min) && (max === '' || value <= max)
+}
+```
+
+Range variants store `[min, max]` and multi-select stores an array; text, select, and checkbox store a single value. Match the shape or the custom function throws or filters everything out.
+
+Source: `packages/material-react-table/src/fns/filterFns.ts`
+
+### MEDIUM Passing removed Material UI text field props to filters
+
+Wrong:
+
+```tsx
+muiFilterTextFieldProps: { InputProps: { startAdornment: <SearchIcon /> } }
+```
+
+Correct:
+
+```tsx
+muiFilterTextFieldProps: { slotProps: { input: { startAdornment: <SearchIcon /> } } }
+```
+
+Material UI V9 removed `InputProps` and `inputProps`; MRT merges `slotProps.input`, `slotProps.htmlInput`, and `slotProps.select` into its own.
+
+Source: `MIGRATION.md`
+
+### MEDIUM Mode menu offers a function that is not registered
+
+Wrong:
+
+```tsx
+columnFilterModeOptions: ['fuzzy', 'isPrime'], // isPrime only exists in the column's filterFn
+```
+
+Correct:
+
+```tsx
+filterFns: { isPrime: (row, id) => isPrime(row.getValue<number>(id)) },
+columnFilterModeOptions: ['fuzzy', 'isPrime'],
+```
+
+Filter mode names resolve through the table `filterFns` map. A name that is not there falls back to the default and the menu label shows the raw key.
+
+Source: `docs/guides/column-filtering.mdx`
+
+## API Discovery
+
+Search `node_modules/@mini_7/material-react-table/dist/index.d.ts` for `filterVariant`, `MRT_FilterOption`, `filterFns`, and `muiFilter` for the exact unions and callback props. `MRT_FilterFns` is exported for reuse. The Column Filtering and Global Filtering guides at `/docs/guides/column-filtering` and `/docs/guides/global-filtering` list the related table, column, and state options, and `/docs/examples/customize-filter-variants`, `customize-filter-modes`, `enable-filter-facet-values`, and `alternate-column-filtering` are runnable examples.