@jielga/tmdatagrid 2.0.0-beta.9 → 2.0.0

package/dist/styles.css

@@ -1,2 +1,2 @@
-._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_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_11co7_2{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}._scrollContainer_11co7_10{flex:1;min-height:0;position:relative;overflow:auto;container-type:inline-size}._grid_11co7_21{display:grid}._tabGuard_11co7_29{outline:none;width:0;height:0;position:absolute;overflow:hidden}._headerRow_11co7_39{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-header,6);display:grid;position:sticky;top:0}._headerRow_11co7_39[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_11co7_39[data-dg-header-last]:after{animation:linear both _dg-header-shadow_11co7_1;animation-timeline:scroll();animation-range:0 24px}}@keyframes _dg-header-shadow_11co7_1{0%{opacity:0}to{opacity:1}}._bodyRow_11co7_88{--row-bg:var(--mantine-color-body);grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;display:grid}._bodyRow_11co7_88[data-striped=true]{--row-bg:var(--dg-row-striped-bg)}._bodyRow_11co7_88[data-new=true]{--row-bg:var(--dg-row-new-bg,var(--mantine-color-body))}._bodyRow_11co7_88:hover{--row-bg:var(--mantine-color-default-hover)}._bodyRow_11co7_88[data-grouped=true]{--row-bg:var(--dg-row-group-bg)}._bodyRow_11co7_88[data-context-menu=true]{--row-bg:var(--mantine-color-default-hover)}._bodyRow_11co7_88[data-selected-bg=true]{--row-bg:var(--dg-row-selected-bg)}._bodyRow_11co7_88[data-highlighted=true]{--row-bg:var(--dg-row-highlight-bg)}._bodyRow_11co7_88[data-selects-on-click=true]{-webkit-user-select:none;user-select:none}._bodyRow_11co7_88:focus-visible{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._bodyCell_11co7_162{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_11co7_162[data-control-column=true]{padding:0}._grid_11co7_21[data-range-dragging]{-webkit-user-select:none;user-select:none}._bodyCell_11co7_162[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_11co7_162[data-edge-top=true]{--dg-edge-top:var(--mantine-primary-color-filled)}._bodyCell_11co7_162[data-edge-bottom=true]{--dg-edge-bottom:var(--mantine-primary-color-filled)}._bodyCell_11co7_162[data-edge-left=true]{--dg-edge-left:var(--mantine-primary-color-filled)}._bodyCell_11co7_162[data-edge-right=true]{--dg-edge-right:var(--mantine-primary-color-filled)}._bodyCell_11co7_162[data-focused=true]{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._cellContent_11co7_160{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._bodyCell_11co7_162[data-editing]{padding:0 calc(var(--dg-padding) / 2)}._cellEditor_11co7_262{align-items:center;gap:2px;width:100%;min-width:0;display:flex}._cellEditorActions_11co7_271{flex:none;align-items:center;display:flex}._bodyCell_11co7_162[data-dirty],._bodyCell_11co7_162[data-invalid]{position:relative}._bodyCell_11co7_162[data-dirty]:after,._bodyCell_11co7_162[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_11co7_162[data-invalid]:after{border-top-color:var(--mantine-color-error);border-right-color:var(--mantine-color-error)}._bodyCell_11co7_162[data-align=right]{justify-content:flex-end}._bodyCell_11co7_162[data-align=center]{justify-content:center}._bodyCell_11co7_162[data-align=left] ._cellContent_11co7_160{flex:auto}._detailsCell_11co7_322{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_11co7_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_11co7_88[data-deleted=true]{opacity:.55;text-decoration:line-through}._bodyRow_11co7_88[data-deleted=true] ._bodyCell_11co7_162:not([data-control-column=true]){pointer-events:none}._entryBlock_11co7_372{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_11co7_381{grid-column:1/-1;grid-template-columns:subgrid;display:grid}._pinnedTopBlock_11co7_394{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_11co7_394>:last-child>[role=cell]{border-bottom:2px solid var(--mantine-color-default-border)}._pinnedBottomBlock_11co7_407{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_11co7_407>:first-child>[role=cell]{border-top:2px solid var(--mantine-color-default-border)}._entryCell_11co7_420{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_11co7_420[data-control-column=true]{justify-content:center;padding:0}._entryRow_11co7_381[data-committed=true] ._entryCell_11co7_420{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_11co7_381[data-committed=true] ._entryCell_11co7_420[data-control-column=true]{padding:0}._rowStateIndicator_11co7_450{width:22px;height:22px;color:var(--mantine-color-dimmed);flex:none;justify-content:center;align-items:center;display:inline-flex}._rowStateIndicator_11co7_450[data-error]{color:var(--mantine-color-error)}._entryCell_11co7_420[data-align=right]{justify-content:flex-end}._entryCell_11co7_420[data-align=center]{justify-content:center}._matchHighlight_11co7_476{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_11co7_488{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-summary-row,4);display:grid;position:sticky;bottom:0}._summaryCell_11co7_497{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_11co7_497[data-control-column=true]{padding:0}._summaryCell_11co7_497[data-align=right]{justify-content:flex-end}._summaryCell_11co7_497[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_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_1qtpn_2{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}._tableWrapper_1qtpn_2[data-dg-filter-sidebar]{flex-direction:row}._scrollContainer_1qtpn_17{flex:1;min-width:0;min-height:0;position:relative;overflow:auto;container-type:inline-size}._grid_1qtpn_29{align-content:start;min-height:100%;display:grid}._tabGuard_1qtpn_44{outline:none;width:0;height:0;position:absolute;overflow:hidden}._headerRow_1qtpn_54{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-header,6);display:grid;position:sticky;top:0}._bodyRow_1qtpn_63{--row-bg:var(--mantine-color-body);grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;display:grid}._bodyRow_1qtpn_63[data-striped=true]{--row-bg:var(--dg-row-striped-bg)}._bodyRow_1qtpn_63[data-new=true]{--row-bg:var(--dg-row-new-bg,var(--mantine-color-body))}._bodyRow_1qtpn_63:hover{--row-bg:var(--mantine-color-default-hover)}._bodyRow_1qtpn_63[data-grouped=true]{--row-bg:var(--dg-row-group-bg)}._bodyRow_1qtpn_63[data-context-menu=true]{--row-bg:var(--mantine-color-default-hover)}._bodyRow_1qtpn_63[data-selected-bg=true]{--row-bg:var(--dg-row-selected-bg)}._bodyRow_1qtpn_63[data-highlighted=true]{--row-bg:var(--dg-row-highlight-bg)}._bodyRow_1qtpn_63[data-selects-on-click=true]{-webkit-user-select:none;user-select:none}._bodyRow_1qtpn_63:focus-visible{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._bodyCell_1qtpn_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_1qtpn_137[data-control-column=true]{padding:0}._grid_1qtpn_29[data-range-dragging]{-webkit-user-select:none;user-select:none}._bodyCell_1qtpn_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_1qtpn_137[data-edge-top=true]{--dg-edge-top:var(--mantine-primary-color-filled)}._bodyCell_1qtpn_137[data-edge-bottom=true]{--dg-edge-bottom:var(--mantine-primary-color-filled)}._bodyCell_1qtpn_137[data-edge-left=true]{--dg-edge-left:var(--mantine-primary-color-filled)}._bodyCell_1qtpn_137[data-edge-right=true]{--dg-edge-right:var(--mantine-primary-color-filled)}._bodyCell_1qtpn_137[data-focused=true]{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._cellContent_1qtpn_135{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._bodyCell_1qtpn_137[data-editing]{padding:0 calc(var(--dg-padding) / 2)}._cellEditor_1qtpn_244{align-items:center;gap:2px;width:100%;min-width:0;display:flex}._cellEditorField_1qtpn_254{flex:auto;align-items:center;min-width:0;display:flex}._cellEditorActions_1qtpn_262{flex:none;align-items:center;display:flex}._bodyCell_1qtpn_137[data-dirty],._bodyCell_1qtpn_137[data-invalid],._entryCell_1qtpn_275[data-invalid]{position:relative}._bodyCell_1qtpn_137[data-dirty]:after,._bodyCell_1qtpn_137[data-invalid]:after,._entryCell_1qtpn_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_1qtpn_137[data-invalid]:after,._entryCell_1qtpn_275[data-invalid]:after{border-top-color:var(--mantine-color-error);border-right-color:var(--mantine-color-error)}._bodyCell_1qtpn_137[data-align=right]{justify-content:flex-end}._bodyCell_1qtpn_137[data-align=center]{justify-content:center}._bodyCell_1qtpn_137[data-align=left] ._cellContent_1qtpn_135{flex:auto}._detailsCell_1qtpn_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_1qtpn_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_1qtpn_63[data-deleted=true]{opacity:.55;text-decoration:line-through}._bodyRow_1qtpn_63[data-deleted=true] ._bodyCell_1qtpn_137:not([data-control-column=true]){pointer-events:none}._entryBlock_1qtpn_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_1qtpn_378{grid-column:1/-1;grid-template-columns:subgrid;display:grid}._pinnedTopBlock_1qtpn_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_1qtpn_391>:last-child>[role=cell]{border-bottom:2px solid var(--mantine-color-default-border)}._pinnedBottomBlock_1qtpn_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_1qtpn_404>:first-child>[role=cell]{border-top:2px solid var(--mantine-color-default-border)}._entryCell_1qtpn_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_1qtpn_275[data-control-column=true]{justify-content:center;padding:0}._entryRow_1qtpn_378[data-committed=true] ._entryCell_1qtpn_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_1qtpn_378[data-committed=true] ._entryCell_1qtpn_275[data-control-column=true]{padding:0}._rowStateIndicator_1qtpn_453{width:22px;height:22px;color:var(--mantine-color-dimmed);flex:none;justify-content:center;align-items:center;display:inline-flex}._rowStateIndicator_1qtpn_453[data-error]{color:var(--mantine-color-error)}._entryCell_1qtpn_275[data-align=right]{justify-content:flex-end}._entryCell_1qtpn_275[data-align=center]{justify-content:center}._matchHighlight_1qtpn_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_1qtpn_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_1qtpn_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_1qtpn_510[data-control-column=true]{padding:0}._summaryCell_1qtpn_510[data-align=right]{justify-content:flex-end}._summaryCell_1qtpn_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_31huy_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_31huy_1[data-align=right]{justify-content:flex-end}._headerCell_31huy_1[data-align=center]{justify-content:center}._headerCell_31huy_1[data-control-column=true]{padding:0}._headerCellFiltered_31huy_35 ._headerTitle_31huy_35{color:var(--mantine-primary-color-filled)}._headerTitle_31huy_35{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._headerCell_31huy_1[data-align=right] ._headerTitle_31huy_35{text-align:right}._headerCell_31huy_1[data-align=center] ._headerTitle_31huy_35{justify-content:center;display:flex}._headerActions_31huy_58{flex-shrink:0;align-items:center;gap:0;margin-left:auto;display:flex}._headerCell_31huy_1[data-align=right] ._headerActions_31huy_58{order:-1;margin-left:0;margin-right:auto}._headerAction_31huy_58{display:none}._headerCell_31huy_1:hover ._headerAction_31huy_58,._headerCell_31huy_1:focus-within ._headerAction_31huy_58,._headerAction_31huy_58[data-pinned-visible=true]{display:flex}._headerCellSortable_31huy_87{cursor:pointer}._sortAction_31huy_93:not([data-sorted]){opacity:.55}._sortAction_31huy_93:not([data-sorted]):hover{opacity:1}._sortIndex_31huy_103{color:var(--mantine-color-dimmed);text-align:center;min-width:10px;font-size:10px;font-weight:600;line-height:1}._headerCellDragging_31huy_115{opacity:.4}._headerCellDropBefore_31huy_119:before,._headerCellDropAfter_31huy_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_31huy_119:before{left:0}._headerCellDropAfter_31huy_120:before{right:0}._columnSeparator_31huy_140{z-index:1;justify-content:center;width:10px;height:50%;display:flex;position:absolute;top:25%;right:0;transform:translate(50%)}._headerCell_31huy_1:last-child ._columnSeparator_31huy_140{justify-content:flex-end;transform:none}._columnSeparatorResizable_31huy_162{cursor:col-resize;touch-action:none}._columnSeparator_31huy_140:after{content:"";background-color:#0000;width:1px;height:100%;transition:background-color .12s,width .12s}._headerCell_31huy_1:hover ._columnSeparator_31huy_140:after,._headerCell_31huy_1:focus-within ._columnSeparator_31huy_140:after{background-color:var(--mantine-color-default-border)}._columnSeparatorResizable_31huy_162:hover:after,._columnSeparatorActive_31huy_185:after{background-color:var(--mantine-primary-color-filled);width:2px}._menuItemActive_31huy_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/adding-rows.md

@@ -0,0 +1,132 @@
+# Adding and deleting rows
+
+Users add rows in entry rows under the header, and delete them from the edit lane or through `edit.deleteRow`.
+Under `editing.draft` both wait in the [draft store](/docs/draft-store) until Save.
+
+## Adding rows
+
+`edit.addRow()` opens an **entry row** in a sticky block under the header, so the row being typed into stays in view.
+Its cells are ordinary editors over a form seeded from `newRowDefaults`.
+A cell the row does not open, a display column or one with `meta.edit.enabled: false`, renders through the column's own `cell` renderer over the row as shown, following the form as it is typed, as it does on a body row.
+
+- Enter, or the lane's ✓, commits the row: `onRowAdd` receives it, or under `draft: true` it goes into the draft store and `saveDrafts` reports it in `created`
+- Escape, or ✕, discards it
+- clicking away decides nothing; an entry row is row-shaped in every mode
+- an entry row that was never committed is not part of a save and stays open
+
+```tsx
+useTMDataGrid({
+  editing: {
+    mode: "row",
+    draft: true,
+    newRowDefaults: () => ({ id: 0, name: "", hired: today() }),
+    onSaveDrafts: async ({ updated, created, deleted }) => {
+      await api.saveBatch({ updated, created, deleted });
+    },
+  },
+});
+
+<Button onClick={() => grid.edit.addRow()}>Add row</Button>;
+```
+
+Annotate the return type of `newRowDefaults`: a bare object literal widens a union field to `string`, and `(): Product => ({ ... })` keeps it checked.
+
+`addRow(values)` overrides `newRowDefaults` key by key: `addRow()` opens the defaults, `addRow({ department: "Sales" })` opens them with `department` filled in, and passing a whole row duplicates it.
+The seeded values are editable and validate like any other, and nothing reaches `onRowAdd` until the row is committed.
+
+A grouped column has no cell on the entry row; under the default `groupedColumnMode: "remove"` it is not in the grid at all.
+Seed it instead: `addRow({ region: "EMEA" })`.
+
+```tsx
+<Button onClick={() => grid.edit.addRow({ department: "Sales", active: true })}>
+  Add to Sales
+</Button>;
+
+<Button onClick={() => grid.edit.addRow(selected.original)}>Duplicate</Button>;
+```
+
+To limit how many entry rows are open at once, read the entry state from `edit.store` and gate the button:
+
+```tsx
+const hasOpenEntry = useSelector(grid.edit.store, (state) =>
+  state.newRows.some((newRow) => !newRow.committed),
+);
+
+<Button disabled={hasOpenEntry} onClick={() => grid.edit.addRow()}>
+  Add row
+</Button>;
+```
+
+### Committed new rows
+
+Under `draft: true` a committed entry row leaves the entry block and becomes a body row: it carries `data-new` and `data-draft`, is tinted with `--dg-row-new-bg`, and is sorted, filtered and counted with the rest on the values it was entered with.
+Set `newRowsSticky: true` to keep committed rows in the entry block until the save instead, out of the body's sort and out of the row count.
+Double-click, or the lane's pencil, reopens the row into the entry block, which takes it out of the draft store until it is committed again; ✕ removes it.
+
+### Importing rows
+
+`edit.addRows(rows)` opens a batch of entry rows in one write, where a loop over `addRow` is one write per row.
+Each row is seeded over `newRowDefaults` like `addRow`.
+`{ commit: true }` submits the rows too: rows that validate are committed, and rows that fail stay open in the entry block with their errors.
+The result, `{ ok, committed, open }`, says which went which way, so the bad rows can be reported before anything is saved.
+Every added row is in exactly one list, and `ok` is `true` when `open` is empty:
+
+```tsx
+const { ok, open } = await grid.edit.addRows(parsedRows, {
+  commit: true,
+});
+if (!ok) notify(`${open.length} rows need attention`);
+await grid.edit.saveDrafts();
+```
+
+Column rules apply even though the rows never had an editor on screen: the engine runs `meta.edit.validate` at commit.
+Under `draft: true` the whole import is one publish: the rows are validated together and land in the draft store in the same render that shows them, so ten thousand rows take about a second.
+`saveDrafts` sends them the same way.
+Without `draft: true`, `commit: true` adds each valid row through `onRowAdd`, one call per row, in the order given.
+
+```demo
+file: editing/ImportRows.tsx
+hint: Import parses the pasted rows, commits the valid ones and leaves the rest open with their errors. The second button imports ten thousand generated rows, twenty of them invalid.
+height: 460
+```
+
+## Deleting rows
+
+`edit.deleteRow(rowId)` calls `onRowDelete({ rowId, row })` at once; put any confirmation in that callback.
+Under `draft: true` it marks the row instead: the row renders struck through and inert with `data-deleted`, the lane shows Restore, and `saveDrafts` reports the id in `deleted`.
+The mark goes straight into the draft store; there is nothing to type.
+`edit.restoreRow(rowId)` removes the mark, which is what the lane's Restore calls.
+
+`deleteRow` is idempotent: deleting a marked row leaves it marked.
+On an entry row, committed or not, it discards the entry, and an unknown id is a no-op.
+`edit.deleteRows(rowIds)` does the same over a list in one call, so a selection can be passed as it stands: duplicates, marked rows and stale ids included.
+
+A marked row is read-only and not selectable until it is restored:
+
+- `begin`, `setCellValue`, `setRowValues` and `clearCell` refuse it, and the keyboard cannot open an editor on it
+- an editor open on the row when it is marked is cancelled
+- its checkbox is disabled, select-all skips it, and the mark drops it from `rowSelection`
+- it still sorts, filters, groups, aggregates and counts, and is left out of an export
+- a committed edit stays under the mark: Restore brings the row back as edited, while Save leaves the edit out of `updated`, reports the row in `deleted` only, and forgets the edit once the deletion is saved
+
+A row the engine takes out of the table, an entry row that is discarded or saved or a marked row once its deletion is saved, leaves `rowSelection`, `expanded` and `rowPinning` with it, so a saved deletion does not leave the select-all box indeterminate.
+
+The grid never modifies `data`: you apply adds and deletes, and the new rows arrive back through `data`.
+The engine's `tempId` (`__new__1`, …) does not need to become a real id; assign one when you create the record.
+
+## Reference
+
+| Name                          | Kind           | Type                                             | Default           | What it does                                                                                     |
+| ----------------------------- | -------------- | ------------------------------------------------ | ----------------- | ------------------------------------------------------------------------------------------------ |
+| `editing.newRowsSticky`       | Member         | `boolean`                                        | `false`           | `draft: true` only. Keeps committed entry rows in the sticky entry block, out of the body's sort, until the save. |
+| `editing.newRowDefaults`      | Member         | `TData \| () => TData`                           | –                 | Seeds the entry row's form.                                                                      |
+| `editing.onRowAdd`            | Callback       | `({ tempId, value }) => void \| Promise`         | –                 | Commits an added row.                                                                            |
+| `TMDataGridRowAddArgs` | Type | `{ tempId, value }` | – | What `onRowAdd` receives, and one entry of the `created` that `onSaveDrafts` receives. |
+| `editing.onRowDelete`         | Callback       | `({ rowId, row }) => void \| Promise`            | –                 | Deletes a row. Shows the trash; under `draft: true`, `onSaveDrafts` shows it too.                |
+| `TMDataGridRowDeleteArgs` | Type | `{ rowId, row }` | – | What `onRowDelete` receives. |
+| `TMDataGridAddRowsOptions` · `TMDataGridAddRowsResult` | Types | `{ commit? }` · `{ ok, committed, open }` | – | What `edit.addRows` takes as its options, and what it resolves. |
+| `--dg-entry-height`           | CSS variable   | length                                           | From `size`       | Height of the sticky entry block.                                                                |
+| `--dg-row-new-bg`             | CSS variable   | color                                            | Green tint        | Background of a committed new row, in the body or the entry block.                               |
+| `data-deleted`                | Data attribute | –                                                | –                 | On a row marked for deletion under `draft: true`.                                                |
+| `data-new`                    | Data attribute | –                                                | –                 | On a body row that is a committed new row, and on an entry row.                                  |
+| `data-committed`              | Data attribute | –                                                | –                 | On an entry row once it is committed, awaiting the save. Seen only under `newRowsSticky`.        |

package/docs/anatomy.md

@@ -0,0 +1,119 @@
+# 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/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.
+While a column is grouped, paging is suspended and the body holds the group rows and the leaves of open groups.
+Rows [pinned](/docs/row-pinning) to an edge render in their own blocks, outside the body's list.
+
+`getDisplayedRows(table, features)` returns the rows the body renders, in render order: the current page when paging is active, every filtered and sorted row otherwise, with pinned rows left out.
+Use it for a renderer of your own, or for the rows that a cell range's `bounds` count into - see [Cell selection](/docs/cell-selection#export-the-range-from-your-own-code).
+In a component, call it inside a selector with a shallow compare, so the rows follow sorting, filtering and paging:
+
+```tsx
+import { useSelector } from "@tanstack/react-store";
+import { shallow } from "@tanstack/store";
+
+const { table, features } = useTMDataGridContext();
+const rows = useSelector(table.store, () => getDisplayedRows(table, features), {
+  compare: shallow,
+});
+```
+
+## 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.                     |
+| `getDisplayedRows`                                                                   | Export    | `(table, features) => Array<Row>` | –    | The rows the body renders: the current page when paging is active, pinned rows left out. |
+| `TMDataGridApi` · `TMDataGridTable` · `TMDataGridUiStore` · `TMDataGridFeatureFlags` | Exports   | types                          | –       | The hook's result and its parts.                     |

package/docs/card-view.md

@@ -0,0 +1,108 @@
+# A card view
+
+The same rows as a grid, rendered as cards.
+`useTMDataGrid` and `TMDataGrid` stay; `TMDataGrid.Table` is replaced by a virtualized list of Mantine `Card`s.
+Search, filters, sorting, column visibility and row selection all write the same table state the grid would.
+
+```demo
+file: recipes/CardView.tsx
+hint: Search, sort by Salary, or hide Location in the menu - every card follows. 5 000 rows, a few dozen cards mounted.
+height: 640
+```
+
+## Keep the root, replace the Table
+
+`TMDataGrid` provides the grid through context and renders no rows of its own.
+Every part except `TMDataGrid.Table` works without the Table, so the toolbar stays as it is:
+
+```tsx
+const grid = useTMDataGrid({
+  data,
+  columns,
+  getRowId: (row) => String(row.id),
+  filters: { surface: "none" },
+});
+
+<TMDataGrid {...grid}>
+  <TMDataGrid.Toolbar>
+    <TMDataGrid.Search />
+    <TMDataGrid.SummaryCount />
+    <TMDataGrid.Menu>
+      <TMDataGrid.Menu.Columns />
+    </TMDataGrid.Menu>
+  </TMDataGrid.Toolbar>
+  <TMDataGrid.FilterPanel layout="stacked" />
+  <CardList table={grid.table} />
+</TMDataGrid>;
+```
+
+The following belong to `TMDataGrid.Table` and are not available without it:
+
+- the header, with click-to-sort, resizing, dragging and the column menus
+- the filter popup and sidebar - set `filters.surface` to `"none"` and place [TMDataGrid.FilterPanel](/docs/filtering#tmdatagridfilterpanel) yourself
+- row details, row pinning, cell selection and editing in cells
+- `scrollToRow`, which returns `false` while no Table is mounted
+
+The demo replaces the header's sorting with a `Select` that calls `table.setSorting`.
+
+## Read the rows
+
+[`getDisplayedRows`](/docs/anatomy#which-rows-it-renders) returns the rows the Table would render: filtered, sorted, and the current page when paging is on.
+Call it inside `useSelector(table.store, …)` with a shallow compare:
+
+```tsx
+const rows = useSelector(table.store, () => getDisplayedRows(table, features), {
+  compare: shallow,
+});
+```
+
+The table identity never changes, so the React Compiler caches a bare call and the list stops following filters and sorting.
+The shallow compare re-renders the list only when the rows change.
+
+## Virtualize lines of cards
+
+The virtualizer works on lines, not cards: one virtual item is one line of `perLine` cards, and `perLine` follows the width of the scroll container.
+
+```tsx
+const perLine = Math.max(1, Math.floor((width + GAP) / (MIN_CARD_WIDTH + GAP)));
+
+const virtualizer = useVirtualizer({
+  count: Math.ceil(rows.length / perLine),
+  getScrollElement: () => scrollRef.current,
+  estimateSize: () => CARD_HEIGHT + GAP,
+});
+```
+
+Each line is a CSS grid of `perLine` columns, positioned at the virtual item's `start`.
+The cards have a fixed height, so `estimateSize` is exact and no line has to be measured.
+
+## Reuse the column definitions
+
+A card renders its fields from `row.getVisibleCells()`, through the column's own `cell` renderer:
+
+```tsx
+const cells = useSelector(table.store, () => row.getVisibleCells());
+
+cells.map((cell) => (
+  <Group key={cell.id} justify="space-between">
+    <Text c="dimmed">{getColumnLabel(cell.column)}</Text>
+    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+  </Group>
+));
+```
+
+- `getColumnLabel` returns the column's `meta.label` or `header`
+- the `cell` renderer is the one the grid uses, so the salary and the status badge look the same in both views
+- hiding a column with `TMDataGrid.Menu.Columns` removes its line from every card
+
+Filter out generated columns with `isGeneratedColumn(cell.column.id)`; the checkbox column is in `getVisibleCells()` while row selection is on.
+
+## Select a card
+
+Subscribe each card to its own selection, so selecting one card re-renders that card only:
+
+```tsx
+const selected = useSelector(table.store, (state) => state.rowSelection[row.id] === true);
+
+<Checkbox checked={selected} onChange={() => row.toggleSelected()} />;
+```

package/docs/cell-selection.md

@@ -0,0 +1,194 @@
+# 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/adding-rows#importing-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).
+
+### Export the range from your own code
+
+`resolveRangeBounds` turns `ui.state.cellRange` into the `bounds` that `buildExportData` takes: the rectangle as row and column indices, both ends included.
+The row indices count into the rows the body renders, from [`getDisplayedRows`](/docs/anatomy#which-rows-it-renders), and the column indices into the visible leaf columns in render order, start-pinned, center and end-pinned, the generated lanes included.
+It returns `null` when there is no range, and when a corner's row is filtered out or its column hidden.
+
+To export the selected range from a control of your own, pass the same rows to `buildExportData` and write the result in any format:
+
+```tsx
+const exportRange = async () => {
+  const { table, features, ui } = grid;
+  const rows = getDisplayedRows(table, features);
+  const columns = [
+    ...table.getStartVisibleLeafColumns(),
+    ...table.getCenterVisibleLeafColumns(),
+    ...table.getEndVisibleLeafColumns(),
+  ];
+  const bounds = resolveRangeBounds({
+    range: ui.state.cellRange,
+    rowIndexOf: (rowId) => rows.findIndex((row) => row.id === rowId),
+    columnIndexOf: (columnId) =>
+      columns.findIndex((column) => column.id === columnId),
+  });
+  if (bounds === null) return;
+
+  const data = buildExportData({ table, rows, bounds });
+  await writeExportFile(
+    data,
+    resolveExportOptions({ format: csvFormat(), fileName: "selection" }),
+  );
+};
+```
+
+`buildExportData` leaves out the generated lanes and every column with `meta.enableExport: false`, as the Export cells item does.
+Unlike the Export cells item, `resolveRangeBounds` does not fall back to the focused cell when there is no range.
+
+## Reference
+
+| Name | Kind | Type | Default | What it does |
+| --- | --- | --- | --- | --- |
+| `cellSelection` | Option | `"none" \| "single" \| "range"` | `"none"` | Turns the cell cursor, and the rectangle, on. |
+| `TMDataGridCellSelectionMode` | Type | – | – | The type of `cellSelection`. |
+| `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. |
+| `TMDataGridClipboardTextOptions` | Type | `{ decimalComma?, escapeFormulas? }` | – | The options of `toClipboardText`. |
+| `buildExportData` | Export | `({ table, rows, bounds }) => TMDataGridExportData` | – | The rectangle's values, with `bounds`. |
+| `resolveRangeBounds` | Export | `({ range, rowIndexOf, columnIndexOf }) => TMDataGridRangeBounds \| null` | – | The range as row and column indices, the `bounds` that `buildExportData` takes. `null` when a corner is filtered out or hidden. See [Export the range from your own code](#export-the-range-from-your-own-code). |
+| `ResolveRangeBoundsArgs` · `TMDataGridRangeBounds` | Types | – · `{ top, bottom, left, right }` | – | What `resolveRangeBounds` takes, and what it returns. |
+| `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. |