add mrt hooks docs

apps/material-react-table-docs/package.json

@@ -44,8 +44,8 @@
     "@types/node": "^20.10.6",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
     "eslint": "8.56.0",
     "eslint-config-next": "14.0.4",
     "next-plausible": "^3.12.0",

apps/material-react-table-docs/pages/docs/api/mrt-hooks.mdx

@@ -28,10 +28,126 @@ import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';
 
 <br />
 
+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
 
-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.
+[Source Code](https://github.com/KevinVandy/material-react-table/blob/v2/packages/material-react-table/src/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/KevinVandy/material-react-table/blob/v2/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/KevinVandy/material-react-table/blob/v2/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_DisplayColumns`](#usemrt_displaycolumns) and [`useMRT_Effects`](#usemrt_effects) to generate the built-in display columns (row numbers, actions, selection, etc) and house some extra useEffect hooks needed by some MRT features on a table wide level.
+
+### useMRT_DisplayColumns
+
+[Source Code](https://github.com/KevinVandy/material-react-table/blob/v2/packages/material-react-table/src/hooks/useMRT_DisplayColumns.tsx)
+
+This hook is responsible for generating the built-in display columns (row numbers, actions, selection, etc) and adding them to the table instance's columns array, alongside your own defined columns.
+
+### useMRT_Effects
+
+[Source Code](https://github.com/KevinVandy/material-react-table/blob/v2/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/KevinVandy/material-react-table/blob/v2/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/KevinVandy/material-react-table/blob/v2/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/KevinVandy/material-react-table/blob/v2/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,
+});
 
-### useMaterialReactTableLight
+const rowVirtualizer = useMRT_RowVirtualizer(table);
+```
 
-> Would you be interested in a "lightweight" version MRT that doesn't import all of the features from TanStack Table by default? If so, voice your opinion in the [Discord](https://discord.gg/5wqyRx6fnm). It may be added in a near future non-major feature release.
+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.

apps/test-vite/package.json

@@ -22,8 +22,8 @@
   "devDependencies": {
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",

packages/material-react-table/package.json

@@ -71,20 +71,20 @@
     "@mui/x-date-pickers": "^6.18.6",
     "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/preset-small-lib": "^11.0.1",
-    "@storybook/addon-a11y": "^7.6.6",
-    "@storybook/addon-essentials": "^7.6.6",
-    "@storybook/addon-interactions": "^7.6.6",
-    "@storybook/addon-links": "^7.6.6",
-    "@storybook/addon-storysource": "^7.6.6",
-    "@storybook/blocks": "^7.6.6",
-    "@storybook/react": "^7.6.6",
-    "@storybook/react-vite": "^7.6.6",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-storysource": "^7.6.7",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-vite": "^7.6.7",
     "@storybook/testing-library": "^0.2.2",
     "@types/node": "^20.10.6",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
@@ -97,7 +97,7 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^11.0.1",
-    "storybook": "^7.6.6",
+    "storybook": "^7.6.7",
     "storybook-dark-mode": "^3.0.3",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",

packages/material-react-table/src/body/MRT_TableBody.tsx

@@ -4,6 +4,7 @@ import TableBody, { type TableBodyProps } from '@mui/material/TableBody';
 import Typography from '@mui/material/Typography';
 import { MRT_TableBodyRow, Memo_MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { useMRT_RowVirtualizer } from '../hooks';
 import { useMRT_Rows } from '../hooks/useMRT_Rows';
 import {
   type MRT_Row,
@@ -13,7 +14,6 @@ import {
 
 interface Props<TData extends MRT_RowData> extends TableBodyProps {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
-  rowVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
@@ -22,7 +22,6 @@ interface Props<TData extends MRT_RowData> extends TableBodyProps {
 
 export const MRT_TableBody = <TData extends MRT_RowData>({
   columnVirtualizer,
-  rowVirtualizer,
   table,
   virtualColumns,
   virtualPaddingLeft,
@@ -73,6 +72,8 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
 
   const rows = useMRT_Rows(table);
 
+  const rowVirtualizer = useMRT_RowVirtualizer(table);
+
   const virtualRows = rowVirtualizer
     ? rowVirtualizer.getVirtualItems()
     : undefined;

packages/material-react-table/src/table/MRT_Table.tsx

@@ -5,7 +5,6 @@ import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { useMRT_ColumnVirtualizer } from '../hooks/useMRT_ColumnVirtualizer';
-import { useMRT_RowVirtualizer } from '../hooks/useMRT_RowVirtualizer';
 import { parseCSSVarId } from '../style.utils';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
@@ -53,7 +52,6 @@ export const MRT_Table = <TData extends MRT_RowData>({
   }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
 
   const columnVirtualizer = useMRT_ColumnVirtualizer(table);
-  const rowVirtualizer = useMRT_RowVirtualizer(table);
 
   const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
 
@@ -71,7 +69,6 @@ export const MRT_Table = <TData extends MRT_RowData>({
   const commonTableBodyProps = {
     ...commonTableGroupProps,
     columnVirtualizer,
-    rowVirtualizer,
   };
 
   return (