@jielga/tmdatagrid 0.2.0 → 0.5.0

package/dist/styles.css

@@ -1,2 +1,2 @@
-._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}
+._root_qequm_8[data-size=xs]{--dg-row-height:34px;--dg-header-height:32px;--dg-font-size:var(--mantine-font-size-xs);--dg-padding:6px}._root_qequm_8[data-size=sm]{--dg-row-height:42px;--dg-header-height:38px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:8px}._root_qequm_8[data-size=md]{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px}._root_qequm_8[data-size=lg]{--dg-row-height:62px;--dg-header-height:52px;--dg-font-size:var(--mantine-font-size-md);--dg-padding:14px}._root_qequm_8[data-size=xl]{--dg-row-height:72px;--dg-header-height:60px;--dg-font-size:var(--mantine-font-size-lg);--dg-padding:18px}._root_qequm_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);--dg-z-pinned-cell:2;--dg-z-focused-cell:3;--dg-z-summary-row:4;--dg-z-summary-pinned-cell:5;--dg-z-header:6;--dg-z-header-pinned-cell:7;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}._detailsToggle_n39tz_3{width:100%;height:100%;color:inherit;justify-content:center;align-items:center;display:flex}._detailsToggle_n39tz_3:hover ._chevron_n39tz_12{color:var(--mantine-color-text)}._chevron_n39tz_12{color:var(--mantine-color-dimmed);align-items:center;transition:transform .12s;display:flex}._chevron_n39tz_12[data-expanded=true]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){._chevron_n39tz_12{transition:none}}._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_1nt60_2{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}._scrollContainer_1nt60_10{flex:1;min-height:0;position:relative;overflow:auto}._grid_1nt60_18{display:grid}._headerRow_1nt60_24{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-header,6);display:grid;position:sticky;top:0}._bodyRow_1nt60_33{--row-bg:var(--mantine-color-body);grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;display:grid}._bodyRow_1nt60_33:hover{--row-bg:var(--mantine-color-default-hover)}._bodyRow_1nt60_33[data-grouped=true]{--row-bg:var(--dg-row-group-bg)}._bodyRow_1nt60_33[data-context-menu=true]{--row-bg:var(--mantine-color-default-hover)}._bodyRow_1nt60_33[data-selected-bg=true]{--row-bg:var(--dg-row-selected-bg)}._bodyRow_1nt60_33[data-highlighted=true]{--row-bg:var(--dg-row-highlight-bg)}._bodyRow_1nt60_33[data-selects-on-click=true]{-webkit-user-select:none;user-select:none}._bodyRow_1nt60_33:focus-visible{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._bodyCell_1nt60_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_1nt60_91[data-control-column=true]{padding:0}._grid_1nt60_18[data-range-dragging]{-webkit-user-select:none;user-select:none}._bodyCell_1nt60_91[data-selected=true]{background-color:color-mix(in srgb, var(--mantine-primary-color-filled) 14%, var(--row-bg));--dg-edge-top:transparent;--dg-edge-bottom:transparent;--dg-edge-left:transparent;--dg-edge-right:transparent;box-shadow:inset 0 1px 0 0 var(--dg-edge-top), inset 0 -1px 0 0 var(--dg-edge-bottom), inset 1px 0 0 0 var(--dg-edge-left), inset -1px 0 0 0 var(--dg-edge-right)}._bodyCell_1nt60_91[data-edge-top=true]{--dg-edge-top:var(--mantine-primary-color-filled)}._bodyCell_1nt60_91[data-edge-bottom=true]{--dg-edge-bottom:var(--mantine-primary-color-filled)}._bodyCell_1nt60_91[data-edge-left=true]{--dg-edge-left:var(--mantine-primary-color-filled)}._bodyCell_1nt60_91[data-edge-right=true]{--dg-edge-right:var(--mantine-primary-color-filled)}._bodyCell_1nt60_91[data-focused=true]{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._cellContent_1nt60_89{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._bodyCell_1nt60_91[data-align=right]{justify-content:flex-end}._bodyCell_1nt60_91[data-align=center]{justify-content:center}._bodyCell_1nt60_91[data-align=left] ._cellContent_1nt60_89{flex:auto}._detailsCell_1nt60_204{border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--row-bg);padding:var(--dg-padding);-webkit-user-select:text;user-select:text;cursor:auto;grid-column:1/-1}._messageRow_1nt60_215{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}._summaryRow_1nt60_228{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-summary-row,4);display:grid;position:sticky;bottom:0}._summaryCell_1nt60_237{padding:0 var(--dg-padding);border-top:1px solid var(--mantine-color-default-border);background-color:var(--mantine-color-body);font-size:var(--dg-font-size);align-items:center;font-weight:600;display:flex}._summaryCell_1nt60_237[data-control-column=true]{padding:0}._summaryCell_1nt60_237[data-align=right]{justify-content:flex-end}._summaryCell_1nt60_237[data-align=center]{justify-content:center}._stickyLeft_6z1iq_16:after,._stickyRight_6z1iq_17:after{content:"";pointer-events:none;width:8px;position:absolute;top:0;bottom:0}._stickyLeft_6z1iq_16:after{background:linear-gradient(90deg,var(--lightningcss-light,#00000012)var(--lightningcss-dark,#00000042),var(--lightningcss-light,#00000006)var(--lightningcss-dark,#00000017) 45%,#0000);left:100%}._stickyRight_6z1iq_17:after{background:linear-gradient(270deg,var(--lightningcss-light,#00000012)var(--lightningcss-dark,#00000042),var(--lightningcss-light,#00000006)var(--lightningcss-dark,#00000017) 45%,#0000);right:100%}@supports (animation-timeline:scroll()){._stickyLeft_6z1iq_16:after,._stickyRight_6z1iq_17:after{--dg-sticky-edge-range:20px;opacity:0;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(inline)}._stickyLeft_6z1iq_16:after{animation-name:_stickyEdgeIn_6z1iq_1;animation-range:0 var(--dg-sticky-edge-range)}._stickyRight_6z1iq_17:after{animation-name:_stickyEdgeOut_6z1iq_1;animation-range:calc(100% - var(--dg-sticky-edge-range)) 100%}}@keyframes _stickyEdgeIn_6z1iq_1{0%{opacity:0}to{opacity:1}}@keyframes _stickyEdgeOut_6z1iq_1{0%{opacity:1}to{opacity:0}}._headerCell_1b6k8_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_1b6k8_1[data-align=right]{justify-content:flex-end}._headerCell_1b6k8_1[data-align=center]{justify-content:center}._headerCell_1b6k8_1[data-control-column=true]{padding:0}._headerCell_1b6k8_1[data-active=true] ._headerTitle_1b6k8_32{color:var(--mantine-primary-color-filled)}._headerTitle_1b6k8_32{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._headerCell_1b6k8_1[data-align=right] ._headerTitle_1b6k8_32{text-align:right}._headerCell_1b6k8_1[data-align=center] ._headerTitle_1b6k8_32{justify-content:center;display:flex}._headerActions_1b6k8_55{flex-shrink:0;align-items:center;gap:0;margin-left:auto;display:flex}._headerCell_1b6k8_1[data-align=right] ._headerActions_1b6k8_55{order:-1;margin-left:0;margin-right:auto}._headerAction_1b6k8_55{display:none}._headerCell_1b6k8_1:hover ._headerAction_1b6k8_55,._headerCell_1b6k8_1:focus-within ._headerAction_1b6k8_55,._headerAction_1b6k8_55[data-pinned-visible=true]{display:flex}._headerCellSortable_1b6k8_84{cursor:pointer}._sortIndex_1b6k8_90{color:var(--mantine-color-dimmed);text-align:center;min-width:10px;font-size:10px;font-weight:600;line-height:1}._headerCellDragging_1b6k8_102{opacity:.4}._headerCellDropBefore_1b6k8_106:before,._headerCellDropAfter_1b6k8_107:before{content:"";background-color:var(--mantine-primary-color-filled);z-index:5;pointer-events:none;width:2px;position:absolute;top:0;bottom:0}._headerCellDropBefore_1b6k8_106:before{left:0}._headerCellDropAfter_1b6k8_107:before{right:0}._columnSeparator_1b6k8_127{z-index:1;justify-content:center;width:10px;height:50%;display:flex;position:absolute;top:25%;right:0;transform:translate(50%)}._columnSeparatorResizable_1b6k8_139{cursor:col-resize;touch-action:none}._columnSeparator_1b6k8_127:after{content:"";background-color:#0000;width:1px;height:100%;transition:background-color .12s,width .12s}._headerCell_1b6k8_1:hover ._columnSeparator_1b6k8_127:after,._headerCell_1b6k8_1:focus-within ._columnSeparator_1b6k8_127:after{background-color:var(--mantine-color-default-border)}._columnSeparatorResizable_1b6k8_139:hover:after,._columnSeparatorActive_1b6k8_162:after{background-color:var(--mantine-primary-color-filled);width:2px}._menuItemActive_1b6k8_168{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.2.0",
+  "version": "0.5.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",
@@ -11,7 +11,7 @@
     "type": "git",
     "url": "git+https://github.com/Jielga/TMDataGrid.git"
   },
-  "homepage": "https://github.com/Jielga/TMDataGrid#readme",
+  "homepage": "https://jielga.github.io/TMDataGrid/",
   "bugs": {
     "url": "https://github.com/Jielga/TMDataGrid/issues"
   },

package/skills/columns/SKILL.md

@@ -11,7 +11,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.2.0'
+  library_version: '0.5.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/columns.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/core/filterOperators.ts'

package/skills/features/SKILL.md

@@ -5,19 +5,20 @@ description: >
   table and column options, and reuse the same checks in your own components.
   Covers the enableSorting/enableColumnFilters/enableHiding/enableColumnPinning/
   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
+  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 ordering with moveColumn and
+  moveColumnByStep, cell selection with arrow-key navigation, drag-selected
+  ranges, Ctrl+C copy and Excel-compatible CSV export, 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.
+  enabling pagination, reordering columns from code, adding cell navigation or
+  copy/export, or writing a custom toolbar button.
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.2.0'
+  library_version: '0.5.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/features.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/core/capabilities.ts'
@@ -242,10 +243,59 @@ const next = getStepTargetColumn({ table, columnId: "salary", direction: 1 });
 Both movers are no-ops for a move that is not allowed, including one across
 regions.
 
+## Cell selection
+
+Off by default. `cellSelection: "single"` gives one focused cell moved with the
+arrow keys; `"range"` adds a selectable rectangle, Ctrl+C and CSV export.
+
+```tsx
+const grid = useTMDataGrid({ data, columns, cellSelection: "range" });
+```
+
+On, the body's tab stop moves from the row to a cell (the whole grid is one Tab
+stop), the container reports `role="grid"` with `gridcell` children, and cells
+carry `data-focused` / `data-selected` / `data-edge-*`.
+
+| Key | Does |
+| --- | --- |
+| Arrows | one cell, clamped at the edges |
+| Shift+arrows | extends the rectangle from its anchor |
+| PageUp / PageDown | one viewport of rows |
+| Home / End, Ctrl+Home / Ctrl+End | ends of the row, corners of the grid |
+| Enter or F2 | steps into the cell's control; Escape steps back out |
+| Space | selects the row |
+| Ctrl+C | copies the block as tab-separated text |
+
+The body is one tab stop: controls inside body cells take `tabindex="-1"` while
+cell selection is on, so Tab leaves the grid instead of walking one control per
+mounted row. Enter/F2 steps in, Escape steps out, Space ticks the row from any
+cell. Custom cell controls should do the same —
+`tabIndex={useCellControlTabIndex()}`. Header controls are untouched.
+
+The generated lanes (checkbox, tree, details) are selectable and navigable —
+they take the tint and the outline — but never exported; a block covering only
+those disables Copy and Export.
+
+Drag across cells to select a rectangle; Shift+click extends one. The state is
+`ui.state.focusedCell` and `ui.state.cellRange`, both held as `{ rowId,
+columnId }` pairs so sorting and filtering carry the selection with the cells.
+Move them with `ui.actions.setFocusedCell` / `setCellRange`, follow them with
+`onFocusedCellChange`. One rectangle at a time.
+
+Right-clicking inside the selection offers Copy, "Export as CSV for Excel" and
+an Include headers toggle; a consumer's `rowContextMenu` items follow a divider.
+The CSV is Nordic-Excel shaped — `sep=;` line, UTF-8 BOM, CRLF, semicolons,
+decimal comma — and `cellExport` on `TMDataGrid.Table` changes any of that.
+Generated lanes (checkbox, tree, details) are never exported, and what is
+written is the cell's value rather than what it renders.
+
 ## Virtualization
 
-Always enabled and not configurable. Only rows within the viewport, plus a small
-overscan, are mounted, so page size does not affect how much is rendered.
+Always enabled. Only rows within the viewport, plus a small overscan, are
+mounted, so page size does not affect how much is rendered.
+
+`overscan` on `useTMDataGrid` (default `6`) sets how many rows are kept mounted
+on each side of the viewport — the one configurable part.
 
 Row height comes from `meta.rowHeight`, or from the `size` prop when unset. Rows
 are fixed height; an accurate value keeps scrolling precise.

package/skills/getting-started/SKILL.md

@@ -4,13 +4,13 @@ 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.2.0'
+  library_version: '0.5.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/getting-started.md'
   - 'Jielga/TMDataGrid:src/docs/components.md'
@@ -123,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. `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.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:
 
@@ -145,6 +148,37 @@ 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.
@@ -194,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. |

package/skills/options/SKILL.md

@@ -13,7 +13,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.2.0'
+  library_version: '0.5.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/use-tm-data-grid.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/useTMDataGrid.tsx'
@@ -57,6 +57,9 @@ rather than forwarded to TanStack.
 | `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. |
+| `cellSelection` | `"none" \| "single" \| "range"` | `"none"` | Cell cursor; `"range"` adds a drag-selectable rectangle, Ctrl+C and CSV export. Defined by the grid. |
+| `onFocusedCellChange` | `(cell \| null) => void` | – | Fires whenever the focused cell moves. |
+| `overscan` | `number` | `6` | Rows the virtualizer keeps mounted above and below the viewport. 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. |
@@ -168,8 +171,15 @@ const filterPanelOpen = useSelector(grid.ui, (state) => state.filterPanelOpen);
 | `toggleColumnsPanel` | `() => void` |
 | `startColumnDrag` | `(columnId: string) => void` |
 | `endColumnDrag` | `() => void` |
+| `setHighlightedRow` | `(rowId: string \| null) => void` |
+| `setSelectionAnchor` | `(rowId: string \| null) => void` |
+| `setFocusedCell` | `(cell: TMDataGridCellPosition \| null) => void` |
+| `setCellRange` | `(range: TMDataGridCellRange \| null) => void` |
 
-The last two are called by the header cells while a column is being dragged, and
+The last two move the cell cursor and the selected rectangle under
+`cellSelection`; DOM focus follows `focusedCell` and scrolls its row into view.
+
+`startColumnDrag` / `endColumnDrag` are called by the header cells while a column is being dragged, and
 `ui.draggedColumnId` holds the column being moved — browsers keep `dataTransfer`
 unreadable until the drop.
 

package/skills/server-side/SKILL.md

@@ -10,7 +10,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.2.0'
+  library_version: '0.5.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/server-side.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/useTMDataGrid.tsx'

package/src/tmdatagrid/TMDataGridContext.ts

@@ -30,3 +30,29 @@ export function useTMDataGridContext(): TMDataGridContextValue {
   }
   return api as TMDataGridContextValue;
 }
+
+/**
+ * What a control inside a *body* cell should put in its `tabIndex`.
+ *
+ * `-1` once cell selection is on, and this is what makes the promise of one tab
+ * stop true. Without it the browser walks Tab into the checkbox of every
+ * mounted row — a grid showing twenty rows would be twenty tab stops, and
+ * scrolling would change how many. Enter or F2 steps into the cell instead,
+ * which reaches a `-1` control perfectly well.
+ *
+ * Header controls are not covered: the header row is not part of cell
+ * navigation, so its sort buttons and menus stay in the tab order, where they
+ * are the only way to reach them.
+ *
+ * A custom cell renderer with a control in it wants the same:
+ *
+ * ```tsx
+ * cell: ({ row }) => (
+ *   <Button tabIndex={useCellControlTabIndex()} onClick={...}>Open</Button>
+ * )
+ * ```
+ */
+export function useCellControlTabIndex(): 0 | -1 {
+  const { features } = useTMDataGridContext();
+  return features.cellSelection ? -1 : 0;
+}

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

@@ -46,9 +46,29 @@
   --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:
+  /* Background of a selected row, when `showSelectedBackground` is on. 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);
+  /* Background of the highlighted row, under a selectionMode that has one.
+     Stronger than the selected background by default, since under
+     "checkboxAndHighlight" the two show up together. */
+  --dg-row-highlight-bg: var(--mantine-primary-color-light-hover);
+  /* Background of a group row. Transparent by default — the bold label and the
+     chevron are enough, and with the tree collapsed every row on screen is a
+     group row, so a tint would grey out the whole grid. Set it to give groups a
+     band of their own. */
+  --dg-row-group-bg: var(--mantine-color-body);
+
+  /* The stacking ladder, stated once. Body cells sit at auto (0); everything
+     sticky stacks over them in this order, and a sticky row crossing a sticky
+     column takes the row's slot plus one. */
+  --dg-z-pinned-cell: 2;
+  --dg-z-focused-cell: 3;
+  --dg-z-summary-row: 4;
+  --dg-z-summary-pinned-cell: 5;
+  --dg-z-header: 6;
+  --dg-z-header-pinned-cell: 7;
 
   display: flex;
   flex-direction: column;

package/src/tmdatagrid/components/TMDataGrid.tsx

@@ -4,11 +4,14 @@ import classes from "./TMDataGrid.module.css";
 import { TMDataGridColumnsPanel } from "./TMDataGridColumnsPanel";
 import { TMDataGridContextProvider } from "../TMDataGridContext";
 import { TMDataGridFilterPanel } from "./TMDataGridFilterPanel";
+import { TMDataGridFilterPills } from "./TMDataGridFilterPills";
 import { TMDataGridFooter } from "./TMDataGridFooter";
+import { TMDataGridSearch } from "./TMDataGridSearch";
 import { TMDataGridTable } from "./TMDataGridTable";
 import {
   TMDataGridColumnsButton,
   TMDataGridFilterButton,
+  TMDataGridLoadingIndicator,
   TMDataGridSummaryCount,
   TMDataGridToolbar,
   TMDataGridToolbarSpacer,
@@ -59,6 +62,10 @@ function TMDataGridRoot<TData extends RowData>({
   table,
   ui,
   features,
+  labels,
+  renderDetails,
+  renderDetailsEstHeight,
+  overscan,
   size = DEFAULT_TMDATAGRID_SIZE,
   children,
   className,
@@ -71,11 +78,25 @@ function TMDataGridRoot<TData extends RowData>({
       table,
       ui,
       features,
+      labels,
+      renderDetails,
+      renderDetailsEstHeight,
+      overscan,
       size,
       rowHeight,
       controlSize: SIZE_CONTROL_SIZE[size],
     }),
-    [table, ui, features, size, rowHeight],
+    [
+      table,
+      ui,
+      features,
+      labels,
+      renderDetails,
+      renderDetailsEstHeight,
+      overscan,
+      size,
+      rowHeight,
+    ],
   );
 
   return (
@@ -95,12 +116,19 @@ export const TMDataGrid = Object.assign(TMDataGridRoot, {
   Toolbar: TMDataGridToolbar,
   Spacer: TMDataGridToolbarSpacer,
   SummaryCount: TMDataGridSummaryCount,
+  LoadingIndicator: TMDataGridLoadingIndicator,
+  Search: TMDataGridSearch,
   ColumnsButton: TMDataGridColumnsButton,
   FilterButton: TMDataGridFilterButton,
   Table: TMDataGridTable,
   Footer: TMDataGridFooter,
   /** Rendered by `TMDataGrid.Table`; exported for custom layouts. */
   FilterPanel: TMDataGridFilterPanel,
+  /**
+   * Takes the grid as an `api` prop rather than from context, so it can be
+   * rendered outside `<TMDataGrid>` — a page header, for instance.
+   */
+  FilterPills: TMDataGridFilterPills,
   /** Rendered by `TMDataGrid.ColumnsButton`; exported for custom layouts. */
   ColumnsPanel: TMDataGridColumnsPanel,
 });

package/src/tmdatagrid/components/TMDataGridColumnsPanel.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import classes from "./TMDataGridColumnsPanel.module.css";
 import { useTMDataGridContext } from "../TMDataGridContext";
 import { getColumnLabel } from "../core/columnUtils";
+import { GROUP_COLUMN_ID } from "./TMDataGridGroupColumn";
 import { SearchIcon } from "./icons";
 
 /**
@@ -12,7 +13,7 @@ import { SearchIcon } from "./icons";
  * `TMDataGrid.ColumnsButton`.
  */
 export function TMDataGridColumnsPanel() {
-  const { table, controlSize } = useTMDataGridContext();
+  const { table, labels, controlSize } = useTMDataGridContext();
   const [search, setSearch] = useState("");
 
   const columnVisibility = useSelector(
@@ -20,7 +21,12 @@ export function TMDataGridColumnsPanel() {
     (state) => state.columnVisibility,
   );
 
-  const columns = table.getAllLeafColumns();
+  // The tree column is left out rather than listed and disabled: its visibility
+  // is not a setting at all, it follows the grouping state, so an unchecked box
+  // that cannot be ticked would only invite the question.
+  const columns = table
+    .getAllLeafColumns()
+    .filter((column) => column.id !== GROUP_COLUMN_ID);
   const needle = search.trim().toLowerCase();
   const visibleInPanel = needle
     ? columns.filter((column) =>
@@ -39,7 +45,7 @@ export function TMDataGridColumnsPanel() {
         <TextInput
           value={search}
           onChange={(event) => setSearch(event.currentTarget.value)}
-          placeholder="Search"
+          placeholder={labels.columnsSearchPlaceholder}
           leftSection={<SearchIcon size={16} stroke={1.6} />}
           size={controlSize}
           data-autofocus
@@ -62,7 +68,7 @@ export function TMDataGridColumnsPanel() {
           ))}
           {visibleInPanel.length === 0 && (
             <Text size={controlSize} c="dimmed">
-              No columns match “{search}”
+              {labels.columnsNoMatch(search)}
             </Text>
           )}
         </div>
@@ -71,7 +77,7 @@ export function TMDataGridColumnsPanel() {
       <div className={classes.columnsPanelFooter}>
         <Checkbox
           size={controlSize}
-          label="Show/Hide All"
+          label={labels.columnsShowHideAll}
           checked={shownCount === hideableColumns.length}
           indeterminate={shownCount > 0 && shownCount < hideableColumns.length}
           onChange={(event) =>
@@ -83,7 +89,7 @@ export function TMDataGridColumnsPanel() {
           size="compact-sm"
           onClick={() => table.resetColumnVisibility()}
         >
-          RESET
+          {labels.columnsReset}
         </Button>
       </div>
     </div>

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

@@ -0,0 +1,33 @@
+/* The details lane is a fixed track holding one control, so the button fills it
+   and the whole cell is the hit target. */
+.detailsToggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: inherit;
+}
+
+.detailsToggle:hover .chevron {
+  color: var(--mantine-color-text);
+}
+
+.chevron {
+  display: flex;
+  align-items: center;
+  color: var(--mantine-color-dimmed);
+  transition: transform 120ms ease;
+}
+
+.chevron[data-expanded="true"] {
+  transform: rotate(90deg);
+}
+
+/* One icon rotated rather than two swapped: the turn is what reads as the
+   expand, and a swap would jump. */
+@media (prefers-reduced-motion: reduce) {
+  .chevron {
+    transition: none;
+  }
+}