@jielga/tmdatagrid 2.0.1 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -1,2 +1,2 @@
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_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)}
1
+ ._root_wlqnb_8[data-size=xs]{--dg-row-height:34px;--dg-header-height:32px;--dg-font-size:var(--mantine-font-size-xs);--dg-padding:6px}._root_wlqnb_8[data-size=sm]{--dg-row-height:42px;--dg-header-height:38px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:8px}._root_wlqnb_8[data-size=md]{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px}._root_wlqnb_8[data-size=lg]{--dg-row-height:62px;--dg-header-height:52px;--dg-font-size:var(--mantine-font-size-md);--dg-padding:14px}._root_wlqnb_8[data-size=xl]{--dg-row-height:72px;--dg-header-height:60px;--dg-font-size:var(--mantine-font-size-lg);--dg-padding:18px}._root_wlqnb_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-header-font-size:var(--dg-font-size);--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_18ma1_1{padding:0 var(--dg-padding);min-width:0;min-height:var(--dg-header-height);font-weight:600;font-size:var(--dg-header-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_18ma1_1[data-align=right]{justify-content:flex-end}._headerCell_18ma1_1[data-align=center]{justify-content:center}._headerCell_18ma1_1[data-control-column=true]{padding:0}._headerCellFiltered_18ma1_35 ._headerTitle_18ma1_35{color:var(--mantine-primary-color-filled)}._headerTitle_18ma1_35{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._headerCell_18ma1_1[data-align=right] ._headerTitle_18ma1_35{text-align:right}._headerCell_18ma1_1[data-align=center] ._headerTitle_18ma1_35{justify-content:center;display:flex}._headerActions_18ma1_58{flex-shrink:0;align-items:center;gap:0;margin-left:auto;display:flex}._headerCell_18ma1_1[data-align=right] ._headerActions_18ma1_58{order:-1;margin-left:0;margin-right:auto}._headerAction_18ma1_58{display:none}._headerCell_18ma1_1:hover ._headerAction_18ma1_58,._headerCell_18ma1_1:focus-within ._headerAction_18ma1_58,._headerAction_18ma1_58[data-pinned-visible=true]{display:flex}._headerCellSortable_18ma1_87{cursor:pointer}._sortAction_18ma1_93:not([data-sorted]){opacity:.55}._sortAction_18ma1_93:not([data-sorted]):hover{opacity:1}._sortIndex_18ma1_103{color:var(--mantine-color-dimmed);text-align:center;min-width:10px;font-size:10px;font-weight:600;line-height:1}._headerCellDragging_18ma1_115{opacity:.4}._headerCellDropBefore_18ma1_119:before,._headerCellDropAfter_18ma1_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_18ma1_119:before{left:0}._headerCellDropAfter_18ma1_120:before{right:0}._columnSeparator_18ma1_140{z-index:1;justify-content:center;width:10px;height:50%;display:flex;position:absolute;top:25%;right:0;transform:translate(50%)}._headerCell_18ma1_1:last-child ._columnSeparator_18ma1_140{justify-content:flex-end;transform:none}._columnSeparatorResizable_18ma1_162{cursor:col-resize;touch-action:none}._columnSeparator_18ma1_140:after{content:"";background-color:#0000;width:1px;height:100%;transition:background-color .12s,width .12s}._headerCell_18ma1_1:hover ._columnSeparator_18ma1_140:after,._headerCell_18ma1_1:focus-within ._columnSeparator_18ma1_140:after{background-color:var(--mantine-color-default-border)}._columnSeparatorResizable_18ma1_162:hover:after,._columnSeparatorActive_18ma1_185:after{background-color:var(--mantine-primary-color-filled);width:2px}._menuItemActive_18ma1_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)}
2
2
  /*$vite$:1*/
@@ -160,7 +160,7 @@ const { resetSettings } = useTMDataGrid({ data, columns });
160
160
  | Name | Kind | Type | Default | What it does |
161
161
  | --- | --- | --- | --- | --- |
162
162
  | `enableHiding` | Table option | `boolean` | `true` | Also a column option. `false` removes hiding entirely. |
163
- | `enableColumnPinning` | Table option | `boolean` | `true` | `false` removes the pin menu items. |
163
+ | `enableColumnPinning` | Table option | `boolean` | `true` | `false` removes the pin menu items. The generated lanes stay pinned. |
164
164
  | `enablePinning` | Column option | `boolean` | `true` | `false` for one column. |
165
165
  | `enableColumnOrdering` | Option | `boolean` | `true` | Header dragging and the move menu items. Grid-defined. |
166
166
  | `meta.enableOrdering` | Column meta | `boolean` | `true` | `false` keeps one column where it is. |
@@ -26,13 +26,21 @@ scrollbar accurate for rows that open off screen.
26
26
 
27
27
  ## The details lane
28
28
 
29
- Setting `renderDetails` prepends a generated chevron column,
30
- `DETAILS_COLUMN_ID` (`"__details__"`), pinned to the left after the checkbox
31
- and tree columns - `[checkbox, tree, details, …]`.
29
+ Setting `renderDetails` adds a generated chevron column, `DETAILS_COLUMN_ID`
30
+ (`"__details__"`). By default it is pinned to the left after the checkbox and
31
+ tree columns - `[checkbox, tree, details, …]`. To pin it to the right edge
32
+ instead, after every column of yours and inside the edit lane, set
33
+ `detailsColumnPosition: "right"`:
32
34
 
33
- It is a system lane: as wide as the chevron it holds, with no resize handle and
34
- no column menu, and it cannot be hidden, moved, resized or unpinned. Its header
35
- is a control rather than a title, expanding and collapsing every panel at once.
35
+ ```demo
36
+ file: rows/DetailsPanelRight.tsx
37
+ hint: The chevron sits at the end of each row, and the header control at the end of the header.
38
+ ```
39
+
40
+ On either edge it is a system lane: as wide as the chevron it holds, with no
41
+ resize handle and no column menu, and it cannot be hidden, moved, resized or
42
+ unpinned. Its header is a control rather than a title, expanding and collapsing
43
+ every panel at once.
36
44
 
37
45
  Group rows get no chevron: they expand into their children from the tree lane.
38
46
 
@@ -106,6 +114,7 @@ Group rows have no panel. Expanding one opens its children.
106
114
  | `renderDetails` | Option | `({ row, table }) => ReactNode` | – | Contents of the panel. Setting it adds the lane. |
107
115
  | `TMDataGridDetailsArgs` | Type | `{ row, table }` | – | What `renderDetails` receives. |
108
116
  | `renderDetailsEstHeight` | Option | `number` | `160` | Height the virtualizer assumes for an unmeasured panel. |
117
+ | `detailsColumnPosition` | Option | `"left" \| "right"` | `"left"` | Which edge the lane is pinned to. `"right"` places it after every column, inside the edit lane. |
109
118
  | `initialState.expanded` | Table option | `ExpandedState` | `{}` | Rows open at mount. A data slice, so it persists. |
110
119
  | `autoResetExpanded` | Table option | `boolean` | `false` | `true` closes the panels when the `data` array changes. Off by default, so a draft commit keeps them open. |
111
120
  | `DETAILS_COLUMN_ID` | Export | `"__details__"` | – | Id of the generated chevron column. |
package/docs/styling.md CHANGED
@@ -51,7 +51,8 @@ The wrapper components - `Toolbar`, `Spacer`, `Footer`, `FilterPanel`, `FilterPi
51
51
  | `--dg-header-height` | From `size` | Header row height |
52
52
  | `--dg-summary-height` | From `size` | [Summary row](/docs/summary-row) height |
53
53
  | `--dg-entry-height` | From `size` | The sticky [entry block](/docs/adding-rows#adding-rows) |
54
- | `--dg-font-size` | From `size` | Cell and header font size |
54
+ | `--dg-font-size` | From `size` | Cell font size. The header follows it unless `--dg-header-font-size` is set. |
55
+ | `--dg-header-font-size` | `--dg-font-size` | Header font size |
55
56
  | `--dg-padding` | From `size` | Horizontal cell padding. The generated lanes are excluded: they are fixed 36px tracks that centre their control. |
56
57
  | `--dg-radius` | `--mantine-radius-md` | The frame's corner radius. `0` squares the grid off. The root clips its overflow, so the header and the last row follow it. |
57
58
 
@@ -36,7 +36,7 @@ rather than forwarded to TanStack.
36
36
  | `enableSorting` | `boolean` | `true` | Enables sorting for the table. |
37
37
  | `enableColumnFilters` | `boolean` | `true` | Enables filtering for the table. |
38
38
  | `enableHiding` | `boolean` | `true` | Enables column visibility for the table. |
39
- | `enableColumnPinning` | `boolean` | `true` | Enables pinning for the table. |
39
+ | `enableColumnPinning` | `boolean` | `true` | Enables pinning for the table. `false` removes the pin menu items; the generated lanes stay pinned. |
40
40
  | `enableColumnResizing` | `boolean` | `true` | Enables resizing for the table. |
41
41
  | `enableColumnOrdering` | `boolean` | `true` | Enables header dragging and the move menu items. Defined by the grid, see [Column layout](/docs/column-layout#ordering). |
42
42
  | `enablePagination` | `boolean` | `false` | Enables client-side paging and the `Footer` pager. Implied by `manualPagination`. Defined by the grid, see [Pagination](/docs/pagination). |
@@ -46,6 +46,7 @@ rather than forwarded to TanStack.
46
46
  | `enableMatchHighlighting` | `boolean` | `false` | Cells mark the matched text while a contains-family filter or the quick search is active. Defined by the grid, see [Quick search](/docs/quick-search#match-highlighting). |
47
47
  | `renderDetails` | `({ row, table }) => ReactNode` | – | Panel rendered under an expanded row, spanning every column. Setting it turns row details on and adds the pinned chevron lane. Defined by the grid, see [Row details](/docs/row-details). |
48
48
  | `renderDetailsEstHeight` | `number` | `160` | What the virtualizer assumes for a panel it has not measured yet. Panels are measured once mounted, so an approximation is enough. |
49
+ | `detailsColumnPosition` | `"left" \| "right"` | `"left"` | Which edge the details lane is pinned to. `"right"` places it after every column, inside the edit lane. Defined by the grid, see [Row details](/docs/row-details). |
49
50
  | `cellSelection` | `"none" \| "single" \| "range"` | `"none"` | Cell cursor and, under `"range"`, a selectable rectangle with Ctrl+C and CSV export. Defined by the grid, see [Cell selection](/docs/cell-selection). |
50
51
  | `onFocusedCellChange` | `(cell: TMDataGridCellPosition \| null) => void` | – | Called whenever the focused cell moves, by key, click or `setFocusedCell`. |
51
52
  | `overscan` | `number` | `6` | Rows the virtualizer keeps mounted above and below the viewport. Raise it if fast scrolling flashes blank rows, lower it when rows are expensive to render. |
@@ -63,7 +64,8 @@ rather than forwarded to TanStack.
63
64
  | Slice | Default |
64
65
  | --- | --- |
65
66
  | `pagination` | `{ pageIndex: 0, pageSize: 25 }`. Inert until pagination is enabled |
66
- | `columnPinning.start` | The checkbox, tree and details columns, followed by any columns you provide |
67
+ | `columnPinning.start` | The row number, checkbox, tree and details columns, followed by any columns you provide. The details column moves to `end` under `detailsColumnPosition: "right"` |
68
+ | `columnPinning.end` | Any columns you provide, then the details column under `detailsColumnPosition: "right"`, then the edit column |
67
69
  | `globalFilterFn` | `"tmDataGridFuzzy"`, the fuzzy matcher behind `quickSearchMode`. `"includesString"` under `quickSearchMode: "contains"` |
68
70
 
69
71
  ### Controlled state
@@ -359,3 +361,4 @@ to off; ordering, like the options around it, defaults to on.
359
361
  | `enableMatchHighlighting: true` | Table | Opt-in: cells mark the matched text while a contains-family filter or the quick search is active. See [Quick search](/docs/quick-search#match-highlighting) |
360
362
  | `enableGrouping: false` | Table, column | Group by and Ungroup menu items. See [Grouping](/docs/grouping) |
361
363
  | `renderDetails` | Table | Opt-in: adds the details lane, and an expanded row opens a panel underneath it. See [Row details](/docs/row-details) |
364
+ | `detailsColumnPosition: "right"` | Table | The details lane on the right edge, inside the edit lane, instead of the left. See [Row details](/docs/row-details) |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jielga/tmdatagrid",
3
- "version": "2.0.1",
3
+ "version": "2.1.1",
4
4
  "description": "A React data grid built on TanStack Table v9 and Mantine - always virtualized, with resizable, reorderable, sortable, filterable, hideable and pinnable columns.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -76,31 +76,31 @@
76
76
  },
77
77
  "devDependencies": {
78
78
  "@babel/core": "^7.29.7",
79
- "@mantine/core": "^9.4.0",
80
- "@rolldown/plugin-babel": "^0.2.3",
79
+ "@mantine/core": "^9.4.2",
80
+ "@rolldown/plugin-babel": "^0.2.4",
81
81
  "@tabler/icons-react": "^3.46.0",
82
82
  "@tanstack/intent": "0.3.6",
83
- "@tanstack/react-form": "^1.33.2",
84
- "@tanstack/react-store": "^0.11.1",
83
+ "@tanstack/react-form": "^1.33.5",
84
+ "@tanstack/react-store": "^0.11.2",
85
85
  "@tanstack/react-table": "^9.2.4",
86
- "@tanstack/react-virtual": "^3.14.4",
87
- "@tanstack/store": "^0.11.1",
86
+ "@tanstack/react-virtual": "^3.14.14",
87
+ "@tanstack/store": "^0.11.2",
88
88
  "@tanstack/table-core": "^9.2.4",
89
89
  "@testing-library/jest-dom": "^7.0.0",
90
90
  "@testing-library/react": "^16.3.2",
91
- "@testing-library/user-event": "^14.6.1",
91
+ "@testing-library/user-event": "^14.6.7",
92
92
  "@types/babel__core": "^7.20.5",
93
- "@types/react": "^19.2.17",
94
- "@types/react-dom": "^19.2.3",
95
- "@vitejs/plugin-react": "^6.0.4",
93
+ "@types/react": "^19.2.18",
94
+ "@types/react-dom": "^19.2.7",
95
+ "@vitejs/plugin-react": "^6.0.5",
96
96
  "babel-plugin-react-compiler": "^1.0.0",
97
97
  "jsdom": "^29.1.1",
98
- "react": "^19.2.7",
99
- "react-dom": "^19.2.7",
98
+ "react": "^19.2.8",
99
+ "react-dom": "^19.2.8",
100
100
  "rolldown": "~1.1.5",
101
101
  "rolldown-plugin-dts": "^0.27.14",
102
102
  "typescript": "~7.0.2",
103
- "vite": "^8.1.5",
103
+ "vite": "^8.1.6",
104
104
  "vitest": "^4.1.10",
105
105
  "zod": "^4.4.3"
106
106
  }
@@ -18,7 +18,7 @@ description: >
18
18
  metadata:
19
19
  type: core
20
20
  library: '@jielga/tmdatagrid'
21
- library_version: '2.0.1'
21
+ library_version: '2.1.1'
22
22
  sources:
23
23
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/styling.md'
24
24
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/toolbar.md'
@@ -67,6 +67,8 @@ provider.
67
67
 
68
68
  **Metrics:** `--dg-row-height`, `--dg-header-height`, `--dg-summary-height`,
69
69
  `--dg-entry-height`, `--dg-font-size`, `--dg-padding`. All default from `size`.
70
+ `--dg-header-font-size` defaults to `--dg-font-size`; set it to give the header
71
+ a text size of its own.
70
72
  The generated lanes are excluded from padding: they are fixed 36px tracks that
71
73
  centre their control.
72
74
 
@@ -14,7 +14,7 @@ description: >
14
14
  metadata:
15
15
  type: core
16
16
  library: '@jielga/tmdatagrid'
17
- library_version: '2.0.1'
17
+ library_version: '2.1.1'
18
18
  sources:
19
19
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/cell-selection.md'
20
20
  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/core/cellNavigation.ts'
@@ -16,7 +16,7 @@ description: >
16
16
  metadata:
17
17
  type: core
18
18
  library: '@jielga/tmdatagrid'
19
- library_version: '2.0.1'
19
+ library_version: '2.1.1'
20
20
  sources:
21
21
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/columns.md'
22
22
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/column-layout.md'
@@ -280,14 +280,15 @@ browser's own menu comes up there instead.
280
280
 
281
281
  The grid prepends and appends lanes of its own, in this order: row number,
282
282
  checkbox, tree, details, your columns, edit. Each appears only when its feature
283
- asks for it.
283
+ asks for it. Under `detailsColumnPosition: "right"`, details sits between your
284
+ columns and edit.
284
285
 
285
286
  | Lane | Id | Appears when |
286
287
  | --- | --- | --- |
287
288
  | Row number | `ROW_NUMBER_COLUMN_ID` | `enableRowNumbers: true` |
288
289
  | Checkbox | `SELECT_COLUMN_ID` | Selection is on and the mode has checkboxes |
289
290
  | Tree | `GROUP_COLUMN_ID` | A column is grouped |
290
- | Details | `DETAILS_COLUMN_ID` | `renderDetails` is set |
291
+ | Details | `DETAILS_COLUMN_ID` | `renderDetails` is set; on the left by default, on the right under `detailsColumnPosition: "right"` |
291
292
  | Edit | `EDIT_COLUMN_ID` | Row mode, `editing.draft`, or `editing.onRowDelete` |
292
293
 
293
294
  They are structural: fixed width, no column menu, and they cannot be sorted,
@@ -18,7 +18,7 @@ description: >
18
18
  metadata:
19
19
  type: core
20
20
  library: '@jielga/tmdatagrid'
21
- library_version: '2.0.1'
21
+ library_version: '2.1.1'
22
22
  sources:
23
23
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/pagination.md'
24
24
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/scrolling.md'
@@ -18,7 +18,7 @@ description: >
18
18
  metadata:
19
19
  type: core
20
20
  library: '@jielga/tmdatagrid'
21
- library_version: '2.0.1'
21
+ library_version: '2.1.1'
22
22
  sources:
23
23
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/editing.md'
24
24
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/draft-store.md'
@@ -18,7 +18,7 @@ description: >
18
18
  metadata:
19
19
  type: core
20
20
  library: '@jielga/tmdatagrid'
21
- library_version: '2.0.1'
21
+ library_version: '2.1.1'
22
22
  sources:
23
23
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/filtering.md'
24
24
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/quick-search.md'
@@ -13,7 +13,7 @@ description: >
13
13
  metadata:
14
14
  type: core
15
15
  library: '@jielga/tmdatagrid'
16
- library_version: '2.0.1'
16
+ library_version: '2.1.1'
17
17
  sources:
18
18
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/getting-started.md'
19
19
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/anatomy.md'
@@ -14,7 +14,7 @@ description: >
14
14
  metadata:
15
15
  type: core
16
16
  library: '@jielga/tmdatagrid'
17
- library_version: '2.0.1'
17
+ library_version: '2.1.1'
18
18
  sources:
19
19
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/grouping.md'
20
20
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/summary-row.md'
@@ -15,7 +15,7 @@ description: >
15
15
  metadata:
16
16
  type: lifecycle
17
17
  library: '@jielga/tmdatagrid'
18
- library_version: '2.0.1'
18
+ library_version: '2.1.1'
19
19
  sources:
20
20
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/migrating-to-2.md'
21
21
  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/index.ts'
@@ -14,7 +14,7 @@ description: >
14
14
  metadata:
15
15
  type: core
16
16
  library: '@jielga/tmdatagrid'
17
- library_version: '2.0.1'
17
+ library_version: '2.1.1'
18
18
  sources:
19
19
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/use-tm-data-grid.md'
20
20
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/persistence.md'
@@ -57,7 +57,7 @@ rather than forwarded to TanStack.
57
57
  | `enableSorting` | `boolean` | `true` | Enables sorting for the table. |
58
58
  | `enableColumnFilters` | `boolean` | `true` | Enables filtering for the table. |
59
59
  | `enableHiding` | `boolean` | `true` | Enables column visibility for the table. |
60
- | `enableColumnPinning` | `boolean` | `true` | Enables pinning for the table. |
60
+ | `enableColumnPinning` | `boolean` | `true` | Enables pinning for the table. `false` removes the pin menu items; the generated lanes stay pinned. |
61
61
  | `enableColumnResizing` | `boolean` | `true` | Enables resizing for the table. |
62
62
  | `enableColumnOrdering` | `boolean` | `true` | Enables header dragging and the move menu items. Defined by the grid. |
63
63
  | `enablePagination` | `boolean` | `false` | Enables client-side paging and the `Footer` pager. Implied by `manualPagination`. Defined by the grid. |
@@ -9,15 +9,15 @@ description: >
9
9
  onCellDoubleClick / onCellContextMenu, the renderRowContextMenu slot with its
10
10
  internalItems handback, renderColumnMenuItems and rowContextMenuProps, per-row
11
11
  styling with rowStyle, rowClassName, striped and the --row-bg rule, the row
12
- details panel through renderDetails and DETAILS_COLUMN_ID, row pinning with
13
- enableRowPinning and row.pin, and the row-number gutter through
14
- enableRowNumbers. Load when selecting rows, reacting to a click, opening a
15
- detail panel, colouring rows by their data, pinning rows to an edge, or
16
- numbering them.
12
+ details panel through renderDetails, detailsColumnPosition and
13
+ DETAILS_COLUMN_ID, row pinning with enableRowPinning and row.pin, and the
14
+ row-number gutter through enableRowNumbers. Load when selecting rows, reacting
15
+ to a click, opening a detail panel, colouring rows by their data, pinning rows
16
+ to an edge, or numbering them.
17
17
  metadata:
18
18
  type: core
19
19
  library: '@jielga/tmdatagrid'
20
- library_version: '2.0.1'
20
+ library_version: '2.1.1'
21
21
  sources:
22
22
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/row-selection.md'
23
23
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/row-interaction.md'
@@ -235,8 +235,9 @@ const grid = useTMDataGrid({
235
235
  Each panel is measured, so heights need not be uniform.
236
236
  `renderDetailsEstHeight` (default `160`) is what the virtualizer assumes for one
237
237
  it has not measured yet. A generated chevron column, `DETAILS_COLUMN_ID`, is
238
- prepended and pinned left after the checkbox and tree lanes; it cannot be
239
- hidden, moved, resized or unpinned, and its header opens and closes every panel.
238
+ pinned left after the checkbox and tree lanes, or right, inside the edit lane,
239
+ under `detailsColumnPosition: "right"`; it cannot be hidden, moved, resized or
240
+ unpinned, and its header opens and closes every panel.
240
241
 
241
242
  Which rows are open is TanStack's own `expanded` state, so anything can open
242
243
  one - `row.toggleExpanded()` from a menu item, `initialState.expanded`,
@@ -81,8 +81,9 @@ Row data attributes:
81
81
  | --- | --- | --- | --- | --- |
82
82
  | `renderDetails` | Option | `TMDataGridDetailsRenderer`: `(args: TMDataGridDetailsArgs) => ReactNode` | – | Contents of the panel. Setting it adds the lane. `TMDataGridDetailsArgs` is `{ row, table }`. |
83
83
  | `renderDetailsEstHeight` | Option | `number` | `160` | Height the virtualizer assumes for an unmeasured panel. |
84
+ | `detailsColumnPosition` | Option | `"left" \| "right"` | `"left"` | Which edge the lane is pinned to. `"right"` places it after every column, inside the edit lane. |
84
85
  | `initialState.expanded` | Table option | `ExpandedState` | `{}` | Rows open at mount. A `data` slice, so it persists. |
85
- | `autoResetExpanded` | Table option | `boolean` | `true` | `false` keeps panels open when `data` changes. |
86
+ | `autoResetExpanded` | Table option | `boolean` | `false` | `true` closes the panels when the `data` array changes. Off by default, so a draft commit keeps them open. |
86
87
  | `DETAILS_COLUMN_ID` | Export | `"__details__"` | – | Id of the generated chevron column. |
87
88
  | `resolveExpandAll` | Export | `(args) => ExpandedState` | – | Expand or collapse every group, or every panel, but not both. |
88
89
  | `areAllRowsExpanded` | Export | `(args) => boolean` | – | Whether every row of one target is open. |
@@ -119,4 +120,5 @@ table.setExpanded(
119
120
  | `ROW_NUMBER_COLUMN_ID` | Export | `"__rowNumber__"` | – | Id of the generated number gutter. |
120
121
 
121
122
  Lane order, left to right: row number, checkbox, tree, details, your columns,
122
- edit.
123
+ edit. Under `detailsColumnPosition: "right"`, details sits between your columns
124
+ and edit.
@@ -15,7 +15,7 @@ description: >
15
15
  metadata:
16
16
  type: core
17
17
  library: '@jielga/tmdatagrid'
18
- library_version: '2.0.1'
18
+ library_version: '2.1.1'
19
19
  sources:
20
20
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/server-side.md'
21
21
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/server-query.md'
@@ -13,7 +13,7 @@ description: >
13
13
  metadata:
14
14
  type: core
15
15
  library: '@jielga/tmdatagrid'
16
- library_version: '2.0.1'
16
+ library_version: '2.1.1'
17
17
  sources:
18
18
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/testing.md'
19
19
  - 'Jielga/TMDataGrid:playwright/support/DataGrid.ts'
@@ -12,7 +12,7 @@ description: >
12
12
  metadata:
13
13
  type: core
14
14
  library: '@jielga/tmdatagrid'
15
- library_version: '2.0.1'
15
+ library_version: '2.1.1'
16
16
  sources:
17
17
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/testing.md'
18
18
  - 'Jielga/TMDataGrid:packages/tmdatagrid/test/gallery/main.tsx'
@@ -12,7 +12,7 @@ description: >
12
12
  metadata:
13
13
  type: core
14
14
  library: '@jielga/tmdatagrid'
15
- library_version: '2.0.1'
15
+ library_version: '2.1.1'
16
16
  sources:
17
17
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/testing.md'
18
18
  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/editing.md'
@@ -51,6 +51,11 @@
51
51
  --dg-header-height: 44px;
52
52
  --dg-font-size: var(--mantine-font-size-sm);
53
53
  --dg-padding: 10px;
54
+ /* The header's font size. Resolved on the root, so it follows whatever
55
+ `--dg-font-size` the scale or an override gives the cells, until set on
56
+ its own:
57
+ <TMDataGrid style={{ "--dg-header-font-size": "var(--mantine-font-size-md)" }} /> */
58
+ --dg-header-font-size: var(--dg-font-size);
54
59
  /* Background of a selected row, when `showSelectedBackground` is on. Override
55
60
  it on the grid:
56
61
  <TMDataGrid style={{ "--dg-row-selected-bg": "var(--mantine-color-blue-0)" }} /> */
@@ -7,7 +7,7 @@
7
7
  min-width: 0;
8
8
  min-height: var(--dg-header-height);
9
9
  font-weight: 600;
10
- font-size: var(--dg-font-size);
10
+ font-size: var(--dg-header-font-size);
11
11
  background-color: var(--mantine-color-body);
12
12
  border-bottom: 1px solid var(--mantine-color-default-border);
13
13
  user-select: none;
@@ -159,9 +159,9 @@ function keepColumnInView({
159
159
  * | ---- | ------- |
160
160
  * | On a data row | the column's `cell`, as always |
161
161
  * | Placeholder - a grouped column other than this row's own | nothing |
162
- * | Aggregated, column declares `aggregatedCell` | that |
163
- * | Aggregated, column declares an `aggregationFn` | the column's `cell`, over the aggregate |
164
- * | Aggregated, column declares neither | nothing |
162
+ * | Group summary, column declares `aggregatedCell` | that |
163
+ * | Group summary, column declares an `aggregationFn` | the column's `cell`, over the aggregate |
164
+ * | Group summary, column declares neither | nothing |
165
165
  *
166
166
  * That last row is the one worth spelling out. Without an aggregation function
167
167
  * `getValue()` is `undefined` on a group row, so the column's own renderer
@@ -174,17 +174,31 @@ function renderCellContent(
174
174
  cell: Cell<TMDataGridFeatures, TMDataGridRowData, unknown>,
175
175
  ) {
176
176
  if (cell.getIsPlaceholder()) return null;
177
- if (!cell.getIsAggregated()) {
177
+ if (!isGroupSummaryCell(cell)) {
178
178
  return flexRender(cell.column.columnDef.cell, cell.getContext());
179
179
  }
180
- const { aggregatedCell, aggregationFn } = cell.column.columnDef;
180
+ const { aggregatedCell } = cell.column.columnDef;
181
181
  if (aggregatedCell !== undefined) {
182
182
  return flexRender(aggregatedCell, cell.getContext());
183
183
  }
184
- if (aggregationFn === undefined) return null;
184
+ if (!cell.getIsAggregated()) return null;
185
185
  return flexRender(cell.column.columnDef.cell, cell.getContext());
186
186
  }
187
187
 
188
+ /**
189
+ * A cell on a group row in any column but the one the row groups by - the
190
+ * cells that summarise the group rather than show a record.
191
+ *
192
+ * Not `cell.getIsAggregated()`: since TanStack Table 9.2 that is true only
193
+ * when the column has an aggregation function, so it cannot tell a group
194
+ * row's blank cell from a data row's cell.
195
+ */
196
+ function isGroupSummaryCell(
197
+ cell: Cell<TMDataGridFeatures, TMDataGridRowData, unknown>,
198
+ ): boolean {
199
+ return cell.row.getIsGrouped() && !cell.getIsGrouped();
200
+ }
201
+
188
202
  /**
189
203
  * What a cell needs to take part in cell selection, or `undefined` while the
190
204
  * feature is off - which is what keeps a plain grid's cells exactly as they
@@ -401,7 +415,7 @@ function TMDataGridBodyCell({
401
415
  draftValues !== undefined &&
402
416
  contentOverride === undefined &&
403
417
  !cell.getIsPlaceholder() &&
404
- !cell.getIsAggregated()
418
+ !isGroupSummaryCell(cell)
405
419
  ? draftCellContext(cell, draftValues)
406
420
  : undefined;
407
421
  // Highlighting reproduces the *default* renderer, value then
@@ -412,7 +426,7 @@ function TMDataGridBodyCell({
412
426
  highlightNeedles !== undefined &&
413
427
  contentOverride === undefined &&
414
428
  !cell.getIsPlaceholder() &&
415
- !cell.getIsAggregated() &&
429
+ !isGroupSummaryCell(cell) &&
416
430
  cell.column.columnDef.cell === table.getDefaultColumnDef().cell
417
431
  ) {
418
432
  const value =