@jielga/tmdatagrid 0.1.0 → 0.2.0

package/dist/styles.css

@@ -1,2 +1,2 @@
-._root_pt0ni_3[data-size=xs]{--dg-row-height:34px;--dg-header-height:32px;--dg-font-size:var(--mantine-font-size-xs);--dg-padding:6px}._root_pt0ni_3[data-size=sm]{--dg-row-height:42px;--dg-header-height:38px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:8px}._root_pt0ni_3[data-size=md]{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px}._root_pt0ni_3[data-size=lg]{--dg-row-height:62px;--dg-header-height:52px;--dg-font-size:var(--mantine-font-size-md);--dg-padding:14px}._root_pt0ni_3[data-size=xl]{--dg-row-height:72px;--dg-header-height:60px;--dg-font-size:var(--mantine-font-size-lg);--dg-padding:18px}._root_pt0ni_3{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px;text-align:left;border:1px solid var(--mantine-color-default-border);border-radius:var(--mantine-radius-md);background-color:var(--mantine-color-body);flex-direction:column;min-height:0;display:flex;overflow:hidden}._toolbar_pt0ni_57{align-items:center;gap:var(--mantine-spacing-xs);padding:6px var(--mantine-spacing-xs);flex-shrink:0;min-height:42px;display:flex}._toolbarSpacer_pt0ni_66{flex:1}._tableWrapper_pt0ni_71{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}._scrollContainer_pt0ni_79{flex:1;min-height:0;position:relative;overflow:auto}._grid_pt0ni_87{display:grid}._headerRow_pt0ni_93{grid-column:1/-1;grid-template-columns:subgrid;z-index:3;display:grid;position:sticky;top:0}._headerCell_pt0ni_102{padding:0 var(--dg-padding);min-width:0;min-height:var(--dg-header-height);font-weight:600;font-size:var(--dg-font-size);background-color:var(--mantine-color-body);border-bottom:1px solid var(--mantine-color-default-border);-webkit-user-select:none;user-select:none;align-items:center;gap:2px;display:flex;position:relative}._headerCell_pt0ni_102[data-align=right]{justify-content:flex-end}._headerCell_pt0ni_102[data-align=center]{justify-content:center}._headerCell_pt0ni_102[data-active=true] ._headerTitle_pt0ni_126{color:var(--mantine-primary-color-filled)}._headerTitle_pt0ni_126{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._headerCell_pt0ni_102[data-align=right] ._headerTitle_pt0ni_126{text-align:right}._headerCell_pt0ni_102[data-align=center] ._headerTitle_pt0ni_126{justify-content:center;display:flex}._headerActions_pt0ni_149{flex-shrink:0;align-items:center;gap:0;margin-left:auto;display:flex}._headerCell_pt0ni_102[data-align=right] ._headerActions_pt0ni_149{order:-1;margin-left:0;margin-right:auto}._headerAction_pt0ni_149{display:none}._headerCell_pt0ni_102:hover ._headerAction_pt0ni_149,._headerCell_pt0ni_102:focus-within ._headerAction_pt0ni_149,._headerAction_pt0ni_149[data-pinned-visible=true]{display:flex}._headerCellSortable_pt0ni_178{cursor:pointer}._headerCellDragging_pt0ni_185{opacity:.4}._headerCellDropBefore_pt0ni_189:before,._headerCellDropAfter_pt0ni_190:before{content:"";background-color:var(--mantine-primary-color-filled);z-index:5;pointer-events:none;width:2px;position:absolute;top:0;bottom:0}._headerCellDropBefore_pt0ni_189:before{left:0}._headerCellDropAfter_pt0ni_190:before{right:0}._columnSeparator_pt0ni_210{z-index:1;justify-content:center;width:10px;height:50%;display:flex;position:absolute;top:25%;right:0;transform:translate(50%)}._columnSeparatorResizable_pt0ni_222{cursor:col-resize;touch-action:none}._columnSeparator_pt0ni_210:after{content:"";background-color:#0000;width:1px;height:100%;transition:background-color .12s,width .12s}._headerCell_pt0ni_102:hover ._columnSeparator_pt0ni_210:after,._headerCell_pt0ni_102:focus-within ._columnSeparator_pt0ni_210:after{background-color:var(--mantine-color-default-border)}._columnSeparatorResizable_pt0ni_222:hover:after,._columnSeparatorActive_pt0ni_245:after{background-color:var(--mantine-primary-color-filled);width:2px}._bodyRow_pt0ni_250{--row-bg:var(--mantine-color-body);grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;display:grid}._bodyRow_pt0ni_250:hover{--row-bg:var(--mantine-color-default-hover)}._bodyRow_pt0ni_250[data-selected=true]{--row-bg:var(--mantine-primary-color-light)}._bodyCell_pt0ni_268{padding:0 var(--dg-padding);border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--row-bg);font-size:var(--dg-font-size);align-items:center;display:flex}._cellContent_pt0ni_266{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._bodyCell_pt0ni_268[data-align=right]{justify-content:flex-end}._bodyCell_pt0ni_268[data-align=center]{justify-content:center}._bodyCell_pt0ni_268[data-align=left] ._cellContent_pt0ni_266{flex:auto}._stickyLeft_pt0ni_305{border-right:1px solid var(--mantine-color-default-border)}._stickyRight_pt0ni_309{border-left:1px solid var(--mantine-color-default-border)}._stickyLeft_pt0ni_305:after,._stickyRight_pt0ni_309:after{content:"";pointer-events:none;width:4px;position:absolute;top:0;bottom:0}._stickyLeft_pt0ni_305:after{background:linear-gradient(90deg,var(--lightningcss-light,#00000014)var(--lightningcss-dark,#00000047),#0000);left:100%}._stickyRight_pt0ni_309:after{background:linear-gradient(270deg,var(--lightningcss-light,#00000014)var(--lightningcss-dark,#00000047),#0000);right:100%}._messageRow_pt0ni_341{justify-content:center;align-items:center;gap:var(--mantine-spacing-xs);padding:var(--mantine-spacing-xl);flex-direction:column;grid-column:1/-1;display:flex}._footer_pt0ni_351{justify-content:flex-end;align-items:center;gap:var(--mantine-spacing-lg);padding:4px var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);flex-shrink:0;min-height:48px;display:flex}._filterPanel_pt0ni_362{top:46px;left:var(--mantine-spacing-md);z-index:5;padding:var(--mantine-spacing-sm);border-radius:var(--mantine-radius-md);border:1px solid var(--mantine-color-default-border);background-color:var(--mantine-color-body);box-shadow:var(--mantine-shadow-md);position:absolute}._filterRow_pt0ni_374{align-items:flex-end;gap:var(--mantine-spacing-xs);display:flex}._menuItemActive_pt0ni_381{background-color:var(--mantine-color-default-hover);font-weight:600}._columnsPanel_pt0ni_386{flex-direction:column;width:280px;display:flex}._columnsPanelSearch_pt0ni_392{padding:var(--mantine-spacing-sm)}._columnsPanelList_pt0ni_396{gap:var(--mantine-spacing-sm);padding:0 var(--mantine-spacing-sm) var(--mantine-spacing-sm);flex-direction:column;display:flex}._columnsPanelFooter_pt0ni_403{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-sm);padding:var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);display:flex}
+._root_1jc4n_8[data-size=xs]{--dg-row-height:34px;--dg-header-height:32px;--dg-font-size:var(--mantine-font-size-xs);--dg-padding:6px}._root_1jc4n_8[data-size=sm]{--dg-row-height:42px;--dg-header-height:38px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:8px}._root_1jc4n_8[data-size=md]{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px}._root_1jc4n_8[data-size=lg]{--dg-row-height:62px;--dg-header-height:52px;--dg-font-size:var(--mantine-font-size-md);--dg-padding:14px}._root_1jc4n_8[data-size=xl]{--dg-row-height:72px;--dg-header-height:60px;--dg-font-size:var(--mantine-font-size-lg);--dg-padding:18px}._root_1jc4n_8{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px;--dg-row-selected-bg:var(--mantine-primary-color-light);text-align:left;border:1px solid var(--mantine-color-default-border);border-radius:var(--mantine-radius-md);background-color:var(--mantine-color-body);flex-direction:column;min-height:0;display:flex;overflow:hidden}._columnsPanel_1492o_1{flex-direction:column;width:280px;display:flex}._columnsPanelSearch_1492o_7{padding:var(--mantine-spacing-sm)}._columnsPanelList_1492o_11{gap:var(--mantine-spacing-sm);padding:0 var(--mantine-spacing-sm) var(--mantine-spacing-sm);flex-direction:column;display:flex}._columnsPanelFooter_1492o_18{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-sm);padding:var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);display:flex}._filterPanel_1jw69_4{top:calc(var(--dg-header-height) + 2px);left:var(--mantine-spacing-md);z-index:5;padding:var(--mantine-spacing-sm);border-radius:var(--mantine-radius-md);border:1px solid var(--mantine-color-default-border);background-color:var(--mantine-color-body);box-shadow:var(--mantine-shadow-md);position:absolute}._filterRow_1jw69_16{align-items:flex-end;gap:var(--mantine-spacing-xs);display:flex}._footer_6r35a_1{justify-content:flex-end;align-items:center;gap:var(--mantine-spacing-lg);padding:4px var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);flex-shrink:0;min-height:48px;display:flex}._tableWrapper_utldp_2{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}._scrollContainer_utldp_10{flex:1;min-height:0;position:relative;overflow:auto}._grid_utldp_18{display:grid}._headerRow_utldp_24{grid-column:1/-1;grid-template-columns:subgrid;z-index:3;display:grid;position:sticky;top:0}._bodyRow_utldp_33{--row-bg:var(--mantine-color-body);grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;display:grid}._bodyRow_utldp_33:hover{--row-bg:var(--mantine-color-default-hover)}._bodyRow_utldp_33[data-highlighted=true]{--row-bg:var(--dg-row-selected-bg)}._bodyRow_utldp_33[data-selects-on-click=true]{-webkit-user-select:none;user-select:none}._bodyRow_utldp_33:focus-visible{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._bodyCell_utldp_65{padding:0 var(--dg-padding);border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--row-bg);font-size:var(--dg-font-size);align-items:center;display:flex}._cellContent_utldp_63{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._bodyCell_utldp_65[data-align=right]{justify-content:flex-end}._bodyCell_utldp_65[data-align=center]{justify-content:center}._bodyCell_utldp_65[data-align=left] ._cellContent_utldp_63{flex:auto}._messageRow_utldp_95{justify-content:center;align-items:center;gap:var(--mantine-spacing-xs);padding:var(--mantine-spacing-xl);flex-direction:column;grid-column:1/-1;display:flex}._stickyLeft_1iqrf_11{border-right:1px solid var(--mantine-color-default-border)}._stickyRight_1iqrf_15{border-left:1px solid var(--mantine-color-default-border)}._stickyLeft_1iqrf_11:after,._stickyRight_1iqrf_15:after{content:"";pointer-events:none;width:4px;position:absolute;top:0;bottom:0}._stickyLeft_1iqrf_11:after{background:linear-gradient(90deg,var(--lightningcss-light,#00000014)var(--lightningcss-dark,#00000047),#0000);left:100%}._stickyRight_1iqrf_15:after{background:linear-gradient(270deg,var(--lightningcss-light,#00000014)var(--lightningcss-dark,#00000047),#0000);right:100%}._headerCell_1oqkm_1{padding:0 var(--dg-padding);min-width:0;min-height:var(--dg-header-height);font-weight:600;font-size:var(--dg-font-size);background-color:var(--mantine-color-body);border-bottom:1px solid var(--mantine-color-default-border);-webkit-user-select:none;user-select:none;align-items:center;gap:2px;display:flex;position:relative}._headerCell_1oqkm_1[data-align=right]{justify-content:flex-end}._headerCell_1oqkm_1[data-align=center]{justify-content:center}._headerCell_1oqkm_1[data-active=true] ._headerTitle_1oqkm_25{color:var(--mantine-primary-color-filled)}._headerTitle_1oqkm_25{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._headerCell_1oqkm_1[data-align=right] ._headerTitle_1oqkm_25{text-align:right}._headerCell_1oqkm_1[data-align=center] ._headerTitle_1oqkm_25{justify-content:center;display:flex}._headerActions_1oqkm_48{flex-shrink:0;align-items:center;gap:0;margin-left:auto;display:flex}._headerCell_1oqkm_1[data-align=right] ._headerActions_1oqkm_48{order:-1;margin-left:0;margin-right:auto}._headerAction_1oqkm_48{display:none}._headerCell_1oqkm_1:hover ._headerAction_1oqkm_48,._headerCell_1oqkm_1:focus-within ._headerAction_1oqkm_48,._headerAction_1oqkm_48[data-pinned-visible=true]{display:flex}._headerCellSortable_1oqkm_77{cursor:pointer}._headerCellDragging_1oqkm_84{opacity:.4}._headerCellDropBefore_1oqkm_88:before,._headerCellDropAfter_1oqkm_89:before{content:"";background-color:var(--mantine-primary-color-filled);z-index:5;pointer-events:none;width:2px;position:absolute;top:0;bottom:0}._headerCellDropBefore_1oqkm_88:before{left:0}._headerCellDropAfter_1oqkm_89:before{right:0}._columnSeparator_1oqkm_109{z-index:1;justify-content:center;width:10px;height:50%;display:flex;position:absolute;top:25%;right:0;transform:translate(50%)}._columnSeparatorResizable_1oqkm_121{cursor:col-resize;touch-action:none}._columnSeparator_1oqkm_109:after{content:"";background-color:#0000;width:1px;height:100%;transition:background-color .12s,width .12s}._headerCell_1oqkm_1:hover ._columnSeparator_1oqkm_109:after,._headerCell_1oqkm_1:focus-within ._columnSeparator_1oqkm_109:after{background-color:var(--mantine-color-default-border)}._columnSeparatorResizable_1oqkm_121:hover:after,._columnSeparatorActive_1oqkm_144:after{background-color:var(--mantine-primary-color-filled);width:2px}._menuItemActive_1oqkm_150{background-color:var(--mantine-color-default-hover);font-weight:600}._toolbar_4my8t_1{align-items:center;gap:var(--mantine-spacing-xs);padding:6px var(--mantine-spacing-xs);flex-shrink:0;min-height:42px;display:flex}._toolbarSpacer_4my8t_10{flex:1}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jielga/tmdatagrid",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A React data grid built on TanStack Table v9 and Mantine — always virtualized, with resizable, reorderable, sortable, filterable, hideable and pinnable columns.",
   "license": "MIT",
   "type": "module",
@@ -39,6 +39,7 @@
   "files": [
     "dist",
     "src/tmdatagrid",
+    "!src/tmdatagrid/**/*.test.*",
     "skills",
     "!skills/_artifacts"
   ],
@@ -56,8 +57,10 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.lib.json && rollup -c rollup.dts.config.mjs",
+    "build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.lib.json && rolldown -c rolldown.dts.config.mjs",
     "lint": "oxlint",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "preview": "vite preview",
     "changeset": "changeset",
     "version-packages": "changeset version && node scripts/sync-skill-version.mjs",
@@ -91,21 +94,26 @@
     "@tanstack/react-virtual": "^3.14.4",
     "@tanstack/store": "^0.11.0",
     "@tanstack/table-core": "^9.0.0-beta.21",
+    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^24.13.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react": "^6.0.4",
     "babel-plugin-react-compiler": "^1.0.0",
     "husky": "^9.1.7",
+    "jsdom": "^29.1.1",
     "oxlint": "^1.69.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "rollup": "^4.62.3",
-    "rollup-plugin-dts": "^6.4.1",
-    "typescript": "~6.0.2",
-    "vite": "^8.1.0"
+    "rolldown": "~1.1.5",
+    "rolldown-plugin-dts": "^0.27.14",
+    "typescript": "~7.0.2",
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10"
   }
 }

package/skills/columns/SKILL.md

@@ -11,11 +11,11 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.1.0'
+  library_version: '0.2.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/columns.md'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/filterOperators.ts'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/columnUtils.ts'
+  - 'Jielga/TMDataGrid:src/tmdatagrid/core/filterOperators.ts'
+  - 'Jielga/TMDataGrid:src/tmdatagrid/core/columnUtils.ts'
 ---
 
 # TMDataGrid — Columns
@@ -105,10 +105,11 @@ A column whose menu has no remaining items renders no menu button.
 
 ## Checkbox column
 
-Unless `enableRowSelection` is `false`, a column with the id `SELECT_COLUMN_ID`
-is added as the first column and pinned to the left. It is listed as "Checkbox
-selection" in the column manager and can be hidden like any other column. It has
-no column menu and cannot be sorted, filtered, resized, re-pinned or moved.
+Unless `enableRowSelection` is `false` or `rowSelectionMode` is `"row"`, a column
+with the id `SELECT_COLUMN_ID` is added as the first column and pinned to the
+left. It is listed as "Checkbox selection" in the column manager and can be
+hidden like any other column. It has no column menu and cannot be sorted,
+filtered, resized, re-pinned or moved.
 
 Because it cannot be moved, it also anchors the left pinned region: no column
 can be placed in front of it.

package/skills/features/SKILL.md

@@ -4,20 +4,24 @@ description: >
   Enable or disable TMDataGrid interface elements through standard TanStack
   table and column options, and reuse the same checks in your own components.
   Covers the enableSorting/enableColumnFilters/enableHiding/enableColumnPinning/
-  enableColumnResizing/enableColumnOrdering/enableRowSelection matrix,
-  getGridCapabilities and getColumnCapabilities, why the features argument is
-  required for reactivity under the React Compiler, column pinning, column
-  ordering with moveColumn and moveColumnByStep, and always-on virtualization.
-  Load when building a read-only grid, hiding grid chrome, reordering columns
-  from code, or writing a custom toolbar button.
+  enableColumnResizing/enableColumnOrdering/enableRowSelection matrix, the
+  checkbox and row selection modes behind rowSelectionMode, the
+  highlightSelectedRows flag and the --dg-row-selected-bg colour, the
+  default-off enablePagination switch and its three modes (none, client,
+  manual), getGridCapabilities and getColumnCapabilities, why the features
+  argument is required for reactivity under the React Compiler, column pinning,
+  column ordering with moveColumn and moveColumnByStep, and always-on
+  virtualization. Load when building a read-only grid, hiding grid chrome,
+  enabling pagination, reordering columns from code, or writing a custom toolbar
+  button.
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.1.0'
+  library_version: '0.2.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/features.md'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/capabilities.ts'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/columnOrdering.ts'
+  - 'Jielga/TMDataGrid:src/tmdatagrid/core/capabilities.ts'
+  - 'Jielga/TMDataGrid:src/tmdatagrid/core/columnOrdering.ts'
 ---
 
 # TMDataGrid — Features and capabilities
@@ -26,10 +30,10 @@ Almost every control is bound to the TanStack capability check for that feature,
 so setting the standard table or column option removes the corresponding
 interface. Empty menus and inactive buttons are never rendered.
 
-Column ordering is the one exception. TanStack's `columnOrderingFeature` ships
-state and APIs but no `enable` option, so the grid defines
-`enableColumnOrdering` and `meta.enableOrdering` itself. They behave like the
-options around them.
+Column ordering and pagination are the two exceptions. TanStack ships state and
+APIs for both but no `enable` option, so the grid defines `enableColumnOrdering`
+(with `meta.enableOrdering`) and `enablePagination` itself. Ordering behaves
+like the options around it; pagination is the one switch that defaults to off.
 
 ## Option reference
 
@@ -46,6 +50,9 @@ options around them.
 | `enableColumnOrdering: false` | Table | Header dragging and the move menu items |
 | `meta.enableOrdering: false` | Column | That column's header dragging and move menu items |
 | `enableRowSelection: false` | Table | The checkbox column |
+| `rowSelectionMode: "row"` | Table | The checkbox column — the row itself selects instead. See Row selection |
+| `highlightSelectedRows: false` | Table | The highlight background on selected rows. Follows the selection mode by default |
+| `enablePagination: true` | Table | Opt-in: adds paging and the `Footer` pager. Off by default |
 
 A column whose menu has no remaining items renders no menu button. Dividers are
 never left at the end of a menu.
@@ -62,8 +69,76 @@ const grid = useTMDataGrid({
 });
 ```
 
-Pagination is not controlled by an option — omit `TMDataGrid.Footer` and no
-pagination controls are rendered.
+## Row selection
+
+On by default, in two modes. Both write to the same `rowSelection` state, so
+everything downstream — the toolbar count, `getSelectedRowModel()`, persistence
+— is unaffected by the choice.
+
+**Checkbox** — the default. A checkbox column is added as the first column, with
+a select-all box in its header. Clicking a row elsewhere does not select it, and
+a selected row is not highlighted: the checkbox already says so.
+
+```tsx
+const grid = useTMDataGrid({ data, columns });
+```
+
+**Row** — no checkbox column. Clicking a row toggles it, and the row takes the
+highlight background — the only feedback a click gives. Other rows keep their
+state, so a click never clears the rest of the selection. Rows are focusable in
+this mode and Space or Enter toggles the focused row.
+
+```tsx
+const grid = useTMDataGrid({ data, columns, rowSelectionMode: "row" });
+```
+
+`enableRowSelection: false` removes both, and `rowSelectionMode` is then
+ignored. `TMDataGrid.Table`'s `onRowClick` still fires in either mode — under
+`"row"` it runs in addition to the selection, not instead of it.
+
+`highlightSelectedRows` follows the mode — on for `"row"`, off for
+`"checkbox"` — and can be set to override either way. The colour is the
+`--dg-row-selected-bg` CSS variable (default `--mantine-primary-color-light`);
+change it on the grid element without touching the flag:
+
+```tsx
+// Checkbox column, and selected rows are highlighted too.
+const grid = useTMDataGrid({ data, columns, highlightSelectedRows: true });
+
+<TMDataGrid
+  {...grid}
+  style={{ "--dg-row-selected-bg": "var(--mantine-color-blue-0)" }}
+/>
+```
+
+Rows carry `data-selected` whenever selected and `data-highlighted` only when
+also highlighted, so custom styling can key off either.
+
+## Pagination
+
+Off by default: the grid renders every filtered and sorted row and relies on
+virtualization. Three modes:
+
+```tsx
+// No pagination (default) — TMDataGrid.Footer renders nothing.
+const grid = useTMDataGrid({ data, columns });
+
+// Client pagination — pages locally, Footer renders its pager.
+const grid = useTMDataGrid({ data, columns, enablePagination: true });
+
+// Manual pagination — manualPagination implies enablePagination.
+const grid = useTMDataGrid({
+  data: page.rows,
+  columns,
+  manualPagination: true,
+  rowCount: page.total,
+  state: { pagination },
+  onPaginationChange: setPagination,
+});
+```
+
+The built-in pager can be replaced with the Footer's `pagination` render prop
+(see the `getting-started` skill) or built from scratch on the table API.
 
 ## Capability helpers
 
@@ -90,7 +165,8 @@ function ExportButton() {
 | `canHideAny` | At least one leaf column can be hidden. |
 | `canPinAny` | At least one leaf column can be pinned. |
 | `canReorderAny` | At least one leaf column can be moved. |
-| `canSelectRows` | `enableRowSelection` is not `false`. |
+| `canSelectRows` | `enableRowSelection` is not `false`. The mode is in `features.rowSelectionMode`. |
+| `canPaginate` | `enablePagination` or `manualPagination` is `true`. |
 
 `getColumnCapabilities(column, features)` returns the same information for a
 single column as `canSort`, `canFilter`, `canHide`, `canPin`, `canResize` and
@@ -207,6 +283,18 @@ table.setColumnOrder(["__select__", "department", "id", …]);
 moveColumn({ table, columnId: "department", targetId: "id", side: "before" });
 ```
 
+### Rendering the Footer without enabling pagination
+
+```tsx
+// Wrong — pagination defaults to off, so the Footer renders nothing.
+const grid = useTMDataGrid({ data, columns });
+<TMDataGrid.Footer />
+
+// Right — opt in (manualPagination: true also counts).
+const grid = useTMDataGrid({ data, columns, enablePagination: true });
+<TMDataGrid.Footer />
+```
+
 ### Expecting a table-level flag to override a column
 
 Table and column options compose — the table flag gates the feature, and the

package/skills/getting-started/SKILL.md

@@ -10,19 +10,20 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.1.0'
+  library_version: '0.2.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/getting-started.md'
   - 'Jielga/TMDataGrid:src/docs/components.md'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/TMDataGrid.tsx'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/sizes.ts'
+  - 'Jielga/TMDataGrid:src/tmdatagrid/components/TMDataGrid.tsx'
+  - 'Jielga/TMDataGrid:src/tmdatagrid/core/sizes.ts'
 ---
 
 # TMDataGrid — Getting started
 
 `useTMDataGrid` creates the table, `TMDataGrid` provides it through context, and
 the parts rendered inside read what they need from that context. Only the parts
-you render exist: leave out `TMDataGrid.Footer` and there is no pagination.
+you render exist, and only the features you enable have state: pagination is
+opt-in via `enablePagination` — by default every row renders, virtualized.
 
 ## Install
 
@@ -69,6 +70,7 @@ export function Employees({ data }: { data: Employee[] }) {
     data,
     columns,
     getRowId: (row) => String(row.id),
+    enablePagination: true,
   });
 
   return (
@@ -101,13 +103,14 @@ Spread the hook result (`{...grid}`) rather than assigning `table`, `ui` and
 | Column menu | On hover: sort, filter, pin, move, hide, manage columns. |
 | Filter panel | Column, operator and value rows. |
 | Column manager | Search, toggle, show/hide all, reset. |
-| Row selection | Checkbox column pinned to the left. |
-| Pagination | Only when `TMDataGrid.Footer` is rendered. |
+| Row selection | Checkbox column pinned to the left, or click-to-select rows with `rowSelectionMode: "row"`. |
+| Pagination | Off by default: all rows render, virtualized. Opt in with `enablePagination: true`. |
 | Sizing | `size="xs"` to `size="xl"` scales rows, type and controls. |
 
 Each is bound to a capability check — disabling the standard table or column
-option also removes its interface. Column ordering is the one switch the grid
-defines itself, as `enableColumnOrdering`. See the `features` skill.
+option also removes its interface. Column ordering (`enableColumnOrdering`) and
+pagination (`enablePagination`) are the two switches the grid defines itself.
+See the `features` skill.
 
 ## Layout
 
@@ -125,9 +128,9 @@ and presence are up to you — the root is a plain flex column.
 
 | Component | Props | Notes |
 | --- | --- | --- |
-| `TMDataGrid` | `table`, `ui`, `features`, `size`, `className`, `style` | Root. Provides context. |
-| `TMDataGrid.Table` | `onRowClick(row)` | Header, virtualized body, filter panel. |
-| `TMDataGrid.Footer` | `pageSizeOptions` (default `[10, 25, 50, 100]`) | Pagination controls. |
+| `TMDataGrid` | `table`, `ui`, `features`, `size`, `className`, `style` | Root. Provides context. `style` also takes CSS variables: `--dg-row-selected-bg`, `--dg-row-height`, `--dg-header-height`, `--dg-font-size`, `--dg-padding`. |
+| `TMDataGrid.Table` | `onRowClick(row)` | Header, virtualized body, filter panel. `onRowClick` runs in addition to selection under `rowSelectionMode: "row"`. |
+| `TMDataGrid.Footer` | `pageSizeOptions` (default `[10, 25, 50, 100]`), `pagination` render prop | Pagination controls. Renders nothing unless pagination is enabled. |
 | `TMDataGrid.Toolbar` | `children` | Flex row above the grid. |
 | `TMDataGrid.Spacer` | — | Pushes later toolbar items right. |
 | `TMDataGrid.SummaryCount` | `children` | Visible rows out of total. |
@@ -146,6 +149,26 @@ Pass the row type so `onRowClick` stays typed:
 `options.rowCount`. `TMDataGrid.SummaryCount` uses `meta.totalRowCount` when
 provided, otherwise the pre-filtered row count.
 
+The Footer's `pagination` render prop replaces the built-in pager with your own
+UI, fed by the distilled pagination API:
+
+```tsx
+<TMDataGrid.Footer
+  pagination={(api) => (
+    <Pagination
+      total={api.pageCount}
+      value={api.pageIndex + 1}
+      onChange={(page) => api.setPageIndex(page - 1)}
+    />
+  )}
+/>
+```
+
+`TMDataGridPaginationApi` carries `pageIndex`, `pageSize`, `pageCount`,
+`rowCount`, `canPreviousPage`, `canNextPage` and the actions `setPageIndex`,
+`setPageSize`, `previousPage`, `nextPage`, `firstPage`, `lastPage`. Outside the
+Footer, `getTMDataGridPaginationApi(grid.table)` returns the same object.
+
 ## size
 
 Standard Mantine scale. Controls row height, header height, font size and cell
@@ -201,9 +224,9 @@ is no error.
 `<TMDataGrid table={grid.table}>` omits `ui` and `features`. Panels stop opening
 and feature toggles stop being reactive. Spread instead: `<TMDataGrid {...grid}>`.
 
-### Expecting Footer to control pagination
+### Expecting Footer to enable pagination
 
-Pagination is not an option. Omitting `TMDataGrid.Footer` removes the controls
-but the table still paginates at `pageSize: 25` — rows beyond the first page
-simply become unreachable. Set `initialState.pagination.pageSize` if you want
-every row on one page.
+Rendering `TMDataGrid.Footer` does not switch pagination on — the option does.
+With pagination off (the default) the Footer renders nothing and every row is
+rendered, virtualized. Set `enablePagination: true` (or `manualPagination:
+true` for server paging) to page the data and show the pager.

package/skills/options/SKILL.md

@@ -4,7 +4,8 @@ description: >
   useTMDataGrid options, return value and state persistence. Covers passthrough
   of TanStack TableOptions, the default initialState (pagination, columnPinning,
   globalFilterFn), the meta object (loading, noResultsLabel, rowHeight,
-  totalRowCount), the grid's own persist and enableColumnOrdering options, the
+  totalRowCount), the grid's own persist, enableColumnOrdering,
+  enablePagination, rowSelectionMode and highlightSelectedRows options, the
   persist option with dataKey/settingsKey slice selection and storageMode, the
   returned table/ui/features triple, ui panel and column drag actions, and
   reading grid state with useSelector. Load when configuring the hook,
@@ -12,11 +13,11 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.1.0'
+  library_version: '0.2.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/use-tm-data-grid.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/useTMDataGrid.tsx'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/persistence.ts'
+  - 'Jielga/TMDataGrid:src/tmdatagrid/core/persistence.ts'
 ---
 
 # TMDataGrid — useTMDataGrid
@@ -37,21 +38,25 @@ All TanStack `TableOptions` are supported and passed through unchanged, includin
 flags and `rowCount`. The `features` option is supplied internally and cannot be
 overridden.
 
-`persist` and `enableColumnOrdering` are the grid's own options and are consumed
-by the hook rather than forwarded to TanStack.
+`persist`, `enableColumnOrdering`, `enablePagination`, `rowSelectionMode` and
+`highlightSelectedRows` are the grid's own options and are consumed by the hook
+rather than forwarded to TanStack.
 
 | Option | Type | Default | Description |
 | --- | --- | --- | --- |
 | `data` | `TData[]` | – | Row data. Keep the reference stable with `useMemo`. |
 | `columns` | `ColumnDef[]` | – | Created with `createTMDataGridColumnHelper`. |
 | `getRowId` | `(row, index) => string` | Row index | Used by row selection and virtualization. |
-| `enableRowSelection` | `boolean \| (row) => boolean` | `true` | `false` removes the checkbox column. |
+| `enableRowSelection` | `boolean \| (row) => boolean` | `true` | `false` removes row selection and its checkbox column. |
+| `rowSelectionMode` | `"checkbox" \| "row"` | `"checkbox"` | `"row"` drops the checkbox column and selects on row click. Defined by the grid. |
+| `highlightSelectedRows` | `boolean` | Follows the mode | Highlight background on selected rows: off for `"checkbox"`, on for `"row"`. Colour is the `--dg-row-selected-bg` CSS variable. Defined by the grid. |
 | `enableSorting` | `boolean` | `true` | Enables sorting for the table. |
 | `enableColumnFilters` | `boolean` | `true` | Enables filtering for the table. |
 | `enableHiding` | `boolean` | `true` | Enables column visibility for the table. |
 | `enableColumnPinning` | `boolean` | `true` | Enables pinning for the table. |
 | `enableColumnResizing` | `boolean` | `true` | Enables resizing for the table. |
 | `enableColumnOrdering` | `boolean` | `true` | Enables header dragging and the move menu items. Defined by the grid. |
+| `enablePagination` | `boolean` | `false` | Enables client-side paging and the `Footer` pager. Implied by `manualPagination`. Defined by the grid. |
 | `columnResizeMode` | `"onChange" \| "onEnd"` | `"onChange"` | Resize update strategy. |
 | `initialState` | `Partial<TableState>` | See below | Merged over the grid defaults. |
 | `meta` | `TMDataGridTableMeta` | `{}` | Grid configuration, see below. |
@@ -61,7 +66,7 @@ by the hook rather than forwarded to TanStack.
 
 | Slice | Default |
 | --- | --- |
-| `pagination` | `{ pageIndex: 0, pageSize: 25 }` |
+| `pagination` | `{ pageIndex: 0, pageSize: 25 }` — inert until pagination is enabled |
 | `columnPinning.left` | The checkbox column, followed by any columns you provide |
 | `globalFilterFn` | `"includesString"` |
 

package/skills/server-side/SKILL.md

@@ -10,7 +10,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.1.0'
+  library_version: '0.2.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/server-side.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/useTMDataGrid.tsx'
@@ -21,7 +21,10 @@ sources:
 The grid reads rows through `getPaginatedRowModel()` and totals through
 `getRowCount()` and `getPageCount()`, all of which respect TanStack's manual
 modes. A server-driven grid therefore needs only the standard `manual*`
-configuration — no grid-specific options.
+configuration — no grid-specific options. `manualPagination: true` also
+switches the grid's pagination flag on, so `TMDataGrid.Footer` renders its
+pager without `enablePagination`. Declare `pageCount: -1` when the total is
+unknown; the next button then stays enabled.
 
 ## Setup
 

package/src/tmdatagrid/TMDataGridContext.ts

@@ -1,5 +1,5 @@
 import { createContext, useContext } from "react";
-import type { TMDataGridSize } from "./sizes";
+import type { TMDataGridSize } from "./core/sizes";
 import type { TMDataGridApi } from "./useTMDataGrid";
 
 /**

package/src/tmdatagrid/components/TMDataGrid.module.css

@@ -0,0 +1,63 @@
+/* The grid root: the size scale every other module reads, and the frame.
+   Each component owns its own module; these variables cascade into all of
+   them, and the pinned-column boundary shared by header and body cells lives
+   in sticky.module.css. */
+
+/* Size scale. Row heights mirror SIZE_ROW_HEIGHT in core/sizes.ts — the
+   virtualizer needs the number in JS, so the two have to agree. */
+.root[data-size="xs"] {
+  --dg-row-height: 34px;
+  --dg-header-height: 32px;
+  --dg-font-size: var(--mantine-font-size-xs);
+  --dg-padding: 6px;
+}
+
+.root[data-size="sm"] {
+  --dg-row-height: 42px;
+  --dg-header-height: 38px;
+  --dg-font-size: var(--mantine-font-size-sm);
+  --dg-padding: 8px;
+}
+
+.root[data-size="md"] {
+  --dg-row-height: 52px;
+  --dg-header-height: 44px;
+  --dg-font-size: var(--mantine-font-size-sm);
+  --dg-padding: 10px;
+}
+
+.root[data-size="lg"] {
+  --dg-row-height: 62px;
+  --dg-header-height: 52px;
+  --dg-font-size: var(--mantine-font-size-md);
+  --dg-padding: 14px;
+}
+
+.root[data-size="xl"] {
+  --dg-row-height: 72px;
+  --dg-header-height: 60px;
+  --dg-font-size: var(--mantine-font-size-lg);
+  --dg-padding: 18px;
+}
+
+.root {
+  /* Fallbacks, so the parts still work if rendered outside a sized root. */
+  --dg-row-height: 52px;
+  --dg-header-height: 44px;
+  --dg-font-size: var(--mantine-font-size-sm);
+  --dg-padding: 10px;
+  /* Background of a highlighted (selected) row. Override it on the grid:
+     <TMDataGrid style={{ "--dg-row-selected-bg": "var(--mantine-color-blue-0)" }} /> */
+  --dg-row-selected-bg: var(--mantine-primary-color-light);
+
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  /* Header text is a stretched flex item, so an inherited `text-align: center`
+     from the host page would centre headers away from their cell content. */
+  text-align: left;
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-md);
+  background-color: var(--mantine-color-body);
+}

package/src/tmdatagrid/{TMDataGrid.tsx → components/TMDataGrid.tsx}

@@ -2,7 +2,7 @@ import type { RowData } from "@tanstack/react-table";
 import { type CSSProperties, type ReactNode, useMemo } from "react";
 import classes from "./TMDataGrid.module.css";
 import { TMDataGridColumnsPanel } from "./TMDataGridColumnsPanel";
-import { TMDataGridContextProvider } from "./TMDataGridContext";
+import { TMDataGridContextProvider } from "../TMDataGridContext";
 import { TMDataGridFilterPanel } from "./TMDataGridFilterPanel";
 import { TMDataGridFooter } from "./TMDataGridFooter";
 import { TMDataGridTable } from "./TMDataGridTable";
@@ -18,8 +18,8 @@ import {
   SIZE_CONTROL_SIZE,
   SIZE_ROW_HEIGHT,
   type TMDataGridSize,
-} from "./sizes";
-import type { TMDataGridApi } from "./useTMDataGrid";
+} from "../core/sizes";
+import type { TMDataGridApi } from "../useTMDataGrid";
 
 export type TMDataGridProps<TData extends RowData> = TMDataGridApi<TData> & {
   children: ReactNode;
@@ -29,7 +29,12 @@ export type TMDataGridProps<TData extends RowData> = TMDataGridApi<TData> & {
    */
   size?: TMDataGridSize;
   className?: string;
-  style?: CSSProperties;
+  /**
+   * Inline styles. Widened to accept CSS variables, which is how the grid's
+   * colours are themed — `--dg-row-selected-bg` for the selected row
+   * background. Plain `CSSProperties` rejects `--*` keys.
+   */
+  style?: CSSProperties & Record<`--${string}`, string | number>;
 };
 
 /**

package/src/tmdatagrid/components/TMDataGridColumnsPanel.module.css

@@ -0,0 +1,25 @@
+.columnsPanel {
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+}
+
+.columnsPanelSearch {
+  padding: var(--mantine-spacing-sm);
+}
+
+.columnsPanelList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-sm);
+  padding: 0 var(--mantine-spacing-sm) var(--mantine-spacing-sm);
+}
+
+.columnsPanelFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-sm);
+  border-top: 1px solid var(--mantine-color-default-border);
+}

package/src/tmdatagrid/{TMDataGridColumnsPanel.tsx → components/TMDataGridColumnsPanel.tsx}

@@ -1,9 +1,9 @@
 import { Button, Checkbox, ScrollArea, Text, TextInput } from "@mantine/core";
 import { useSelector } from "@tanstack/react-store";
 import { useState } from "react";
-import classes from "./TMDataGrid.module.css";
-import { useTMDataGridContext } from "./TMDataGridContext";
-import { getColumnLabel } from "./columnUtils";
+import classes from "./TMDataGridColumnsPanel.module.css";
+import { useTMDataGridContext } from "../TMDataGridContext";
+import { getColumnLabel } from "../core/columnUtils";
 import { SearchIcon } from "./icons";
 
 /**