@jielga/tmdatagrid 2.0.0-beta.2 → 2.0.0-beta.21

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_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_1kqd2_8[data-size=xs]{--dg-row-height:34px;--dg-header-height:32px;--dg-font-size:var(--mantine-font-size-xs);--dg-padding:6px}._root_1kqd2_8[data-size=sm]{--dg-row-height:42px;--dg-header-height:38px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:8px}._root_1kqd2_8[data-size=md]{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px}._root_1kqd2_8[data-size=lg]{--dg-row-height:62px;--dg-header-height:52px;--dg-font-size:var(--mantine-font-size-md);--dg-padding:14px}._root_1kqd2_8[data-size=xl]{--dg-row-height:72px;--dg-header-height:60px;--dg-font-size:var(--mantine-font-size-lg);--dg-padding:18px}._root_1kqd2_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-focused-cell:1;--dg-z-pinned-cell:2;--dg-z-pinned-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_a5do5_1{flex-direction:column;width:280px;display:flex}._columnsPanelSearch_a5do5_7{padding:var(--mantine-spacing-sm)}._columnsPanelList_a5do5_11{gap:var(--mantine-spacing-sm);padding:var(--mantine-spacing-sm);flex-direction:column;display:flex}._columnsPanelSearch_a5do5_7+* ._columnsPanelList_a5do5_11{padding-top:0}._columnsPanelFooter_a5do5_22{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_bdal6_2{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}._tableWrapper_bdal6_2[data-dg-filter-sidebar]{flex-direction:row}._scrollContainer_bdal6_17{flex:1;min-width:0;min-height:0;position:relative;overflow:auto;container-type:inline-size}._grid_bdal6_29{align-content:start;min-height:100%;display:grid}._tabGuard_bdal6_44{outline:none;width:0;height:0;position:absolute;overflow:hidden}._headerRow_bdal6_54{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-header,6);display:grid;position:sticky;top:0}._bodyRow_bdal6_63{--row-bg:var(--mantine-color-body);grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;display:grid}._bodyRow_bdal6_63[data-striped=true]{--row-bg:var(--dg-row-striped-bg)}._bodyRow_bdal6_63[data-new=true]{--row-bg:var(--dg-row-new-bg,var(--mantine-color-body))}._bodyRow_bdal6_63:hover{--row-bg:var(--mantine-color-default-hover)}._bodyRow_bdal6_63[data-grouped=true]{--row-bg:var(--dg-row-group-bg)}._bodyRow_bdal6_63[data-context-menu=true]{--row-bg:var(--mantine-color-default-hover)}._bodyRow_bdal6_63[data-selected-bg=true]{--row-bg:var(--dg-row-selected-bg)}._bodyRow_bdal6_63[data-highlighted=true]{--row-bg:var(--dg-row-highlight-bg)}._bodyRow_bdal6_63[data-selects-on-click=true]{-webkit-user-select:none;user-select:none}._bodyRow_bdal6_63:focus-visible{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._bodyCell_bdal6_137{padding:0 var(--dg-padding);border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--mantine-color-body);background-image:linear-gradient(var(--row-bg), var(--row-bg));font-size:var(--dg-font-size);align-items:center;display:flex}._bodyCell_bdal6_137[data-control-column=true]{padding:0}._grid_bdal6_29[data-range-dragging]{-webkit-user-select:none;user-select:none}._bodyCell_bdal6_137[data-selected=true]{--dg-range-tint:color-mix(in srgb, var(--mantine-primary-color-filled) 14%, var(--row-bg));background-image:linear-gradient(var(--dg-range-tint), var(--dg-range-tint));--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_bdal6_137[data-edge-top=true]{--dg-edge-top:var(--mantine-primary-color-filled)}._bodyCell_bdal6_137[data-edge-bottom=true]{--dg-edge-bottom:var(--mantine-primary-color-filled)}._bodyCell_bdal6_137[data-edge-left=true]{--dg-edge-left:var(--mantine-primary-color-filled)}._bodyCell_bdal6_137[data-edge-right=true]{--dg-edge-right:var(--mantine-primary-color-filled)}._bodyCell_bdal6_137[data-focused=true]{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._cellContent_bdal6_135{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._bodyCell_bdal6_137[data-editing]{padding:0 calc(var(--dg-padding) / 2)}._cellEditor_bdal6_244{align-items:center;gap:2px;width:100%;min-width:0;display:flex}._cellEditorField_bdal6_254{flex:auto;align-items:center;min-width:0;display:flex}._cellEditorActions_bdal6_262{flex:none;align-items:center;display:flex}._bodyCell_bdal6_137[data-dirty],._bodyCell_bdal6_137[data-invalid],._entryCell_bdal6_275[data-invalid]{position:relative}._bodyCell_bdal6_137[data-dirty]:after,._bodyCell_bdal6_137[data-invalid]:after,._entryCell_bdal6_275[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_bdal6_137[data-invalid]:after,._entryCell_bdal6_275[data-invalid]:after{border-top-color:var(--mantine-color-error);border-right-color:var(--mantine-color-error)}._bodyCell_bdal6_137[data-align=right]{justify-content:flex-end}._bodyCell_bdal6_137[data-align=center]{justify-content:center}._bodyCell_bdal6_137[data-align=left] ._cellContent_bdal6_135{flex:auto}._detailsCell_bdal6_317{border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--mantine-color-body);background-image:linear-gradient(var(--row-bg), var(--row-bg));padding:var(--dg-padding);-webkit-user-select:text;user-select:text;cursor:auto;grid-column:1/-1}._messageRow_bdal6_23{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_bdal6_63[data-deleted=true]{opacity:.55;text-decoration:line-through}._bodyRow_bdal6_63[data-deleted=true] ._bodyCell_bdal6_137:not([data-control-column=true]){pointer-events:none}._entryBlock_bdal6_369{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_bdal6_378{grid-column:1/-1;grid-template-columns:subgrid;display:grid}._pinnedTopBlock_bdal6_391{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_bdal6_391>:last-child>[role=cell]{border-bottom:2px solid var(--mantine-color-default-border)}._pinnedBottomBlock_bdal6_404{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_bdal6_404>:first-child>[role=cell]{border-top:2px solid var(--mantine-color-default-border)}._entryCell_bdal6_275{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_bdal6_275[data-control-column=true]{justify-content:center;padding:0}._entryRow_bdal6_378[data-committed=true] ._entryCell_bdal6_275{padding:0 var(--dg-padding);border-bottom:1px solid var(--mantine-color-default-border);background-image:linear-gradient(var(--dg-row-new-bg,transparent), var(--dg-row-new-bg,transparent))}._entryRow_bdal6_378[data-committed=true] ._entryCell_bdal6_275[data-control-column=true]{padding:0}._rowStateIndicator_bdal6_453{width:22px;height:22px;color:var(--mantine-color-dimmed);flex:none;justify-content:center;align-items:center;display:inline-flex}._rowStateIndicator_bdal6_453[data-error]{color:var(--mantine-color-error)}._entryCell_bdal6_275[data-align=right]{justify-content:flex-end}._entryCell_bdal6_275[data-align=center]{justify-content:center}._matchHighlight_bdal6_479{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_bdal6_500{grid-column:1/-1;grid-template-columns:subgrid;top:calc(100% - var(--dg-summary-height,0px));z-index:var(--dg-z-summary-row,4);display:grid;position:sticky;bottom:0}._summaryCell_bdal6_510{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_bdal6_510[data-control-column=true]{padding:0}._summaryCell_bdal6_510[data-align=right]{justify-content:flex-end}._summaryCell_bdal6_510[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_wm77f_4{gap:var(--mantine-spacing-xs);flex-direction:column;display:flex}._filterRow_wm77f_12{align-items:flex-end;gap:var(--mantine-spacing-xs);display:flex}._filterRow_wm77f_12[data-layout=stacked]{align-items:end;gap:6px var(--mantine-spacing-xs);padding:var(--mantine-spacing-xs);border:1px solid var(--mantine-color-default-border);border-radius:var(--mantine-radius-sm);grid-template-columns:1fr auto;display:grid}._filterRow_wm77f_12[data-layout=stacked] ._filterRemove_wm77f_32{grid-area:1/2}._filterRow_wm77f_12[data-layout=stacked] ._filterColumnSlot_wm77f_37{grid-area:1/1;min-width:0}._filterRow_wm77f_12[data-layout=stacked] ._filterOperatorSlot_wm77f_43,._filterRow_wm77f_12[data-layout=stacked] ._filterValueSlot_wm77f_44{grid-column:1/-1;min-width:0}._filterPanelFooter_wm77f_49{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_1jwnm_16:after,._stickyRight_1jwnm_17:after{content:"";pointer-events:none;width:8px;position:absolute;top:0;bottom:0}._stickyLeft_1jwnm_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_1jwnm_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_1jwnm_16:after,._stickyRight_1jwnm_17:after{--dg-sticky-edge-range:20px;opacity:0;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(inline)}._stickyLeft_1jwnm_16:after{animation-name:_stickyEdgeIn_1jwnm_1;animation-range:0 var(--dg-sticky-edge-range)}._stickyRight_1jwnm_17:after{animation-name:_stickyEdgeOut_1jwnm_1;animation-range:calc(100% - var(--dg-sticky-edge-range)) 100%}}@keyframes _stickyEdgeIn_1jwnm_1{0%{opacity:0}to{opacity:1}}@keyframes _stickyEdgeOut_1jwnm_1{0%{opacity:1}to{opacity:0}}._headerBoundary_1jwnm_120: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()){._headerBoundary_1jwnm_120:after{animation:linear both _dgHeaderShadow_1jwnm_1;animation-timeline:scroll();animation-range:0 24px}}@keyframes _dgHeaderShadow_1jwnm_1{0%{opacity:0}to{opacity:1}}._surfaceHeader_10bcx_5{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-md);padding-bottom:var(--mantine-spacing-xs);display:flex}._filterPopup_10bcx_18{top:calc(var(--dg-header-stack-height,var(--dg-header-height)) + 2px);left:var(--mantine-spacing-md);z-index:var(--dg-z-filter-popup,20);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}._filterSidebar_10bcx_33{min-width:0;padding:var(--mantine-spacing-sm);background-color:var(--mantine-color-body);border-left:1px solid var(--mantine-color-default-border);flex-direction:column;flex:none;display:flex}._filterSidebar_10bcx_33[data-side=left]{border-left:none;border-right:1px solid var(--mantine-color-default-border);order:-1}._filterSidebarBody_10bcx_51{flex:1;min-height:0}._headerFilterRow_h1geg_9{grid-column:1/-1;grid-template-columns:subgrid;top:var(--dg-header-height);z-index:var(--dg-z-header,6);display:grid;position:sticky}._headerFilterCell_h1geg_18{min-width:0;padding:calc(var(--dg-padding) / 2);background-color:var(--mantine-color-body);border-bottom:1px solid var(--mantine-color-default-border);align-items:center;gap:2px;display:flex;overflow:hidden}._headerFilterCell_h1geg_18[data-control-column=true]{padding:0}._headerFilterValue_h1geg_39{flex:1;min-width:0}._headerFilterOperator_h1geg_44{flex:none}._operatorItemActive_h1geg_48{color:var(--mantine-primary-color-filled);font-weight:600}._headerCell_apk7q_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_apk7q_1[data-align=right]{justify-content:flex-end}._headerCell_apk7q_1[data-align=center]{justify-content:center}._headerCell_apk7q_1[data-control-column=true]{padding:0}._headerCellFiltered_apk7q_35 ._headerTitle_apk7q_35{color:var(--mantine-primary-color-filled)}._headerTitle_apk7q_35{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._headerCell_apk7q_1[data-align=right] ._headerTitle_apk7q_35{text-align:right}._headerCell_apk7q_1[data-align=center] ._headerTitle_apk7q_35{justify-content:center;display:flex}._headerActions_apk7q_58{flex-shrink:0;align-items:center;gap:0;margin-left:auto;display:flex}._headerCell_apk7q_1[data-align=right] ._headerActions_apk7q_58{order:-1;margin-left:0;margin-right:auto}._headerAction_apk7q_58{display:none}._headerCell_apk7q_1:hover ._headerAction_apk7q_58,._headerCell_apk7q_1:focus-within ._headerAction_apk7q_58,._headerAction_apk7q_58[data-pinned-visible=true]{display:flex}._headerCellSortable_apk7q_87{cursor:pointer}._sortAction_apk7q_93[data-sorted=false]{opacity:.55}._sortAction_apk7q_93[data-sorted=false]:hover{opacity:1}._sortIndex_apk7q_103{color:var(--mantine-color-dimmed);text-align:center;min-width:10px;font-size:10px;font-weight:600;line-height:1}._headerCellDragging_apk7q_115{opacity:.4}._headerCellDropBefore_apk7q_119:before,._headerCellDropAfter_apk7q_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_apk7q_119:before{left:0}._headerCellDropAfter_apk7q_120:before{right:0}._columnSeparator_apk7q_140{z-index:1;justify-content:center;width:10px;height:50%;display:flex;position:absolute;top:25%;right:0;transform:translate(50%)}._headerCell_apk7q_1:last-child ._columnSeparator_apk7q_140{justify-content:flex-end;transform:none}._columnSeparatorResizable_apk7q_162{cursor:col-resize;touch-action:none}._columnSeparator_apk7q_140:after{content:"";background-color:#0000;width:1px;height:100%;transition:background-color .12s,width .12s}._headerCell_apk7q_1:hover ._columnSeparator_apk7q_140:after,._headerCell_apk7q_1:focus-within ._columnSeparator_apk7q_140:after{background-color:var(--mantine-color-default-border)}._columnSeparatorResizable_apk7q_162:hover:after,._columnSeparatorActive_apk7q_185:after{background-color:var(--mantine-primary-color-filled);width:2px}._menuItemActive_apk7q_191{background-color:var(--mantine-color-default-hover);font-weight:600}._toolbar_gwk05_1{align-items:center;gap:var(--mantine-spacing-xs);padding:6px var(--mantine-spacing-xs);flex-shrink:0;min-height:42px;display:flex}._toolbar_gwk05_1[data-with-bottom-border]{border-bottom:1px solid var(--mantine-color-default-border)}._toolbarSpacer_gwk05_15{flex:1}._summaryCount_gwk05_19{white-space:nowrap}._title_199r2_1{font-weight:500}._list_199r2_5{border:1px solid var(--mantine-color-default-border);border-radius:var(--mantine-radius-default);flex-direction:column;display:flex;overflow:hidden}._listHeader_199r2_13{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-sm);padding:var(--mantine-spacing-xs) var(--mantine-spacing-sm);background-color:var(--mantine-color-default-hover);border-bottom:1px solid var(--mantine-color-default-border);display:flex}._headerLabel_199r2_23{cursor:pointer;font-weight:500}._rows_199r2_28{padding:calc(var(--mantine-spacing-xs) / 2) 0;flex-direction:column;display:flex}._row_199r2_28{padding:0 var(--mantine-spacing-sm)}._row_199r2_28:hover{background-color:var(--mantine-color-default-hover)}._rowBody_199r2_45{align-items:center}._rowLabelWrapper_199r2_49{flex:1;min-width:0}._rowLabel_199r2_49{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-sm);padding-block:calc(var(--mantine-spacing-xs) * .75);cursor:pointer;display:flex}._rowText_199r2_63{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._rowHint_199r2_69{font-size:var(--mantine-font-size-xs);color:var(--mantine-color-dimmed);flex:none}._empty_199r2_75{padding:var(--mantine-spacing-xs) var(--mantine-spacing-sm)}
 /*$vite$:1*/

package/docs/anatomy.md

@@ -0,0 +1,102 @@
+# Grid anatomy
+
+A grid is a tree of components inside the `TMDataGrid` wrapper. Parts are
+opt-in: a grid containing only `<TMDataGrid.Table />` has no toolbar, footer or
+search. Add the built-in parts you need, configure them, or add components of
+your own.
+
+`useTMDataGrid` returns the props `TMDataGrid` takes:
+
+```tsx
+const grid = useTMDataGrid({ data, columns });
+
+<TMDataGrid {...grid} style={{ flex: 1, minHeight: 0 }} size="xs">
+  <TMDataGrid.Toolbar>
+    <TMDataGrid.Search />
+    <TMDataGrid.Spacer />
+    <TMDataGrid.FilterButton />
+    <TMDataGrid.Menu>
+      <TMDataGrid.Menu.Columns />
+    </TMDataGrid.Menu>
+  </TMDataGrid.Toolbar>
+  <TMDataGrid.Table />
+  <TMDataGrid.Footer />
+</TMDataGrid>
+```
+
+## The parts
+
+Every component below reads the grid from context and must be rendered inside
+`TMDataGrid`.
+
+| Component                                       | What it is                                                                   | Documented on                                         |
+| ----------------------------------------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------- |
+| `TMDataGrid.Table`                              | The scrollable surface: header, virtualized body, filter panel               | This page                                             |
+| `TMDataGrid.Toolbar`                            | A flex row above the grid                                                    | [Toolbar](/docs/toolbar)                              |
+| `TMDataGrid.Footer`                             | The pager bar below it                                                       | [Pagination](/docs/pagination)                        |
+| `TMDataGrid.Search`                             | Quick search input                                                           | [Quick search](/docs/quick-search)                    |
+| `TMDataGrid.FilterButton` · `.FilterPanel`      | The filter UI                                                                | [Filtering](/docs/filtering)                          |
+| `TMDataGrid.FilterPills`                        | Active filters as pills. Also exported as `TMDataGridFilterPills`            | [Filtering](/docs/filtering#tmdatagridfilterpills)    |
+| `TMDataGrid.Menu` · `.ColumnsPanel`             | The burger menu, and the column chooser                                      | [Grid menu](/docs/menu)                               |
+| `TMDataGrid.Spacer`                             | Pushes following toolbar items right                                         | [Toolbar](/docs/toolbar)                              |
+| `TMDataGrid.LoadingIndicator` · `.SummaryCount` | Fetch spinner, and the row count                                             | [Loading and empty states](/docs/loading-and-empty)   |
+| `TMDataGrid.DraftActions`                        | Save and Discard for pending edits. Also exported as `TMDataGridDraftActions` | [Editing](/docs/editing#the-draft-store)                |
+
+`FilterPills` is the exception: it takes the grid as an `api` prop and can be
+rendered outside `TMDataGrid`, since an active-filter strip often sits above
+the grid it describes.
+
+The parts that can be rendered outside the grid are exported under both
+spellings - `TMDataGrid.FilterPills` and `TMDataGridFilterPills` are the same
+component, and so are the `Search` and `DraftActions` pairs. Every other part
+is reached only through the `TMDataGrid` object.
+
+## `TMDataGrid.Table`
+
+The scrollable surface: the header, the virtualized body and the filter panel.
+Pass the row type so the handlers are typed:
+
+```tsx
+<TMDataGrid.Table<Employee> onRowClick={(row) => open(row.original.id)} />
+```
+
+Its props, and those of `TMDataGrid` itself, are listed once, on
+[Components and hooks](/docs/components#tmdatagridtable). This page says what
+each part is and which page documents it; that page says what every prop does.
+
+Set `aria-label` on any page holding more than one grid: it is what a screen
+reader announces on entry, and what `getByRole("grid", { name })` matches.
+
+### Which rows it renders
+
+With pagination off (the default) rows come from
+`getPrePaginatedRowModel()`: every filtered and sorted row, virtualized. With
+pagination on they come from `getPaginatedRowModel()`, so a
+[`manualPagination`](/docs/server-side) grid renders exactly the page the server
+returned.
+
+## What the hook returns
+
+`useTMDataGrid` returns the table instance, the UI store, the edit engine, the
+resolved labels and the feature flags, along with `resetSettings`,
+`scrollToRow` and the details options it passes through to the Table. The
+[complete list, with types](/docs/components#usetmdatagrid), is on Components
+and hooks; the [options it takes](/docs/use-tm-data-grid) are their own page.
+
+Read state through TanStack Store's
+[`useSelector(table.store, …)`](https://tanstack.com/store/latest/docs/framework/react/reference)
+rather than calling methods on `table`. The table identity is stable across
+renders, so the React Compiler caches a bare method call and the component
+stops updating.
+
+## Reference
+
+| Name                                                                                 | Kind      | Type                           | Default | What it does                                         |
+| ------------------------------------------------------------------------------------ | --------- | ------------------------------ | ------- | ---------------------------------------------------- |
+| `useTMDataGrid`                                                                      | Hook      | `(options) => TMDataGridApi`   | –       | Creates the grid's table, UI state and edit engine.  |
+| `TMDataGrid`                                                                         | Component | –                              | –       | The root element. Provides the grid through context. |
+| `TMDataGrid.Table`                                                                   | Component | –                              | –       | Header, virtualized body and filter panel.           |
+| `data-testid`                                                                        | Prop      | `string`                       | –       | Names the grid for tests.                            |
+| `aria-label` · `aria-labelledby`                                                     | Props     | `string`                       | –       | The grid's accessible name.                          |
+| `useTMDataGridContext`                                                               | Hook      | `() => TMDataGridContextValue` | –       | The grid, from inside any child.                     |
+| `TMDataGridApi` · `TMDataGridTable` · `TMDataGridUiStore` · `TMDataGridFeatureFlags` | Exports   | types                          | –       | The hook's result and its parts.                     |

package/docs/cell-selection.md

@@ -0,0 +1,154 @@
+# Cell selection and copy
+
+A cell cursor moved with the arrow keys, a rectangle of cells that can be
+dragged out, and Ctrl+C that pastes into Excel as cells rather than as one
+string. Off by default; `cellSelection` turns it on.
+
+```tsx
+const grid = useTMDataGrid({ data, columns, cellSelection: "range" });
+```
+
+| Mode | What it gives |
+| ---- | ------------- |
+| `"none"` | Nothing. The default |
+| `"single"` | One focused cell, moved with the arrow keys |
+| `"range"` | As `"single"`, plus a rectangle of cells, Ctrl+C and the export menu |
+
+```demo
+file: cells/CellSelection.tsx
+hint: Tab into the grid, then arrows to move · Shift+arrows or drag to select a block. However many cells it holds, the whole grid is one tab stop.
+```
+
+Turning it on changes three things about the body:
+
+- The tab stop moves from the row to a cell, so the whole grid is **one** Tab
+  stop and the arrow keys move within it.
+- The grid reports itself as a `grid` of `gridcell`s rather than a `table` of
+  `cell`s, which is what tells a screen reader the arrow keys are live.
+- The focused cell takes `data-focused`, and the selected ones `data-selected`
+  and `data-edge-*`, which the stylesheet styles.
+
+## Keys and keyboard shortcuts
+
+| Key | Does |
+| --- | --- |
+| Arrows | Moves one cell. Clamped at the edges; no wrapping |
+| Shift+arrows | Extends the rectangle from its anchor (`"range"`) |
+| PageUp / PageDown | Moves one viewport of rows |
+| Home / End | First / last cell of the row |
+| Ctrl+Home / Ctrl+End | First / last cell of the grid |
+| Enter or F2 | Steps into the cell, to its checkbox, link or button |
+| Escape | Steps back out, or drops the rectangle to the focused cell |
+| Space | Selects the row, as a row click does under `selectionMode: "row"` |
+| Ctrl+C | Copies the selection as tab-separated text |
+| Ctrl+V | Not handled. The grid never writes cells from the clipboard |
+
+There is no paste and no fill handle: values arrive through a cell editor or
+through [`edit.addRows`](/docs/editing#adding-and-deleting-rows), which is the
+path for importing a block of rows at once.
+
+A [cell editor](/docs/editing) takes over Enter and F2 when editing is on.
+Otherwise they focus the first control in the cell, and the arrow keys stop
+moving the cursor while focus is inside it.
+
+## One tab stop
+
+The body is one tab stop in each direction.
+Tab from a cell leaves the grid and Shift+Tab leaves it backwards, however many
+rows are mounted and whatever those rows hold.
+
+A control inside a body cell needs no `tabIndex`.
+Enter or F2 steps into the cell and onto its first control, Escape steps back
+out to the cell, and Space selects the row from any of its cells without
+stepping in.
+
+Once the focus is on a control, Tab walks the rest of that row's controls - its
+open editors, the buttons in its cells, and on an open row the edit lane's save
+and cancel.
+Past the row's last control the cursor moves to the next row's first cell, and
+Shift+Tab before its first control moves to the previous row's last cell;
+neither opens the row it lands on.
+From the last row, Tab leaves the grid.
+
+Header controls are unaffected: the header row is not part of cell navigation,
+so Tab is the only way to its sort buttons and menus.
+
+## Where the selection lives
+
+`ui.state.focusedCell` is a `{ rowId, columnId }` pair, and `ui.state.cellRange`
+is two of them: the anchor and the moving corner. They hold **ids rather than
+indices**, so sorting, filtering and column reordering move the selection with
+the cells instead of leaving it over whatever took those positions. A range
+whose corner is filtered away is not shown, and returns when the filter is
+cleared.
+
+Move either with `ui.actions.setFocusedCell` / `setCellRange`, follow them with
+`onFocusedCellChange`, or read them with TanStack Store's
+[`useSelector`](https://tanstack.com/store/latest/docs/framework/react/reference):
+
+```tsx
+const focusedCell = useSelector(grid.ui, (state) => state.focusedCell);
+```
+
+One rectangle at a time. Ctrl+drag for a second, disjoint block is not
+supported.
+
+### System lanes
+
+The generated lanes (checkbox, tree, details) are part of the selection. They
+take the tint and the outline, so the block stays a rectangle and the arrow keys
+still reach the checkbox. They are never exported. A block covering nothing else
+has nothing to copy, and the Copy and Export items are disabled.
+
+## Copy and export
+
+Ctrl+C puts the selected block on the clipboard as tab-separated text with CRLF
+between rows, the format Excel, Sheets and Numbers all write themselves, so a
+paste lands in cells rather than in one column. Values only: no header row, the
+same as Excel's own copy.
+
+```demo
+file: cells/CopyAndExport.tsx
+hint: Select a block and press Ctrl+C. It pastes into Excel as cells, not as one string.
+```
+
+Right-clicking inside the selection opens a menu with **Copy**, **Export cells**
+and an **Include headers** toggle. A right-click outside it moves the
+selection there first, as a spreadsheet does. Your own
+[`renderRowContextMenu`](/docs/row-interaction#context-menus) items are appended
+below a divider, so turning cell selection on removes nothing. Those three items are also what that slot's `internalItems` contains.
+
+### The file
+
+**Export cells** writes the rectangle in the grid's export format, by default a CSV for a Nordic Excel: a `sep=;` first line, a UTF-8 BOM, CRLF endings, semicolons between fields and a comma as the decimal mark.
+The format, the file name and the header row are the grid's `exportOptions`; the formats, `meta.exportValue` and `meta.enableExport` are on [Export](/docs/export).
+
+```tsx
+const grid = useTMDataGrid({
+  data,
+  columns,
+  cellSelection: "range",
+  exportOptions: { format: csvFormat(), fileName: "employees" },
+});
+```
+
+What is written is the cell's **value**, not what it renders, for the file and for Ctrl+C alike.
+Ctrl+C writes numbers with the format's decimal mark, so what is pasted matches what is exported.
+
+Exporting every filtered row rather than the rectangle is `TMDataGrid.Menu.Export` and `useTMDataGridExport`, on [Export](/docs/export).
+
+## Reference
+
+| Name | Kind | Type | Default | What it does |
+| --- | --- | --- | --- | --- |
+| `cellSelection` | Option | `"none" \| "single" \| "range"` | `"none"` | Turns the cell cursor, and the rectangle, on. |
+| `onFocusedCellChange` | Callback | `(cell \| null) => void` | – | Follows the cursor. |
+| `exportOptions` | Option | `TMDataGridExportOptions` | `DEFAULT_EXPORT_OPTIONS` | Format, file name and header row of the Export cells item. See [Export](/docs/export). |
+| `ui.state.focusedCell` | UI state | `{ rowId, columnId } \| null` | `null` | The cursor. |
+| `ui.state.cellRange` | UI state | `{ anchor, focus } \| null` | `null` | The rectangle's two corners. |
+| `ui.actions.setFocusedCell` · `setCellRange` | UI actions | – | – | Move either from your own code. |
+| `toClipboardText` · `writeClipboardText` | Exports | – | – | The pieces behind Ctrl+C. |
+| `buildExportData` | Export | `({ table, rows, bounds }) => TMDataGridExportData` | – | The rectangle's values, with `bounds`. |
+| `labels.copy` · `labels.exportCells` · `labels.includeHeaders` · `labels.cellCount` | Labels | – | – | The menu's strings. |
+| `data-focused` | Data attribute | – | – | On the focused cell. |
+| `data-edge-top` · `-bottom` · `-left` · `-right` | Data attributes | – | – | On cells at the rectangle's border. |

package/docs/column-layout.md

@@ -0,0 +1,204 @@
+# Visibility, pinning, ordering and size
+
+Four things a user can change about the layout of the grid, and one button that
+resets them. All four write state that
+[persists](/docs/use-tm-data-grid#persist) together, so a grid comes back
+arranged the way it was left.
+
+```demo
+file: columns/ColumnLayout.tsx
+hint: Drag a header to reorder · pin or hide from a column menu · drag a divider to resize, or double-click it to fit the content.
+```
+
+## Hiding
+
+**Hide column** in any column menu, and the column chooser for the whole list at once: a search field, one checkbox per column, show/hide all, and **Reset layout**.
+The chooser is `TMDataGrid.Menu.Columns` in the [grid menu](/docs/menu), **Manage columns** in every column menu (a submenu of the same items), and `TMDataGrid.ColumnsPanel` as plain controls for a host that is not a menu.
+
+`enableHiding: false` removes all of it; on a column it removes that column's
+menu item and leaves it out of the panel, which lists what can be hidden and
+nothing else. Show/hide all covers the same list, so a column switched off this
+way keeps whatever visibility it was given. The state is TanStack's
+`columnVisibility`.
+
+The generated lanes are all `enableHiding: false` and never appear in the
+panel. Each follows the feature that adds it rather than a setting of its own.
+
+## Pinning
+
+**Pin to left** and **Pin to right** are in each column menu. The current
+position is marked, and choosing it again unpins. Pinned columns are sticky
+within the scroll container. The boundary is marked with a divider and a short
+gradient band, which fades in only while it is covering content.
+
+Headers, cells and grid tracks are ordered left, centre, right from the same
+source, so pinning does not change a column's position relative to its group.
+
+A pinned column also becomes fixed-width, since sticky offsets cannot be
+computed from an `fr` value. The grid writes the column's rendered width into
+`columnSizing` as it is pinned, so nothing jumps.
+
+To start pinned, set `initialState.columnPinning`. The slice is TanStack's
+full `ColumnPinningState`, so a partial does not compile - name both sides.
+A column pinned at mount has no rendered width to store, so it takes its
+`size` - TanStack's default of `150` where none is set - and `minSize` does
+not apply. Give such a column an explicit `size`:
+
+```tsx
+columnHelper.accessor("registration", { header: "Registration", size: 220 });
+
+initialState: { columnPinning: { start: ["registration"], end: [] } }
+```
+
+The generated lanes stay outside both pinned lanes: pinning a column right puts
+it to the left of the edit lane, so the row's Save, Cancel and Delete remain
+last in the row.
+
+## Ordering
+
+Drag a column header sideways to move it. The header being dragged dims, and a
+bar marks the edge the column will land against. **Move left** and **Move
+right** in the column menu do the same one step at a time, without a pointer.
+Both move the header, its cells and its filter entry together.
+
+```tsx
+const grid = useTMDataGrid({ data, columns, enableColumnOrdering: false });
+```
+
+`enableColumnOrdering` is defined by the grid rather than by TanStack, which
+ships the ordering state and APIs but no `enable` option. The per-column form is
+`meta.enableOrdering`.
+
+### Regions
+
+A column can only move **within its own pinned region**; a header in another
+region does not accept the drop. This follows TanStack's ordering pipeline:
+pinning splits the grid into left, centre and right, then `columnOrder`
+sequences the centre while `columnPinning.start` and `.end` sequence the
+pinned lanes. Unpin a column first to move it out of one.
+
+A neighbour that cannot be moved blocks the move; it is not stepped over. The
+checkbox column sets `meta.enableOrdering: false`, so nothing can be placed in
+front of it.
+
+Columns inside a header group cannot be moved either, in either direction:
+`columnOrder` sequences leaf columns, so moving one would leave the group header
+spanning columns that no longer belong to it.
+
+### Moving from your own code
+
+```tsx
+import { moveColumn, moveColumnByStep } from "@jielga/tmdatagrid";
+
+moveColumn({ table, columnId: "salary", targetId: "age", side: "before" });
+moveColumnByStep({ table, columnId: "salary", direction: 1 });
+```
+
+Both are no-ops for a move that is not allowed, including one across regions.
+`getStepTargetColumn({ table, columnId, direction })` returns the column a step
+would swap with, or `null` at the edge of a region. The menu items use it to
+decide whether to disable themselves.
+
+### State
+
+Ordering writes `columnOrder` as the **complete** leaf order, including hidden
+and pinned columns, so a column keeps its position when it is later shown or
+unpinned. Moving a pinned column also rewrites its `columnPinning` array. A
+column added to the definitions later is not in the stored order and is appended
+at the end until it is moved.
+
+## Sizing
+
+Columns are fluid by default. Each track is `minmax(minSize, flex fr)`.
+
+| Column option | Effect |
+| --- | --- |
+| `minSize` | Minimum width, and the column's contribution to the grid minimum width. Defaults to `80`. |
+| `meta.flex` | Share of the remaining width. Defaults to `1`. |
+| `minSize === maxSize` | Fixed width. The column is never fluid. |
+| `size` | Applied once the column becomes fixed by resizing or pinning. |
+
+Drag a divider to resize. A column switches to a fixed pixel width the moment
+it is resized or pinned, and the width is stored in `columnSizing`. The drag
+starts from the width the column is rendered with, and the grid paints it on
+its own column tracks while the pointer moves; the width reaches `columnSizing`
+when the pointer is released. `columnResizeMode: "onChange"` publishes it on
+every move instead, at the cost of a render of the grid for each one.
+
+### Autosizing
+
+Double-click a column's resize divider to size it to its widest mounted
+content. **Autosize column** in the column menu does the same without a
+pointer, and `meta.autoSize: true` runs it once after the first rows render,
+unless a persisted or user-set width already applies to the column.
+
+**Mounted content only.** Under virtualization the unmounted rows cannot be
+measured, so the width fits the visible window plus overscan. The result is
+clamped to `minSize`/`maxSize` and written into `columnSizing`, so it persists
+with the other widths and a later drag overrides it.
+
+`meta.autoSize` waits for content: on a grid whose rows are fetched, the first
+render has a header and no cells, so the column is sized on the render its
+first cells appear in.
+
+`autosizeColumn({ table, columnId, container })` is exported for menus and
+consumer code; `container` is the grid's scroll container, or any ancestor of
+the column's cells.
+
+## The column menu
+
+Everything above is reachable from a column's menu, and
+`renderColumnMenuItems` on `TMDataGrid.Table` sets what is in it. It receives
+the items the grid would have rendered and returns the list to render:
+
+```tsx
+<TMDataGrid.Table<Employee>
+  renderColumnMenuItems={({ column, internalItems }) => [
+    ...internalItems,
+    <Menu.Divider key="stats-divider" />,
+    <Menu.Item key="stats" onClick={() => showStats(column.id)}>
+      Column statistics
+    </Menu.Item>,
+  ]}
+/>
+```
+
+`internalItems` is the built-in list in order, dividers included. Returning it
+unchanged gives the default menu, splicing around it extends the menu, and
+returning something else replaces it. An empty list removes the menu button.
+
+It runs for every column that has a menu, so branch on `column.id` for a
+per-column menu. A trailing divider is dropped automatically.
+
+## Reset the layout
+
+`resetSettings()` from the hook clears visibility, order, pinning and widths in
+one call. The columns panel offers it as **Reset layout**.
+
+```tsx
+const { resetSettings } = useTMDataGrid({ data, columns });
+```
+
+## Reference
+
+| Name | Kind | Type | Default | What it does |
+| --- | --- | --- | --- | --- |
+| `enableHiding` | Table option | `boolean` | `true` | Also a column option. `false` removes hiding entirely. |
+| `enableColumnPinning` | Table option | `boolean` | `true` | `false` removes the pin menu items. |
+| `enablePinning` | Column option | `boolean` | `true` | `false` for one column. |
+| `enableColumnOrdering` | Option | `boolean` | `true` | Header dragging and the move menu items. Grid-defined. |
+| `meta.enableOrdering` | Column meta | `boolean` | `true` | `false` keeps one column where it is. |
+| `enableColumnResizing` | Table option | `boolean` | `true` | `false` leaves the divider as a separator only. |
+| `enableResizing` | Column option | `boolean` | `true` | `false` for one column. |
+| `meta.flex` | Column meta | `number` | `1` | Share of the remaining width. |
+| `meta.autoSize` | Column meta | `boolean` | `false` | Autosize once, on the render the column's first cells appear in. |
+| `minSize` / `maxSize` / `size` | Column options | `number` | `80` / – / – | Width bounds, and the fixed width once one applies. |
+| `renderColumnMenuItems` | Table prop | `({ column, table, internalItems }) => ReactNode[]` | – | The column menu's contents. An empty list removes the button. |
+| `resetSettings` | Hook return | `() => void` | – | Clears visibility, order, pinning and widths. |
+| `moveColumn` | Export | `({ table, columnId, targetId, side }) => void` | – | Moves a column beside another. |
+| `moveColumnByStep` | Export | `({ table, columnId, direction }) => void` | – | Moves it one place. |
+| `getStepTargetColumn` | Export | `(args) => Column \| null` | – | What a step would swap with, or `null` at a region edge. |
+| `keepGeneratedColumnsOutermost` | Export | `(columnPinning) => ColumnPinningState` | – | Puts the generated lanes back on the outside of both pinned lanes. The grid runs it after every pin. |
+| `getColumnRegion` | Export | `(column) => "start" \| "center" \| "end"` | – | Which pinned region a column is in. |
+| `autosizeColumn` | Export | `({ table, columnId, container }) => void` | – | Fits a column to its mounted content. |
+| `TMDataGrid.Menu.Columns` · `TMDataGrid.ColumnsPanel` | Components | – | – | The column chooser, as menu items and as plain controls. See [Grid menu](/docs/menu). |