@jielga/tmdatagrid 2.0.0-beta.7 → 2.0.0-beta.8

package/dist/styles.css

@@ -1,2 +1,2 @@
-._root_1wvkg_8[data-size=xs]{--dg-row-height:34px;--dg-header-height:32px;--dg-font-size:var(--mantine-font-size-xs);--dg-padding:6px}._root_1wvkg_8[data-size=sm]{--dg-row-height:42px;--dg-header-height:38px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:8px}._root_1wvkg_8[data-size=md]{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px}._root_1wvkg_8[data-size=lg]{--dg-row-height:62px;--dg-header-height:52px;--dg-font-size:var(--mantine-font-size-md);--dg-padding:14px}._root_1wvkg_8[data-size=xl]{--dg-row-height:72px;--dg-header-height:60px;--dg-font-size:var(--mantine-font-size-lg);--dg-padding:18px}._root_1wvkg_8{--dg-radius:var(--mantine-radius-md);--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-row-striped-bg:color-mix(in srgb, var(--mantine-color-text) 3.5%, var(--mantine-color-body));--dg-row-new-bg:color-mix(in srgb, var(--mantine-color-green-6) 8%, var(--mantine-color-body));--dg-z-pinned-cell:2;--dg-z-focused-cell:3;--dg-z-pinned-row:4;--dg-z-pinned-row-pinned-cell:5;--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(--dg-radius);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}}._tableWrapper_uqiy9_2{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}._scrollContainer_uqiy9_10{flex:1;min-height:0;position:relative;overflow:auto;container-type:inline-size}._grid_uqiy9_21{display:grid}._headerRow_uqiy9_27{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-header,6);display:grid;position:sticky;top:0}._headerRow_uqiy9_27[data-dg-header-last]:after{content:"";pointer-events:none;background:linear-gradient(to bottom, var(--dg-header-shadow-color,#00000024), transparent);opacity:0;height:6px;position:absolute;inset:100% 0 auto}@supports (animation-timeline:scroll()){._headerRow_uqiy9_27[data-dg-header-last]:after{animation:linear both _dg-header-shadow_uqiy9_1;animation-timeline:scroll();animation-range:0 24px}}@keyframes _dg-header-shadow_uqiy9_1{0%{opacity:0}to{opacity:1}}._bodyRow_uqiy9_76{--row-bg:var(--mantine-color-body);grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;display:grid}._bodyRow_uqiy9_76[data-striped=true]{--row-bg:var(--dg-row-striped-bg)}._bodyRow_uqiy9_76:hover{--row-bg:var(--mantine-color-default-hover)}._bodyRow_uqiy9_76[data-grouped=true]{--row-bg:var(--dg-row-group-bg)}._bodyRow_uqiy9_76[data-context-menu=true]{--row-bg:var(--mantine-color-default-hover)}._bodyRow_uqiy9_76[data-selected-bg=true]{--row-bg:var(--dg-row-selected-bg)}._bodyRow_uqiy9_76[data-highlighted=true]{--row-bg:var(--dg-row-highlight-bg)}._bodyRow_uqiy9_76[data-selects-on-click=true]{-webkit-user-select:none;user-select:none}._bodyRow_uqiy9_76:focus-visible{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._bodyCell_uqiy9_143{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_uqiy9_143[data-control-column=true]{padding:0}._grid_uqiy9_21[data-range-dragging]{-webkit-user-select:none;user-select:none}._bodyCell_uqiy9_143[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_uqiy9_143[data-edge-top=true]{--dg-edge-top:var(--mantine-primary-color-filled)}._bodyCell_uqiy9_143[data-edge-bottom=true]{--dg-edge-bottom:var(--mantine-primary-color-filled)}._bodyCell_uqiy9_143[data-edge-left=true]{--dg-edge-left:var(--mantine-primary-color-filled)}._bodyCell_uqiy9_143[data-edge-right=true]{--dg-edge-right:var(--mantine-primary-color-filled)}._bodyCell_uqiy9_143[data-focused=true]{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._cellContent_uqiy9_141{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._bodyCell_uqiy9_143[data-editing]{padding:0 calc(var(--dg-padding) / 2)}._cellEditor_uqiy9_243{align-items:center;gap:2px;width:100%;min-width:0;display:flex}._cellEditorActions_uqiy9_252{flex:none;align-items:center;display:flex}._bodyCell_uqiy9_143[data-dirty],._bodyCell_uqiy9_143[data-invalid]{position:relative}._bodyCell_uqiy9_143[data-dirty]:after,._bodyCell_uqiy9_143[data-invalid]:after{content:"";border:5px solid #0000;border-top-color:var(--mantine-primary-color-filled);border-right-color:var(--mantine-primary-color-filled);position:absolute;top:0;right:0}._bodyCell_uqiy9_143[data-invalid]:after{border-top-color:var(--mantine-color-error);border-right-color:var(--mantine-color-error)}._bodyCell_uqiy9_143[data-align=right]{justify-content:flex-end}._bodyCell_uqiy9_143[data-align=center]{justify-content:center}._bodyCell_uqiy9_143[data-align=left] ._cellContent_uqiy9_141{flex:auto}._detailsCell_uqiy9_303{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_uqiy9_15{justify-content:center;justify-self:start;align-items:center;gap:var(--mantine-spacing-xs);width:100cqi;padding:var(--mantine-spacing-xl);flex-direction:column;grid-column:1/-1;display:flex;position:sticky;left:0}._bodyRow_uqiy9_76[data-deleted=true]{opacity:.55;text-decoration:line-through}._bodyRow_uqiy9_76[data-deleted=true] ._bodyCell_uqiy9_143:not([data-control-column=true]){pointer-events:none}._entryBlock_uqiy9_353{grid-column:1/-1;grid-template-columns:subgrid;top:var(--dg-header-height,0px);z-index:var(--dg-z-pinned-row,4);display:grid;position:sticky}._entryRow_uqiy9_362,._entryFlowBlock_uqiy9_371{grid-column:1/-1;grid-template-columns:subgrid;display:grid}._pinnedTopBlock_uqiy9_384{grid-column:1/-1;grid-template-columns:subgrid;top:calc(var(--dg-header-height,0px) + var(--dg-entry-height,0px));z-index:var(--dg-z-pinned-row,4);display:grid;position:sticky}._pinnedTopBlock_uqiy9_384>:last-child>[role=cell]{border-bottom:2px solid var(--mantine-color-default-border)}._pinnedBottomBlock_uqiy9_397{grid-column:1/-1;grid-template-columns:subgrid;bottom:var(--dg-summary-height,0px);z-index:var(--dg-z-pinned-row,4);display:grid;position:sticky}._pinnedBottomBlock_uqiy9_397>:first-child>[role=cell]{border-top:2px solid var(--mantine-color-default-border)}._entryCell_uqiy9_410{padding:0 calc(var(--dg-padding) / 2);border-bottom:2px solid var(--mantine-primary-color-filled);background-color:var(--mantine-color-body);font-size:var(--dg-font-size);align-items:center;display:flex}._entryCell_uqiy9_410[data-control-column=true]{justify-content:center;padding:0}._entryRow_uqiy9_362[data-confirmed=true] ._entryCell_uqiy9_410{padding:0 var(--dg-padding);border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--dg-row-new-bg,var(--mantine-color-body))}._entryRow_uqiy9_362[data-confirmed=true] ._entryCell_uqiy9_410[data-control-column=true]{padding:0}._rowStateIndicator_uqiy9_440{width:22px;height:22px;color:var(--mantine-color-dimmed);flex:none;justify-content:center;align-items:center;display:inline-flex}._rowStateIndicator_uqiy9_440[data-error]{color:var(--mantine-color-error)}._entryCell_uqiy9_410[data-align=right]{justify-content:flex-end}._entryCell_uqiy9_410[data-align=center]{justify-content:center}._matchHighlight_uqiy9_466{background-color:var(--dg-match-highlight-bg,var(--lightningcss-light,var(--mantine-color-yellow-2))var(--lightningcss-dark,#fab00559));color:inherit;border-radius:2px}._summaryRow_uqiy9_478{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-summary-row,4);display:grid;position:sticky;bottom:0}._summaryCell_uqiy9_487{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_uqiy9_487[data-control-column=true]{padding:0}._summaryCell_uqiy9_487[data-align=right]{justify-content:flex-end}._summaryCell_uqiy9_487[data-align=center]{justify-content:center}._groupToggle_1954o_4{width:100%;min-width:0;font-size:var(--dg-font-size);color:inherit;align-items:center;gap:6px;display:flex}._chevron_1954o_14{color:var(--mantine-color-dimmed);flex:none;align-items:center;transition:transform .12s;display:flex}._chevron_1954o_14[data-expanded=true]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){._chevron_1954o_14{transition:none}}._groupLabel_1954o_34{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-weight:600;overflow:hidden}._groupCount_1954o_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_14wl0_3{align-items:center;gap:var(--mantine-spacing-xs);flex-wrap:wrap;display:flex}._filterPills_14wl0_3 ._pill_14wl0_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_14wl0_27{font:inherit;color:inherit;cursor:pointer}._pillLabel_14wl0_27:hover{text-decoration:underline}._footer_te0a3_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_te0a3_1[data-paging-suspended=true]{opacity:.55}._stickyLeft_1vw51_16:after,._stickyRight_1vw51_17:after{content:"";pointer-events:none;width:8px;position:absolute;top:0;bottom:0}._stickyLeft_1vw51_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_1vw51_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_1vw51_16:after,._stickyRight_1vw51_17:after{--dg-sticky-edge-range:20px;opacity:0;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(inline)}._stickyLeft_1vw51_16:after{animation-name:_stickyEdgeIn_1vw51_1;animation-range:0 var(--dg-sticky-edge-range)}._stickyRight_1vw51_17:after{animation-name:_stickyEdgeOut_1vw51_1;animation-range:calc(100% - var(--dg-sticky-edge-range)) 100%}}@keyframes _stickyEdgeIn_1vw51_1{0%{opacity:0}to{opacity:1}}@keyframes _stickyEdgeOut_1vw51_1{0%{opacity:1}to{opacity:0}}._headerCell_188ed_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_188ed_1[data-align=right]{justify-content:flex-end}._headerCell_188ed_1[data-align=center]{justify-content:center}._headerCell_188ed_1[data-control-column=true]{padding:0}._headerCellFiltered_188ed_35 ._headerTitle_188ed_35{color:var(--mantine-primary-color-filled)}._headerTitle_188ed_35{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._headerCell_188ed_1[data-align=right] ._headerTitle_188ed_35{text-align:right}._headerCell_188ed_1[data-align=center] ._headerTitle_188ed_35{justify-content:center;display:flex}._headerActions_188ed_58{flex-shrink:0;align-items:center;gap:0;margin-left:auto;display:flex}._headerCell_188ed_1[data-align=right] ._headerActions_188ed_58{order:-1;margin-left:0;margin-right:auto}._headerAction_188ed_58{display:none}._headerCell_188ed_1:hover ._headerAction_188ed_58,._headerCell_188ed_1:focus-within ._headerAction_188ed_58,._headerAction_188ed_58[data-pinned-visible=true]{display:flex}._headerCellSortable_188ed_87{cursor:pointer}._sortAction_188ed_93[data-sorted=false]{opacity:.55}._sortAction_188ed_93[data-sorted=false]:hover{opacity:1}._sortIndex_188ed_103{color:var(--mantine-color-dimmed);text-align:center;min-width:10px;font-size:10px;font-weight:600;line-height:1}._headerCellDragging_188ed_115{opacity:.4}._headerCellDropBefore_188ed_119:before,._headerCellDropAfter_188ed_120:before{content:"";background-color:var(--mantine-primary-color-filled);z-index:5;pointer-events:none;width:2px;position:absolute;top:0;bottom:0}._headerCellDropBefore_188ed_119:before{left:0}._headerCellDropAfter_188ed_120:before{right:0}._columnSeparator_188ed_140{z-index:1;justify-content:center;width:10px;height:50%;display:flex;position:absolute;top:25%;right:0;transform:translate(50%)}._columnSeparatorResizable_188ed_152{cursor:col-resize;touch-action:none}._columnSeparator_188ed_140:after{content:"";background-color:#0000;width:1px;height:100%;transition:background-color .12s,width .12s}._headerCell_188ed_1:hover ._columnSeparator_188ed_140:after,._headerCell_188ed_1:focus-within ._columnSeparator_188ed_140:after{background-color:var(--mantine-color-default-border)}._columnSeparatorResizable_188ed_152:hover:after,._columnSeparatorActive_188ed_175:after{background-color:var(--mantine-primary-color-filled);width:2px}._menuItemActive_188ed_181{background-color:var(--mantine-color-default-hover);font-weight:600}._toolbar_1459c_1{align-items:center;gap:var(--mantine-spacing-xs);padding:6px var(--mantine-spacing-xs);flex-shrink:0;min-height:42px;display:flex}._toolbarSpacer_1459c_10{flex:1}._summaryCount_1459c_14{white-space:nowrap}
+._root_1wvkg_8[data-size=xs]{--dg-row-height:34px;--dg-header-height:32px;--dg-font-size:var(--mantine-font-size-xs);--dg-padding:6px}._root_1wvkg_8[data-size=sm]{--dg-row-height:42px;--dg-header-height:38px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:8px}._root_1wvkg_8[data-size=md]{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px}._root_1wvkg_8[data-size=lg]{--dg-row-height:62px;--dg-header-height:52px;--dg-font-size:var(--mantine-font-size-md);--dg-padding:14px}._root_1wvkg_8[data-size=xl]{--dg-row-height:72px;--dg-header-height:60px;--dg-font-size:var(--mantine-font-size-lg);--dg-padding:18px}._root_1wvkg_8{--dg-radius:var(--mantine-radius-md);--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-row-striped-bg:color-mix(in srgb, var(--mantine-color-text) 3.5%, var(--mantine-color-body));--dg-row-new-bg:color-mix(in srgb, var(--mantine-color-green-6) 8%, var(--mantine-color-body));--dg-z-pinned-cell:2;--dg-z-focused-cell:3;--dg-z-pinned-row:4;--dg-z-pinned-row-pinned-cell:5;--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(--dg-radius);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}}._tableWrapper_1npmp_2{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}._scrollContainer_1npmp_10{flex:1;min-height:0;position:relative;overflow:auto;container-type:inline-size}._grid_1npmp_21{display:grid}._headerRow_1npmp_27{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-header,6);display:grid;position:sticky;top:0}._headerRow_1npmp_27[data-dg-header-last]:after{content:"";pointer-events:none;background:linear-gradient(to bottom, var(--dg-header-shadow-color,#00000024), transparent);opacity:0;height:6px;position:absolute;inset:100% 0 auto}@supports (animation-timeline:scroll()){._headerRow_1npmp_27[data-dg-header-last]:after{animation:linear both _dg-header-shadow_1npmp_1;animation-timeline:scroll();animation-range:0 24px}}@keyframes _dg-header-shadow_1npmp_1{0%{opacity:0}to{opacity:1}}._bodyRow_1npmp_76{--row-bg:var(--mantine-color-body);grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;display:grid}._bodyRow_1npmp_76[data-striped=true]{--row-bg:var(--dg-row-striped-bg)}._bodyRow_1npmp_76:hover{--row-bg:var(--mantine-color-default-hover)}._bodyRow_1npmp_76[data-grouped=true]{--row-bg:var(--dg-row-group-bg)}._bodyRow_1npmp_76[data-context-menu=true]{--row-bg:var(--mantine-color-default-hover)}._bodyRow_1npmp_76[data-selected-bg=true]{--row-bg:var(--dg-row-selected-bg)}._bodyRow_1npmp_76[data-highlighted=true]{--row-bg:var(--dg-row-highlight-bg)}._bodyRow_1npmp_76[data-selects-on-click=true]{-webkit-user-select:none;user-select:none}._bodyRow_1npmp_76:focus-visible{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._bodyCell_1npmp_143{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_1npmp_143[data-control-column=true]{padding:0}._grid_1npmp_21[data-range-dragging]{-webkit-user-select:none;user-select:none}._bodyCell_1npmp_143[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_1npmp_143[data-edge-top=true]{--dg-edge-top:var(--mantine-primary-color-filled)}._bodyCell_1npmp_143[data-edge-bottom=true]{--dg-edge-bottom:var(--mantine-primary-color-filled)}._bodyCell_1npmp_143[data-edge-left=true]{--dg-edge-left:var(--mantine-primary-color-filled)}._bodyCell_1npmp_143[data-edge-right=true]{--dg-edge-right:var(--mantine-primary-color-filled)}._bodyCell_1npmp_143[data-focused=true]{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._cellContent_1npmp_141{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._bodyCell_1npmp_143[data-editing]{padding:0 calc(var(--dg-padding) / 2)}._cellEditor_1npmp_243{align-items:center;gap:2px;width:100%;min-width:0;display:flex}._cellEditorActions_1npmp_252{flex:none;align-items:center;display:flex}._bodyCell_1npmp_143[data-dirty],._bodyCell_1npmp_143[data-invalid]{position:relative}._bodyCell_1npmp_143[data-dirty]:after,._bodyCell_1npmp_143[data-invalid]:after{content:"";border:5px solid #0000;border-top-color:var(--mantine-primary-color-filled);border-right-color:var(--mantine-primary-color-filled);position:absolute;top:0;right:0}._bodyCell_1npmp_143[data-invalid]:after{border-top-color:var(--mantine-color-error);border-right-color:var(--mantine-color-error)}._bodyCell_1npmp_143[data-align=right]{justify-content:flex-end}._bodyCell_1npmp_143[data-align=center]{justify-content:center}._bodyCell_1npmp_143[data-align=left] ._cellContent_1npmp_141{flex:auto}._detailsCell_1npmp_303{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_1npmp_15{justify-content:center;justify-self:start;align-items:center;gap:var(--mantine-spacing-xs);width:100cqi;padding:var(--mantine-spacing-xl);flex-direction:column;grid-column:1/-1;display:flex;position:sticky;left:0}._bodyRow_1npmp_76[data-deleted=true]{opacity:.55;text-decoration:line-through}._bodyRow_1npmp_76[data-deleted=true] ._bodyCell_1npmp_143:not([data-control-column=true]){pointer-events:none}._entryBlock_1npmp_353{grid-column:1/-1;grid-template-columns:subgrid;top:var(--dg-header-height,0px);z-index:var(--dg-z-pinned-row,4);display:grid;position:sticky}._entryRow_1npmp_362,._entryFlowBlock_1npmp_371{grid-column:1/-1;grid-template-columns:subgrid;display:grid}._pinnedTopBlock_1npmp_384{grid-column:1/-1;grid-template-columns:subgrid;top:calc(var(--dg-header-height,0px) + var(--dg-entry-height,0px));z-index:var(--dg-z-pinned-row,4);display:grid;position:sticky}._pinnedTopBlock_1npmp_384>:last-child>[role=cell]{border-bottom:2px solid var(--mantine-color-default-border)}._pinnedBottomBlock_1npmp_397{grid-column:1/-1;grid-template-columns:subgrid;bottom:var(--dg-summary-height,0px);z-index:var(--dg-z-pinned-row,4);display:grid;position:sticky}._pinnedBottomBlock_1npmp_397>:first-child>[role=cell]{border-top:2px solid var(--mantine-color-default-border)}._entryCell_1npmp_410{padding:0 calc(var(--dg-padding) / 2);border-bottom:2px solid var(--mantine-primary-color-filled);background-color:var(--mantine-color-body);font-size:var(--dg-font-size);align-items:center;display:flex}._entryCell_1npmp_410[data-control-column=true]{justify-content:center;padding:0}._entryRow_1npmp_362[data-committed=true] ._entryCell_1npmp_410{padding:0 var(--dg-padding);border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--dg-row-new-bg,var(--mantine-color-body))}._entryRow_1npmp_362[data-committed=true] ._entryCell_1npmp_410[data-control-column=true]{padding:0}._rowStateIndicator_1npmp_440{width:22px;height:22px;color:var(--mantine-color-dimmed);flex:none;justify-content:center;align-items:center;display:inline-flex}._rowStateIndicator_1npmp_440[data-error]{color:var(--mantine-color-error)}._entryCell_1npmp_410[data-align=right]{justify-content:flex-end}._entryCell_1npmp_410[data-align=center]{justify-content:center}._matchHighlight_1npmp_466{background-color:var(--dg-match-highlight-bg,var(--lightningcss-light,var(--mantine-color-yellow-2))var(--lightningcss-dark,#fab00559));color:inherit;border-radius:2px}._summaryRow_1npmp_478{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-summary-row,4);display:grid;position:sticky;bottom:0}._summaryCell_1npmp_487{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_1npmp_487[data-control-column=true]{padding:0}._summaryCell_1npmp_487[data-align=right]{justify-content:flex-end}._summaryCell_1npmp_487[data-align=center]{justify-content:center}._groupToggle_1954o_4{width:100%;min-width:0;font-size:var(--dg-font-size);color:inherit;align-items:center;gap:6px;display:flex}._chevron_1954o_14{color:var(--mantine-color-dimmed);flex:none;align-items:center;transition:transform .12s;display:flex}._chevron_1954o_14[data-expanded=true]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){._chevron_1954o_14{transition:none}}._groupLabel_1954o_34{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-weight:600;overflow:hidden}._groupCount_1954o_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_14wl0_3{align-items:center;gap:var(--mantine-spacing-xs);flex-wrap:wrap;display:flex}._filterPills_14wl0_3 ._pill_14wl0_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_14wl0_27{font:inherit;color:inherit;cursor:pointer}._pillLabel_14wl0_27:hover{text-decoration:underline}._footer_te0a3_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_te0a3_1[data-paging-suspended=true]{opacity:.55}._stickyLeft_1vw51_16:after,._stickyRight_1vw51_17:after{content:"";pointer-events:none;width:8px;position:absolute;top:0;bottom:0}._stickyLeft_1vw51_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_1vw51_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_1vw51_16:after,._stickyRight_1vw51_17:after{--dg-sticky-edge-range:20px;opacity:0;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(inline)}._stickyLeft_1vw51_16:after{animation-name:_stickyEdgeIn_1vw51_1;animation-range:0 var(--dg-sticky-edge-range)}._stickyRight_1vw51_17:after{animation-name:_stickyEdgeOut_1vw51_1;animation-range:calc(100% - var(--dg-sticky-edge-range)) 100%}}@keyframes _stickyEdgeIn_1vw51_1{0%{opacity:0}to{opacity:1}}@keyframes _stickyEdgeOut_1vw51_1{0%{opacity:1}to{opacity:0}}._headerCell_188ed_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_188ed_1[data-align=right]{justify-content:flex-end}._headerCell_188ed_1[data-align=center]{justify-content:center}._headerCell_188ed_1[data-control-column=true]{padding:0}._headerCellFiltered_188ed_35 ._headerTitle_188ed_35{color:var(--mantine-primary-color-filled)}._headerTitle_188ed_35{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._headerCell_188ed_1[data-align=right] ._headerTitle_188ed_35{text-align:right}._headerCell_188ed_1[data-align=center] ._headerTitle_188ed_35{justify-content:center;display:flex}._headerActions_188ed_58{flex-shrink:0;align-items:center;gap:0;margin-left:auto;display:flex}._headerCell_188ed_1[data-align=right] ._headerActions_188ed_58{order:-1;margin-left:0;margin-right:auto}._headerAction_188ed_58{display:none}._headerCell_188ed_1:hover ._headerAction_188ed_58,._headerCell_188ed_1:focus-within ._headerAction_188ed_58,._headerAction_188ed_58[data-pinned-visible=true]{display:flex}._headerCellSortable_188ed_87{cursor:pointer}._sortAction_188ed_93[data-sorted=false]{opacity:.55}._sortAction_188ed_93[data-sorted=false]:hover{opacity:1}._sortIndex_188ed_103{color:var(--mantine-color-dimmed);text-align:center;min-width:10px;font-size:10px;font-weight:600;line-height:1}._headerCellDragging_188ed_115{opacity:.4}._headerCellDropBefore_188ed_119:before,._headerCellDropAfter_188ed_120:before{content:"";background-color:var(--mantine-primary-color-filled);z-index:5;pointer-events:none;width:2px;position:absolute;top:0;bottom:0}._headerCellDropBefore_188ed_119:before{left:0}._headerCellDropAfter_188ed_120:before{right:0}._columnSeparator_188ed_140{z-index:1;justify-content:center;width:10px;height:50%;display:flex;position:absolute;top:25%;right:0;transform:translate(50%)}._columnSeparatorResizable_188ed_152{cursor:col-resize;touch-action:none}._columnSeparator_188ed_140:after{content:"";background-color:#0000;width:1px;height:100%;transition:background-color .12s,width .12s}._headerCell_188ed_1:hover ._columnSeparator_188ed_140:after,._headerCell_188ed_1:focus-within ._columnSeparator_188ed_140:after{background-color:var(--mantine-color-default-border)}._columnSeparatorResizable_188ed_152:hover:after,._columnSeparatorActive_188ed_175:after{background-color:var(--mantine-primary-color-filled);width:2px}._menuItemActive_188ed_181{background-color:var(--mantine-color-default-hover);font-weight:600}._toolbar_1459c_1{align-items:center;gap:var(--mantine-spacing-xs);padding:6px var(--mantine-spacing-xs);flex-shrink:0;min-height:42px;display:flex}._toolbarSpacer_1459c_10{flex:1}._summaryCount_1459c_14{white-space:nowrap}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jielga/tmdatagrid",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.8",
   "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",
@@ -61,6 +61,7 @@
     "build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.lib.json && rolldown -c rolldown.dts.config.mjs",
     "lint": "oxlint",
     "check:style": "node scripts/check-house-style.mjs",
+    "check:skills": "node scripts/intent.mjs validate",
     "test": "vitest run",
     "test:watch": "vitest",
     "preview": "vite preview",

package/skills/appearance/SKILL.md

@@ -16,7 +16,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.7'
+  library_version: '2.0.0-beta.8'
 sources:
   - 'Jielga/TMDataGrid:src/docs/styling.md'
   - 'Jielga/TMDataGrid:src/docs/toolbar.md'

package/skills/cell-selection/SKILL.md

@@ -14,7 +14,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.7'
+  library_version: '2.0.0-beta.8'
 sources:
   - 'Jielga/TMDataGrid:src/docs/cell-selection.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/core/cellNavigation.ts'

package/skills/columns/SKILL.md

@@ -16,7 +16,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.7'
+  library_version: '2.0.0-beta.8'
 sources:
   - 'Jielga/TMDataGrid:src/docs/columns.md'
   - 'Jielga/TMDataGrid:src/docs/column-layout.md'

package/skills/data/SKILL.md

@@ -15,7 +15,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.7'
+  library_version: '2.0.0-beta.8'
 sources:
   - 'Jielga/TMDataGrid:src/docs/pagination.md'
   - 'Jielga/TMDataGrid:src/docs/scrolling.md'

package/skills/editing/SKILL.md

@@ -18,7 +18,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.7'
+  library_version: '2.0.0-beta.8'
 sources:
   - 'Jielga/TMDataGrid:src/docs/editing.md'
   - 'Jielga/TMDataGrid:src/docs/query-builder.md'

package/skills/filtering/SKILL.md

@@ -15,7 +15,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.7'
+  library_version: '2.0.0-beta.8'
 sources:
   - 'Jielga/TMDataGrid:src/docs/filtering.md'
   - 'Jielga/TMDataGrid:src/docs/quick-search.md'

package/skills/getting-started/SKILL.md

@@ -11,7 +11,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.7'
+  library_version: '2.0.0-beta.8'
 sources:
   - 'Jielga/TMDataGrid:src/docs/getting-started.md'
   - 'Jielga/TMDataGrid:src/docs/anatomy.md'

package/skills/grouping/SKILL.md

@@ -14,7 +14,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.7'
+  library_version: '2.0.0-beta.8'
 sources:
   - 'Jielga/TMDataGrid:src/docs/grouping.md'
   - 'Jielga/TMDataGrid:src/docs/summary-row.md'

package/skills/options/SKILL.md

@@ -14,7 +14,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.7'
+  library_version: '2.0.0-beta.8'
 sources:
   - 'Jielga/TMDataGrid:src/docs/use-tm-data-grid.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/useTMDataGrid.tsx'

package/skills/rows/SKILL.md

@@ -17,7 +17,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.7'
+  library_version: '2.0.0-beta.8'
 sources:
   - 'Jielga/TMDataGrid:src/docs/row-selection.md'
   - 'Jielga/TMDataGrid:src/docs/row-interaction.md'

package/skills/server-side/SKILL.md

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

package/skills/testing/SKILL.md

@@ -11,7 +11,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.7'
+  library_version: '2.0.0-beta.8'
 sources:
   - 'Jielga/TMDataGrid:src/docs/testing.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/components/TMDataGrid.tsx'

package/src/tmdatagrid/components/TMDataGridEntryRows.tsx

@@ -210,13 +210,14 @@ export function TMDataGridEntryRows({
               data-align={getColumnAlign(column)}
               data-control-column={isControlColumn(column.id)}
               // A committed row re-opens where it is double-clicked, the
-              // same gesture a body cell answers.
+              // same gesture a body cell answers - and, like a body cell, a
+              // cell that takes no edit answers nothing.
               onDoubleClick={
-                committed && !isControlColumn(column.id)
+                committed && editable
                   ? () =>
                       edit.begin({
                         rowId: entryRow.id,
-                        columnId: editable ? column.id : null,
+                        columnId: column.id,
                       })
                   : undefined
               }

package/src/tmdatagrid/components/TMDataGridFooter.tsx

@@ -1,10 +1,10 @@
 import { ActionIcon, Group, Select, Text, Tooltip } from "@mantine/core";
 import type { RowData } from "@tanstack/react-table";
-import { useSelector } from "@tanstack/react-store";
 import { useMemo, type ReactNode } from "react";
 import classes from "./TMDataGridFooter.module.css";
 import { useTMDataGridContext } from "../TMDataGridContext";
 import { getGridCapabilities } from "../core/capabilities";
+import { useSettledTableState } from "../core/useSettledTableState";
 import { isPagingActive } from "../core/rowSelection";
 import { ChevronLeftIcon, ChevronRightIcon } from "./icons";
 import type { TMDataGridTable } from "../useTMDataGrid";
@@ -122,7 +122,7 @@ function PaginationPageSize({
   pageSizeOptions: ReadonlyArray<number>;
 }) {
   const { table, features, labels, controlSize } = useTMDataGridContext();
-  useSelector(table.store);
+  useSettledTableState(table.store);
   const paging = isPagingActive(table, features);
   const { pageSize } = table.store.state.pagination;
   // A page size restored from storage, or set through `initialState`, need not
@@ -163,7 +163,7 @@ function PaginationPageSize({
 
 function PaginationRange() {
   const { table, features, labels, controlSize } = useTMDataGridContext();
-  useSelector(table.store);
+  useSettledTableState(table.store);
   const paging = isPagingActive(table, features);
   const { pageIndex, pageSize } = table.store.state.pagination;
   const total = table.getRowCount();
@@ -184,7 +184,7 @@ function PaginationRange() {
 
 function PaginationPager() {
   const { table, features, labels } = useTMDataGridContext();
-  useSelector(table.store);
+  useSettledTableState(table.store);
   const paging = isPagingActive(table, features);
 
   return (
@@ -250,7 +250,7 @@ export function TMDataGridFooter({
   renderPagination,
 }: TMDataGridFooterProps) {
   const { table, features, labels } = useTMDataGridContext();
-  useSelector(table.store);
+  useSettledTableState(table.store);
 
   // Bound once per option list rather than per render, so the controls keep
   // their identity and the elements they render keep theirs.

package/src/tmdatagrid/components/TMDataGridHeaderCell.tsx

@@ -133,6 +133,9 @@ export function TMDataGridHeaderCell({
     (filter) => filter.id === column.id && isFilterActive(filter.value),
   );
   const isResizing = resizingColumnId === column.id;
+  // Any column, not just this one: a resize elsewhere must not leave a
+  // neighbouring header ready to start a native drag under the pointer.
+  const isAnyResizing = resizingColumnId !== false;
   const pinnedAt = layout.pinnedAt;
 
   // Every affordance below mirrors a TanStack capability check, so switching a
@@ -222,6 +225,43 @@ export function TMDataGridHeaderCell({
     if (container) autosizeColumn({ table, columnId: column.id, container });
   }
 
+  /**
+   * Writes the width this header's columns are rendered with into
+   * `columnSizing`, for the ones that have no width there yet.
+   *
+   * An unresized column is a fluid (`fr`) track: it renders at whatever share
+   * of the grid it is given, while `column.getSize()` keeps reporting the
+   * declared `size`. Anything that switches a column to exact pixels has to
+   * close that gap first, or the column jumps from the width on screen to the
+   * declared one.
+   *
+   * Under a held pointer that jump is more than cosmetic: it slides the
+   * divider out from under the cursor onto the neighbouring header, where the
+   * browser starts a native column-move drag instead. That drag swallows the
+   * `mouseup` the resize listens for, so the resize keeps running after the
+   * button is released.
+   */
+  function freezeRenderedWidths() {
+    const container = cellRef.current?.closest<HTMLElement>(
+      "[data-dg-scroll-container]",
+    );
+    if (!container) return;
+    const sizing = table.store.state.columnSizing;
+    const frozen: Record<string, number> = {};
+    for (const leaf of header.getLeafHeaders()) {
+      const id = leaf.column.id;
+      if (id in sizing) continue;
+      const width = container
+        .querySelector<HTMLElement>(
+          `[role="columnheader"][data-column-id="${CSS.escape(id)}"]`,
+        )
+        ?.getBoundingClientRect().width;
+      if (width) frozen[id] = Math.round(width);
+    }
+    if (Object.keys(frozen).length === 0) return;
+    table.setColumnSizing((previous) => ({ ...previous, ...frozen }));
+  }
+
   /**
    * Pinned columns are positioned with `getStart()` / `getAfter()`, which sum
    * `column.getSize()`. Fluid (`fr`) columns don't report their rendered width
@@ -229,15 +269,7 @@ export function TMDataGridHeaderCell({
    * keeps the column looking the same and keeps the offsets exact.
    */
   function setPinned(position: "left" | "right" | false) {
-    if (position && !(column.id in table.store.state.columnSizing)) {
-      const width = cellRef.current?.getBoundingClientRect().width;
-      if (width) {
-        table.setColumnSizing((prev) => ({
-          ...prev,
-          [column.id]: Math.round(width),
-        }));
-      }
-    }
+    if (position) freezeRenderedWidths();
     column.pin(position);
     // `pin("right")` appends, which would leave the column outside the edit
     // lane. Normalising after the pin rather than writing the lane by hand
@@ -514,10 +546,12 @@ export function TMDataGridHeaderCell({
           : undefined
       }
       className={cellClass}
-      // Dropped while a resize is running, so that dragging the separator
-      // resizes the column instead of starting to move it. The resize handler
-      // records the column on mousedown, before the first pointer move.
-      draggable={canReorder && !isResizing}
+      // Dropped while any column is resizing, so that dragging the separator
+      // resizes the column instead of starting to move it - and so that a
+      // header the divider passes under cannot start a move of its own. The
+      // resize handler records the column on mousedown, before the first
+      // pointer move.
+      draggable={canReorder && !isAnyResizing}
       onDragStart={canReorder ? handleDragStart : undefined}
       onDragEnd={canReorder ? handleDragEnd : undefined}
       onDragOver={isDropTarget ? handleDragOver : undefined}
@@ -671,15 +705,26 @@ export function TMDataGridHeaderCell({
           // Keeps a drag that starts on the separator from being picked up by
           // the draggable header around it.
           draggable={false}
+          // The drag starts from `column.getSize()`, so the rendered width has
+          // to be in `columnSizing` before the handler reads it - otherwise
+          // the first pointer move snaps a fluid column to its declared size.
           onMouseDown={
             canResize
               ? (event) => {
                   suppressSortRef.current = true;
+                  freezeRenderedWidths();
+                  header.getResizeHandler()(event);
+                }
+              : undefined
+          }
+          onTouchStart={
+            canResize
+              ? (event) => {
+                  freezeRenderedWidths();
                   header.getResizeHandler()(event);
                 }
               : undefined
           }
-          onTouchStart={canResize ? header.getResizeHandler() : undefined}
           onClick={(event) => event.stopPropagation()}
           // The spreadsheet gesture: double-click the divider, the column
           // fits its content. Same measurement as the menu item.

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

@@ -422,16 +422,16 @@
   justify-content: center;
 }
 
-/* A confirmed entry row - entered, awaiting Save all. It reads as a value
+/* A committed entry row - entered, awaiting Save all. It reads as a value
    row: text padding, the body's border weight, and the "new" tint instead of
    the editing underline. */
-.entryRow[data-confirmed="true"] .entryCell {
+.entryRow[data-committed="true"] .entryCell {
   padding: 0 var(--dg-padding);
   border-bottom: 1px solid var(--mantine-color-default-border);
   background-color: var(--dg-row-new-bg, var(--mantine-color-body));
 }
 
-.entryRow[data-confirmed="true"] .entryCell[data-control-column="true"] {
+.entryRow[data-committed="true"] .entryCell[data-control-column="true"] {
   padding: 0;
 }
 

package/src/tmdatagrid/components/TMDataGridTable.tsx

@@ -35,6 +35,11 @@ import {
 } from "./TMDataGridCellEditor";
 import { TMDataGridEntryRows } from "./TMDataGridEntryRows";
 import { getColumnAlign, isControlColumn } from "../core/columnUtils";
+import {
+  resizePreview,
+  type TMDataGridColumnTrack,
+} from "../core/resizePreview";
+import { useSettledTableState } from "../core/useSettledTableState";
 import { draftCellContext } from "../core/draftCellContext";
 import {
   getEditFieldName,
@@ -726,9 +731,10 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     scrollerRef,
   } = useTMDataGridContext();
 
-  // The body depends on every state slice (sorting, filters, paging, sizing,
-  // visibility, selection), so it subscribes to the whole table store.
-  useSelector(table.store);
+  // The body depends on every settled state slice (sorting, filters, paging,
+  // sizing, visibility, selection). Not on the transient resize deltas: those
+  // publish on every pointer move and the drag paints itself, see below.
+  useSettledTableState(table.store);
   // The active row lives in the chrome store, so it needs its own subscription.
   const highlightedRowId = useSelector(ui, (state) => state.highlightedRowId);
   // As does the focused cell. Selected separately from the row above so a grid
@@ -1082,19 +1088,26 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   // Pinned columns are always exact: their sticky offsets come from
   // `getStart()` / `getAfter()`, which sum `getSize()` and cannot see an `fr`.
   const columnSizing = table.store.state.columnSizing;
-  const columnTracks = orderedColumns.map((column) => {
-    const isFixed = column.columnDef.minSize === column.columnDef.maxSize;
-    const isResized = column.id in columnSizing;
-    const isPinned = column.getIsPinned() !== false;
-    const minWidth = column.columnDef.minSize ?? 80;
-    if (isFixed || isResized || isPinned) {
-      return { track: `${column.getSize()}px`, minWidth: column.getSize() };
-    }
-    return {
-      track: `minmax(${minWidth}px, ${column.columnDef.meta?.flex ?? 1}fr)`,
-      minWidth,
-    };
-  });
+  const columnTracks: Array<TMDataGridColumnTrack> = orderedColumns.map(
+    (column) => {
+      const isFixed = column.columnDef.minSize === column.columnDef.maxSize;
+      const isResized = column.id in columnSizing;
+      const isPinned = column.getIsPinned() !== false;
+      const minWidth = column.columnDef.minSize ?? 80;
+      if (isFixed || isResized || isPinned) {
+        return {
+          id: column.id,
+          track: `${column.getSize()}px`,
+          minWidth: column.getSize(),
+        };
+      }
+      return {
+        id: column.id,
+        track: `minmax(${minWidth}px, ${column.columnDef.meta?.flex ?? 1}fr)`,
+        minWidth,
+      };
+    },
+  );
   const gridTemplateColumns = columnTracks.map((c) => c.track).join(" ");
   const gridMinWidth = columnTracks.reduce((sum, c) => sum + c.minWidth, 0);
 
@@ -1142,6 +1155,65 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   const layoutFor = (columnId: string) =>
     columnLayout.get(columnId) ?? UNPINNED_LAYOUT;
 
+  /**
+   * A running resize drag paints itself, straight onto the grid element.
+   *
+   * Every row sits on the grid's own column tracks through `subgrid`, so the
+   * whole drag is one style write per frame. Letting the drag render instead -
+   * `columnResizeMode: "onChange"`, which publishes a width on every pointer
+   * move - costs a React pass over every mounted cell for each of those moves,
+   * and the gesture turns choppy on a grid wide enough to be worth resizing.
+   *
+   * TanStack still owns the gesture and still commits the width into
+   * `columnSizing` when the pointer is released; the render that follows lands
+   * on the same numbers the last frame painted.
+   */
+  const previewRef = useRef<{
+    tracks: Array<TMDataGridColumnTrack>;
+    leftLane: Array<string>;
+    rightLane: Array<string>;
+  }>({ tracks: columnTracks, leftLane: [], rightLane: [] });
+  useEffect(() => {
+    previewRef.current = {
+      tracks: columnTracks,
+      leftLane: leftLeafColumns.map((column) => column.id),
+      // Outermost last, the order the offsets above accumulate in.
+      rightLane: [...rightLeafColumns].reverse().map((column) => column.id),
+    };
+  });
+  useEffect(() => {
+    const element = gridElementRef.current;
+    if (!element) return;
+
+    // Painted straight from the store's publish rather than on a frame of its
+    // own: the browser already coalesces pointer moves to one per frame, and a
+    // `requestAnimationFrame` stops firing altogether while the window is
+    // occluded - which would leave the drag frozen under the pointer.
+    let painted = "";
+    const subscription = table.store.subscribe((state) => {
+      const preview = resizePreview({
+        progress: state.columnResizing,
+        boundsOf: (columnId) => table.getColumn(columnId)?.columnDef ?? {},
+        ...previewRef.current,
+      });
+      if (!preview || preview.gridTemplateColumns === painted) return;
+      painted = preview.gridTemplateColumns;
+      element.style.gridTemplateColumns = preview.gridTemplateColumns;
+      element.style.minWidth = `${preview.minWidth}px`;
+      // Only the pinned lanes, and only while the drag is resizing one of
+      // them: their sticky offsets are the one measurement that does not
+      // follow from the track list alone.
+      for (const { columnId, side, offset } of preview.offsets) {
+        for (const cell of element.querySelectorAll<HTMLElement>(
+          `[data-column-id="${CSS.escape(columnId)}"]`,
+        )) {
+          cell.style[side] = `${offset}px`;
+        }
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [table]);
+
   // Pinned rows count as content: with every visible row pinned to an edge,
   // an empty-state message beside them would contradict what is on screen.
   const isEmpty = rows.length === 0 && pinnedRowCount === 0;

package/src/tmdatagrid/components/TMDataGridToolbar.tsx

@@ -5,6 +5,7 @@ import classes from "./TMDataGridToolbar.module.css";
 import { TMDataGridColumnsPanel } from "./TMDataGridColumnsPanel";
 import { useTMDataGridContext } from "../TMDataGridContext";
 import { getGridCapabilities } from "../core/capabilities";
+import { useSettledTableState } from "../core/useSettledTableState";
 import { isFilterActive } from "../core/filterOperators";
 import { BurgerIcon, FilterIcon } from "./icons";
 import { openColumnFilter } from "../useTMDataGrid";
@@ -52,7 +53,7 @@ export function TMDataGridLoadingIndicator() {
  */
 export function TMDataGridSummaryCount({ children }: { children?: ReactNode }) {
   const { table, controlSize } = useTMDataGridContext();
-  useSelector(table.store);
+  useSettledTableState(table.store);
 
   const shown = table.getRowCount();
   const total =