@jielga/tmdatagrid 0.1.0 → 0.3.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_13dg1_8[data-size=xs]{--dg-row-height:34px;--dg-header-height:32px;--dg-font-size:var(--mantine-font-size-xs);--dg-padding:6px}._root_13dg1_8[data-size=sm]{--dg-row-height:42px;--dg-header-height:38px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:8px}._root_13dg1_8[data-size=md]{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px}._root_13dg1_8[data-size=lg]{--dg-row-height:62px;--dg-header-height:52px;--dg-font-size:var(--mantine-font-size-md);--dg-padding:14px}._root_13dg1_8[data-size=xl]{--dg-row-height:72px;--dg-header-height:60px;--dg-font-size:var(--mantine-font-size-lg);--dg-padding:18px}._root_13dg1_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);--dg-row-highlight-bg:var(--mantine-primary-color-light-hover);--dg-row-group-bg:var(--mantine-color-body);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}._groupToggle_h06xv_4{width:100%;min-width:0;font-size:var(--dg-font-size);color:inherit;align-items:center;gap:6px;display:flex}._chevron_h06xv_14{color:var(--mantine-color-dimmed);flex:none;align-items:center;transition:transform .12s;display:flex}._chevron_h06xv_14[data-expanded=true]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){._chevron_h06xv_14{transition:none}}._groupLabel_h06xv_34{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-weight:600;overflow:hidden}._groupCount_h06xv_44{color:var(--mantine-color-dimmed);font-variant-numeric:tabular-nums;flex:none}._filterPanel_izakx_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_izakx_16{align-items:flex-end;gap:var(--mantine-spacing-xs);display:flex}._filterPanelHeader_izakx_22{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-md);padding-bottom:var(--mantine-spacing-xs);display:flex}._filterPanelFooter_izakx_30{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-md);display:flex}._filterPills_1yybb_3{align-items:center;gap:var(--mantine-spacing-xs);flex-wrap:wrap;display:flex}._filterPills_1yybb_3 ._pill_1yybb_15{background-color:var(--lightningcss-light,var(--mantine-color-gray-1))var(--lightningcss-dark,var(--mantine-color-dark-5));color:var(--lightningcss-light,var(--mantine-color-black))var(--lightningcss-dark,var(--mantine-color-dark-0));border:1px solid var(--lightningcss-light,var(--mantine-color-gray-3))var(--lightningcss-dark,var(--mantine-color-dark-3))}._pillLabel_1yybb_27{font:inherit;color:inherit;cursor:pointer}._pillLabel_1yybb_27:hover{text-decoration:underline}._footer_149ca_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}._footer_149ca_1[data-paging-suspended=true]{opacity:.55}._tableWrapper_chabz_2{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}._scrollContainer_chabz_10{flex:1;min-height:0;position:relative;overflow:auto}._grid_chabz_18{display:grid}._headerRow_chabz_24{grid-column:1/-1;grid-template-columns:subgrid;z-index:3;display:grid;position:sticky;top:0}._bodyRow_chabz_33{--row-bg:var(--mantine-color-body);grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;display:grid}._bodyRow_chabz_33:hover{--row-bg:var(--mantine-color-default-hover)}._bodyRow_chabz_33[data-grouped=true]{--row-bg:var(--dg-row-group-bg)}._bodyRow_chabz_33[data-context-menu=true]{--row-bg:var(--mantine-color-default-hover)}._bodyRow_chabz_33[data-selected-bg=true]{--row-bg:var(--dg-row-selected-bg)}._bodyRow_chabz_33[data-highlighted=true]{--row-bg:var(--dg-row-highlight-bg)}._bodyRow_chabz_33[data-selects-on-click=true]{-webkit-user-select:none;user-select:none}._bodyRow_chabz_33:focus-visible{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._bodyCell_chabz_91{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}._bodyCell_chabz_91[data-select-column=true]{padding:0}._cellContent_chabz_89{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._bodyCell_chabz_91[data-align=right]{justify-content:flex-end}._bodyCell_chabz_91[data-align=center]{justify-content:center}._bodyCell_chabz_91[data-align=left] ._cellContent_chabz_89{flex:auto}._messageRow_chabz_129{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_49xbo_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_49xbo_1[data-align=right]{justify-content:flex-end}._headerCell_49xbo_1[data-align=center]{justify-content:center}._headerCell_49xbo_1[data-select-column=true]{padding:0}._headerCell_49xbo_1[data-active=true] ._headerTitle_49xbo_31{color:var(--mantine-primary-color-filled)}._headerTitle_49xbo_31{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._headerCell_49xbo_1[data-align=right] ._headerTitle_49xbo_31{text-align:right}._headerCell_49xbo_1[data-align=center] ._headerTitle_49xbo_31{justify-content:center;display:flex}._headerActions_49xbo_54{flex-shrink:0;align-items:center;gap:0;margin-left:auto;display:flex}._headerCell_49xbo_1[data-align=right] ._headerActions_49xbo_54{order:-1;margin-left:0;margin-right:auto}._headerAction_49xbo_54{display:none}._headerCell_49xbo_1:hover ._headerAction_49xbo_54,._headerCell_49xbo_1:focus-within ._headerAction_49xbo_54,._headerAction_49xbo_54[data-pinned-visible=true]{display:flex}._headerCellSortable_49xbo_83{cursor:pointer}._headerCellDragging_49xbo_90{opacity:.4}._headerCellDropBefore_49xbo_94:before,._headerCellDropAfter_49xbo_95:before{content:"";background-color:var(--mantine-primary-color-filled);z-index:5;pointer-events:none;width:2px;position:absolute;top:0;bottom:0}._headerCellDropBefore_49xbo_94:before{left:0}._headerCellDropAfter_49xbo_95:before{right:0}._columnSeparator_49xbo_115{z-index:1;justify-content:center;width:10px;height:50%;display:flex;position:absolute;top:25%;right:0;transform:translate(50%)}._columnSeparatorResizable_49xbo_127{cursor:col-resize;touch-action:none}._columnSeparator_49xbo_115:after{content:"";background-color:#0000;width:1px;height:100%;transition:background-color .12s,width .12s}._headerCell_49xbo_1:hover ._columnSeparator_49xbo_115:after,._headerCell_49xbo_1:focus-within ._columnSeparator_49xbo_115:after{background-color:var(--mantine-color-default-border)}._columnSeparatorResizable_49xbo_127:hover:after,._columnSeparatorActive_49xbo_150:after{background-color:var(--mantine-primary-color-filled);width:2px}._menuItemActive_49xbo_156{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.3.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.3.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.3.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

@@ -4,25 +4,26 @@ description: >
   Set up TMDataGrid, a compound React data grid built on TanStack Table v9 and
   Mantine. Covers useTMDataGrid, the TMDataGrid root, context, the component
   catalog (Table, Footer, Toolbar, Spacer, SummaryCount, FilterButton,
-  ColumnsButton, FilterPanel, ColumnsPanel), the size scale and the
+  ColumnsButton, FilterPanel, FilterPills, ColumnsPanel), the size scale and the
   bounded-height layout requirement. Load when adding a grid, choosing which
   parts to render, or when rows do not appear.
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.1.0'
+  library_version: '0.3.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
 
@@ -120,21 +123,24 @@ takes a fixed pixel width once resized or pinned.
 
 ## Components
 
-All read the grid from context and must be rendered inside `TMDataGrid`. Order
-and presence are up to you — the root is a plain flex column.
+All read the grid from context and must be rendered inside `TMDataGrid`, except
+`TMDataGrid.FilterPills`, which takes the grid as an `api` prop and can live
+anywhere on the page. Order 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)`, `rowContextMenu` render prop, `rowContextMenuProps` | 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. |
 | `TMDataGrid.FilterButton` | — | Toggles filter panel. Renders nothing if no column is filterable. |
 | `TMDataGrid.ColumnsButton` | — | Opens column manager. Renders nothing if no column is hideable. |
-| `TMDataGrid.FilterPanel` | — | Rendered by `.Table`; exported for custom layouts. |
+| `TMDataGrid.FilterPanel` | — | Rendered by `.Table`; exported for custom layouts. Header close button, Escape, click-away, "Add filter" and "Clear all". |
 | `TMDataGrid.ColumnsPanel` | — | Rendered by `.ColumnsButton`; exported for custom layouts. |
+| `TMDataGrid.FilterPills` | `api`, `size` (default `"sm"`), `showClearAll` (default `true`), `onPillClick(columnId)`, `className` | One pill per active filter, ✕ to clear it. Takes the api as a prop, so it can be rendered outside the grid. Also exported as `TMDataGridFilterPills`. |
 
 Pass the row type so `onRowClick` stays typed:
 
@@ -142,10 +148,61 @@ Pass the row type so `onRowClick` stays typed:
 <TMDataGrid.Table<Employee> onRowClick={(row) => open(row.original.id)} />
 ```
 
+`rowContextMenu` fills the dropdown of a Mantine `Menu` the grid opens at the
+pointer on a right-click (or a long press). The grid owns the `Menu` — opening,
+positioning, and closing on Escape, outside click, body scroll or an item pick —
+so the render prop only says what goes in it:
+
+```tsx
+<TMDataGrid.Table<Employee>
+  rowContextMenu={({ table, row, cell, close }) => (
+    <>
+      <Menu.Label>{row.original.firstName}</Menu.Label>
+      <Menu.Item onClick={() => open(row.original.id)}>Open</Menu.Item>
+      <Menu.Item
+        onClick={() =>
+          navigator.clipboard.writeText(String(cell?.getValue() ?? ""))
+        }
+      >
+        Copy cell value
+      </Menu.Item>
+    </>
+  )}
+/>
+```
+
+`cell` is the one that was right-clicked, `table` is there for actions that read
+the selection, and `close` is for dropdown content that is not a `Menu.Item`
+(those close themselves). Return `null` to leave a row without a menu. It is
+called during render, and only for the open row, so it must stay pure — put the
+work in the item handlers. Right-clicking does not change the selection or the
+highlight; the row carries `data-context-menu` while its menu is open. Pass
+`rowContextMenuProps` for `width`, `shadow`, `position` and the rest.
+
 `TMDataGrid.Footer` reads totals from `table.getRowCount()`, which prefers
 `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
@@ -171,6 +228,7 @@ mirrors them. Set `meta.rowHeight` for a height outside the scale.
 | `openColumnFilter(api, columnId)` | Adds an empty filter for a column and opens the panel. |
 | `getColumnLabel(column)` | `meta.label`, a string header, or the column id. |
 | `getColumnType(column)` | `meta.type`, defaulting to `"string"`. |
+| `formatFilterLabel({ label, type, filter })` | The one-line filter description used on the pills. |
 | `moveColumn({ table, columnId, targetId, side })` | Moves a column next to another. See the `features` skill. |
 | `moveColumnByStep({ table, columnId, direction })` | Moves a column one position within its region. |
 | `SELECT_COLUMN_ID` | Id of the generated checkbox column. |
@@ -201,9 +259,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.3.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.3.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";
 
 /**