@jielga/tmdatagrid 0.3.0 → 0.5.0

package/dist/styles.css

@@ -1,2 +1,2 @@
-._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}
+._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.3.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.3.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.3.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

@@ -10,7 +10,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.3.0'
+  library_version: '0.5.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/getting-started.md'
   - 'Jielga/TMDataGrid:src/docs/components.md'

package/skills/options/SKILL.md

@@ -13,7 +13,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.3.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.3.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

@@ -60,6 +60,16 @@
      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;
   min-height: 0;

package/src/tmdatagrid/components/TMDataGrid.tsx

@@ -6,10 +6,12 @@ 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,
@@ -60,6 +62,10 @@ function TMDataGridRoot<TData extends RowData>({
   table,
   ui,
   features,
+  labels,
+  renderDetails,
+  renderDetailsEstHeight,
+  overscan,
   size = DEFAULT_TMDATAGRID_SIZE,
   children,
   className,
@@ -72,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 (
@@ -96,6 +116,8 @@ export const TMDataGrid = Object.assign(TMDataGridRoot, {
   Toolbar: TMDataGridToolbar,
   Spacer: TMDataGridToolbarSpacer,
   SummaryCount: TMDataGridSummaryCount,
+  LoadingIndicator: TMDataGridLoadingIndicator,
+  Search: TMDataGridSearch,
   ColumnsButton: TMDataGridColumnsButton,
   FilterButton: TMDataGridFilterButton,
   Table: TMDataGridTable,

package/src/tmdatagrid/components/TMDataGridColumnsPanel.tsx

@@ -13,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(
@@ -45,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
@@ -68,7 +68,7 @@ export function TMDataGridColumnsPanel() {
           ))}
           {visibleInPanel.length === 0 && (
             <Text size={controlSize} c="dimmed">
-              No columns match “{search}”
+              {labels.columnsNoMatch(search)}
             </Text>
           )}
         </div>
@@ -77,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) =>
@@ -89,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;
+  }
+}

package/src/tmdatagrid/components/TMDataGridDetailsColumn.tsx

@@ -0,0 +1,160 @@
+import { UnstyledButton } from "@mantine/core";
+import {
+  useCellControlTabIndex,
+  useTMDataGridContext,
+} from "../TMDataGridContext";
+import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
+import { useSelector } from "@tanstack/react-store";
+import classes from "./TMDataGridDetailsColumn.module.css";
+import { ChevronRightIcon } from "./icons";
+import { areAllRowsExpanded, resolveExpandAll } from "../core/expanding";
+import type { TMDataGridFeatures, TMDataGridTable } from "../useTMDataGrid";
+
+export const DETAILS_COLUMN_ID = "__details__";
+
+/**
+ * The chevron that opens a row's detail panel.
+ *
+ * Expansion is read through a subscription rather than from
+ * `row.getIsExpanded()` in the component body: the `row` identity survives an
+ * expand, so the React Compiler would cache the call along with it and the
+ * chevron would never turn. Same reason the select checkbox subscribes.
+ */
+function DetailsCell<TData extends RowData>({
+  row,
+}: {
+  row: Row<TMDataGridFeatures, TData>;
+}) {
+  const { labels } = useTMDataGridContext();
+  const expanded = useSelector(row.table.store, () => row.getIsExpanded());
+  // See useCellControlTabIndex: a body control is reached by stepping into its
+  // cell, not by Tab, or the grid would have one tab stop per mounted row.
+  const tabIndex = useCellControlTabIndex();
+
+  // Group rows open into their children, not into a panel — see the body's
+  // `showsDetails`. Their cells are aggregated, so this lane is already blank
+  // on them; the guard is what makes that a decision rather than a side effect.
+  if (row.getIsGrouped()) return null;
+
+  return (
+    <UnstyledButton
+      className={classes.detailsToggle}
+      tabIndex={tabIndex}
+      aria-expanded={expanded}
+      aria-label={expanded ? labels.hideDetails : labels.showDetails}
+      // The row underneath may select or highlight on click; opening a panel is
+      // its own gesture and must not also trigger those.
+      onClick={(event) => {
+        event.stopPropagation();
+        row.toggleExpanded();
+      }}
+    >
+      <span className={classes.chevron} data-expanded={expanded}>
+        <ChevronRightIcon size={16} stroke={1.6} />
+      </span>
+    </UnstyledButton>
+  );
+}
+
+/**
+ * Expand-all / collapse-all for the lane, the way the checkbox column's header
+ * selects and clears every row.
+ *
+ * Deliberately not `table.toggleAllRowsExpanded()`: that writes the `expanded`
+ * state's whole-table form, and one state holds both the tree and the panels —
+ * so it would unfold every group as well. Only the data rows are touched here;
+ * whatever the tree was showing, it goes on showing. See resolveExpandAll.
+ */
+function DetailsHeader<TData extends RowData>({
+  table,
+}: {
+  table: TMDataGridTable<TData>;
+}) {
+  const { labels } = useTMDataGridContext();
+  // Pre-paginated: expand-all means every row the filters left, not the page
+  // that happens to be on screen. Same model `getCanSomeRowsExpand` reads.
+  const detailRows = () => table.getPrePaginatedRowModel().flatRows;
+
+  const allExpanded = useSelector(table.store, (state) =>
+    areAllRowsExpanded({
+      rows: detailRows(),
+      expanded: state.expanded,
+      target: "details",
+    }),
+  );
+
+  return (
+    <UnstyledButton
+      className={classes.detailsToggle}
+      aria-expanded={allExpanded}
+      aria-label={
+        allExpanded ? labels.collapseAllDetails : labels.expandAllDetails
+      }
+      // Partly expanded opens the rest rather than closing what is already
+      // open — the same reading as an indeterminate select-all box.
+      onClick={() =>
+        table.setExpanded(
+          resolveExpandAll({
+            rows: detailRows(),
+            expanded: table.store.state.expanded,
+            target: "details",
+            expand: !allExpanded,
+          }),
+        )
+      }
+    >
+      <span className={classes.chevron} data-expanded={allExpanded}>
+        <ChevronRightIcon size={16} stroke={1.6} />
+      </span>
+    </UnstyledButton>
+  );
+}
+
+/**
+ * The generated details lane, prepended whenever `renderDetails` is set.
+ *
+ * Structural, like the checkbox and tree columns: fixed width, pinned to the
+ * left after both of them, not hideable, not movable and not resizable. A
+ * toggle that wandered off to the right of the grid — or hid itself — would
+ * leave rows with panels no one can open.
+ *
+ * Last of the three because it acts on one record: the checkbox picks rows out
+ * and the tree says which group they are in, and only then is there a row to
+ * open.
+ *
+ * Nothing stops a second toggle elsewhere: `row.toggleExpanded()` is the whole
+ * interface, and this lane is only the one the grid ships.
+ */
+export function createDetailsColumn<TData extends RowData>(
+  label = "Details",
+): ColumnDef<TMDataGridFeatures, TData, unknown> {
+  return {
+    id: DETAILS_COLUMN_ID,
+    meta: {
+      label,
+      align: "center",
+      // Structurally the last of the generated lanes.
+      enableOrdering: false,
+    },
+    // A system lane: as wide as the control it holds and no wider. Fixed at
+    // every scale — the control does not grow with the font size, so neither
+    // should its track.
+    size: 36,
+    minSize: 36,
+    maxSize: 36,
+    enableResizing: false,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableGlobalFilter: false,
+    // Its visibility is not the user's to set: hiding it would strand every
+    // panel behind a control that is no longer there.
+    enableHiding: false,
+    // Structurally pinned to the left; users shouldn't be able to move it.
+    enablePinning: false,
+    header: ({ table }) => <DetailsHeader table={table} />,
+    cell: ({ row }) => <DetailsCell row={row} />,
+    // Deliberately no `aggregatedCell`: on a group row every cell outside the
+    // grouped column counts as aggregated, and blank is the right answer here —
+    // groups expand into their rows, not into a panel.
+  };
+}