@jielga/tmdatagrid 0.5.0 → 1.0.0

package/dist/styles.css

@@ -1,2 +1,2 @@
-._root_qequm_8[data-size=xs]{--dg-row-height:34px;--dg-header-height:32px;--dg-font-size:var(--mantine-font-size-xs);--dg-padding:6px}._root_qequm_8[data-size=sm]{--dg-row-height:42px;--dg-header-height:38px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:8px}._root_qequm_8[data-size=md]{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px}._root_qequm_8[data-size=lg]{--dg-row-height:62px;--dg-header-height:52px;--dg-font-size:var(--mantine-font-size-md);--dg-padding:14px}._root_qequm_8[data-size=xl]{--dg-row-height:72px;--dg-header-height:60px;--dg-font-size:var(--mantine-font-size-lg);--dg-padding:18px}._root_qequm_8{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px;--dg-row-selected-bg:var(--mantine-primary-color-light);--dg-row-highlight-bg:var(--mantine-primary-color-light-hover);--dg-row-group-bg:var(--mantine-color-body);--dg-z-pinned-cell:2;--dg-z-focused-cell:3;--dg-z-summary-row:4;--dg-z-summary-pinned-cell:5;--dg-z-header:6;--dg-z-header-pinned-cell:7;text-align:left;border:1px solid var(--mantine-color-default-border);border-radius:var(--mantine-radius-md);background-color:var(--mantine-color-body);flex-direction:column;min-height:0;display:flex;overflow:hidden}._columnsPanel_1492o_1{flex-direction:column;width:280px;display:flex}._columnsPanelSearch_1492o_7{padding:var(--mantine-spacing-sm)}._columnsPanelList_1492o_11{gap:var(--mantine-spacing-sm);padding:0 var(--mantine-spacing-sm) var(--mantine-spacing-sm);flex-direction:column;display:flex}._columnsPanelFooter_1492o_18{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-sm);padding:var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);display:flex}._detailsToggle_n39tz_3{width:100%;height:100%;color:inherit;justify-content:center;align-items:center;display:flex}._detailsToggle_n39tz_3:hover ._chevron_n39tz_12{color:var(--mantine-color-text)}._chevron_n39tz_12{color:var(--mantine-color-dimmed);align-items:center;transition:transform .12s;display:flex}._chevron_n39tz_12[data-expanded=true]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){._chevron_n39tz_12{transition:none}}._groupToggle_h06xv_4{width:100%;min-width:0;font-size:var(--dg-font-size);color:inherit;align-items:center;gap:6px;display:flex}._chevron_h06xv_14{color:var(--mantine-color-dimmed);flex:none;align-items:center;transition:transform .12s;display:flex}._chevron_h06xv_14[data-expanded=true]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){._chevron_h06xv_14{transition:none}}._groupLabel_h06xv_34{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-weight:600;overflow:hidden}._groupCount_h06xv_44{color:var(--mantine-color-dimmed);font-variant-numeric:tabular-nums;flex:none}._filterPanel_izakx_4{top:calc(var(--dg-header-height) + 2px);left:var(--mantine-spacing-md);z-index:5;padding:var(--mantine-spacing-sm);border-radius:var(--mantine-radius-md);border:1px solid var(--mantine-color-default-border);background-color:var(--mantine-color-body);box-shadow:var(--mantine-shadow-md);position:absolute}._filterRow_izakx_16{align-items:flex-end;gap:var(--mantine-spacing-xs);display:flex}._filterPanelHeader_izakx_22{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-md);padding-bottom:var(--mantine-spacing-xs);display:flex}._filterPanelFooter_izakx_30{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-md);display:flex}._filterPills_1yybb_3{align-items:center;gap:var(--mantine-spacing-xs);flex-wrap:wrap;display:flex}._filterPills_1yybb_3 ._pill_1yybb_15{background-color:var(--lightningcss-light,var(--mantine-color-gray-1))var(--lightningcss-dark,var(--mantine-color-dark-5));color:var(--lightningcss-light,var(--mantine-color-black))var(--lightningcss-dark,var(--mantine-color-dark-0));border:1px solid var(--lightningcss-light,var(--mantine-color-gray-3))var(--lightningcss-dark,var(--mantine-color-dark-3))}._pillLabel_1yybb_27{font:inherit;color:inherit;cursor:pointer}._pillLabel_1yybb_27:hover{text-decoration:underline}._footer_149ca_1{justify-content:flex-end;align-items:center;gap:var(--mantine-spacing-lg);padding:4px var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);flex-shrink:0;min-height:48px;display:flex}._footer_149ca_1[data-paging-suspended=true]{opacity:.55}._tableWrapper_1nt60_2{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}._scrollContainer_1nt60_10{flex:1;min-height:0;position:relative;overflow:auto}._grid_1nt60_18{display:grid}._headerRow_1nt60_24{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-header,6);display:grid;position:sticky;top:0}._bodyRow_1nt60_33{--row-bg:var(--mantine-color-body);grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;display:grid}._bodyRow_1nt60_33:hover{--row-bg:var(--mantine-color-default-hover)}._bodyRow_1nt60_33[data-grouped=true]{--row-bg:var(--dg-row-group-bg)}._bodyRow_1nt60_33[data-context-menu=true]{--row-bg:var(--mantine-color-default-hover)}._bodyRow_1nt60_33[data-selected-bg=true]{--row-bg:var(--dg-row-selected-bg)}._bodyRow_1nt60_33[data-highlighted=true]{--row-bg:var(--dg-row-highlight-bg)}._bodyRow_1nt60_33[data-selects-on-click=true]{-webkit-user-select:none;user-select:none}._bodyRow_1nt60_33:focus-visible{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._bodyCell_1nt60_91{padding:0 var(--dg-padding);border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--row-bg);font-size:var(--dg-font-size);align-items:center;display:flex}._bodyCell_1nt60_91[data-control-column=true]{padding:0}._grid_1nt60_18[data-range-dragging]{-webkit-user-select:none;user-select:none}._bodyCell_1nt60_91[data-selected=true]{background-color:color-mix(in srgb, var(--mantine-primary-color-filled) 14%, var(--row-bg));--dg-edge-top:transparent;--dg-edge-bottom:transparent;--dg-edge-left:transparent;--dg-edge-right:transparent;box-shadow:inset 0 1px 0 0 var(--dg-edge-top), inset 0 -1px 0 0 var(--dg-edge-bottom), inset 1px 0 0 0 var(--dg-edge-left), inset -1px 0 0 0 var(--dg-edge-right)}._bodyCell_1nt60_91[data-edge-top=true]{--dg-edge-top:var(--mantine-primary-color-filled)}._bodyCell_1nt60_91[data-edge-bottom=true]{--dg-edge-bottom:var(--mantine-primary-color-filled)}._bodyCell_1nt60_91[data-edge-left=true]{--dg-edge-left:var(--mantine-primary-color-filled)}._bodyCell_1nt60_91[data-edge-right=true]{--dg-edge-right:var(--mantine-primary-color-filled)}._bodyCell_1nt60_91[data-focused=true]{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._cellContent_1nt60_89{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._bodyCell_1nt60_91[data-align=right]{justify-content:flex-end}._bodyCell_1nt60_91[data-align=center]{justify-content:center}._bodyCell_1nt60_91[data-align=left] ._cellContent_1nt60_89{flex:auto}._detailsCell_1nt60_204{border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--row-bg);padding:var(--dg-padding);-webkit-user-select:text;user-select:text;cursor:auto;grid-column:1/-1}._messageRow_1nt60_215{justify-content:center;align-items:center;gap:var(--mantine-spacing-xs);padding:var(--mantine-spacing-xl);flex-direction:column;grid-column:1/-1;display:flex}._summaryRow_1nt60_228{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-summary-row,4);display:grid;position:sticky;bottom:0}._summaryCell_1nt60_237{padding:0 var(--dg-padding);border-top:1px solid var(--mantine-color-default-border);background-color:var(--mantine-color-body);font-size:var(--dg-font-size);align-items:center;font-weight:600;display:flex}._summaryCell_1nt60_237[data-control-column=true]{padding:0}._summaryCell_1nt60_237[data-align=right]{justify-content:flex-end}._summaryCell_1nt60_237[data-align=center]{justify-content:center}._stickyLeft_6z1iq_16:after,._stickyRight_6z1iq_17:after{content:"";pointer-events:none;width:8px;position:absolute;top:0;bottom:0}._stickyLeft_6z1iq_16:after{background:linear-gradient(90deg,var(--lightningcss-light,#00000012)var(--lightningcss-dark,#00000042),var(--lightningcss-light,#00000006)var(--lightningcss-dark,#00000017) 45%,#0000);left:100%}._stickyRight_6z1iq_17:after{background:linear-gradient(270deg,var(--lightningcss-light,#00000012)var(--lightningcss-dark,#00000042),var(--lightningcss-light,#00000006)var(--lightningcss-dark,#00000017) 45%,#0000);right:100%}@supports (animation-timeline:scroll()){._stickyLeft_6z1iq_16:after,._stickyRight_6z1iq_17:after{--dg-sticky-edge-range:20px;opacity:0;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(inline)}._stickyLeft_6z1iq_16:after{animation-name:_stickyEdgeIn_6z1iq_1;animation-range:0 var(--dg-sticky-edge-range)}._stickyRight_6z1iq_17:after{animation-name:_stickyEdgeOut_6z1iq_1;animation-range:calc(100% - var(--dg-sticky-edge-range)) 100%}}@keyframes _stickyEdgeIn_6z1iq_1{0%{opacity:0}to{opacity:1}}@keyframes _stickyEdgeOut_6z1iq_1{0%{opacity:1}to{opacity:0}}._headerCell_1b6k8_1{padding:0 var(--dg-padding);min-width:0;min-height:var(--dg-header-height);font-weight:600;font-size:var(--dg-font-size);background-color:var(--mantine-color-body);border-bottom:1px solid var(--mantine-color-default-border);-webkit-user-select:none;user-select:none;align-items:center;gap:2px;display:flex;position:relative}._headerCell_1b6k8_1[data-align=right]{justify-content:flex-end}._headerCell_1b6k8_1[data-align=center]{justify-content:center}._headerCell_1b6k8_1[data-control-column=true]{padding:0}._headerCell_1b6k8_1[data-active=true] ._headerTitle_1b6k8_32{color:var(--mantine-primary-color-filled)}._headerTitle_1b6k8_32{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._headerCell_1b6k8_1[data-align=right] ._headerTitle_1b6k8_32{text-align:right}._headerCell_1b6k8_1[data-align=center] ._headerTitle_1b6k8_32{justify-content:center;display:flex}._headerActions_1b6k8_55{flex-shrink:0;align-items:center;gap:0;margin-left:auto;display:flex}._headerCell_1b6k8_1[data-align=right] ._headerActions_1b6k8_55{order:-1;margin-left:0;margin-right:auto}._headerAction_1b6k8_55{display:none}._headerCell_1b6k8_1:hover ._headerAction_1b6k8_55,._headerCell_1b6k8_1:focus-within ._headerAction_1b6k8_55,._headerAction_1b6k8_55[data-pinned-visible=true]{display:flex}._headerCellSortable_1b6k8_84{cursor:pointer}._sortIndex_1b6k8_90{color:var(--mantine-color-dimmed);text-align:center;min-width:10px;font-size:10px;font-weight:600;line-height:1}._headerCellDragging_1b6k8_102{opacity:.4}._headerCellDropBefore_1b6k8_106:before,._headerCellDropAfter_1b6k8_107:before{content:"";background-color:var(--mantine-primary-color-filled);z-index:5;pointer-events:none;width:2px;position:absolute;top:0;bottom:0}._headerCellDropBefore_1b6k8_106:before{left:0}._headerCellDropAfter_1b6k8_107:before{right:0}._columnSeparator_1b6k8_127{z-index:1;justify-content:center;width:10px;height:50%;display:flex;position:absolute;top:25%;right:0;transform:translate(50%)}._columnSeparatorResizable_1b6k8_139{cursor:col-resize;touch-action:none}._columnSeparator_1b6k8_127:after{content:"";background-color:#0000;width:1px;height:100%;transition:background-color .12s,width .12s}._headerCell_1b6k8_1:hover ._columnSeparator_1b6k8_127:after,._headerCell_1b6k8_1:focus-within ._columnSeparator_1b6k8_127:after{background-color:var(--mantine-color-default-border)}._columnSeparatorResizable_1b6k8_139:hover:after,._columnSeparatorActive_1b6k8_162:after{background-color:var(--mantine-primary-color-filled);width:2px}._menuItemActive_1b6k8_168{background-color:var(--mantine-color-default-hover);font-weight:600}._toolbar_4my8t_1{align-items:center;gap:var(--mantine-spacing-xs);padding:6px var(--mantine-spacing-xs);flex-shrink:0;min-height:42px;display:flex}._toolbarSpacer_4my8t_10{flex:1}
+._root_nuit2_8[data-size=xs]{--dg-row-height:34px;--dg-header-height:32px;--dg-font-size:var(--mantine-font-size-xs);--dg-padding:6px}._root_nuit2_8[data-size=sm]{--dg-row-height:42px;--dg-header-height:38px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:8px}._root_nuit2_8[data-size=md]{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px}._root_nuit2_8[data-size=lg]{--dg-row-height:62px;--dg-header-height:52px;--dg-font-size:var(--mantine-font-size-md);--dg-padding:14px}._root_nuit2_8[data-size=xl]{--dg-row-height:72px;--dg-header-height:60px;--dg-font-size:var(--mantine-font-size-lg);--dg-padding:18px}._root_nuit2_8{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px;--dg-row-selected-bg:var(--mantine-primary-color-light);--dg-row-highlight-bg:var(--mantine-primary-color-light-hover);--dg-row-group-bg:var(--mantine-color-body);--dg-row-striped-bg:color-mix(in srgb, var(--mantine-color-text) 3.5%, var(--mantine-color-body));--dg-z-pinned-cell:2;--dg-z-focused-cell:3;--dg-z-pinned-row:4;--dg-z-pinned-row-pinned-cell:5;--dg-z-summary-row:4;--dg-z-summary-pinned-cell:5;--dg-z-header:6;--dg-z-header-pinned-cell:7;text-align:left;border:1px solid var(--mantine-color-default-border);border-radius:var(--mantine-radius-md);background-color:var(--mantine-color-body);flex-direction:column;min-height:0;display:flex;overflow:hidden}._columnsPanel_1492o_1{flex-direction:column;width:280px;display:flex}._columnsPanelSearch_1492o_7{padding:var(--mantine-spacing-sm)}._columnsPanelList_1492o_11{gap:var(--mantine-spacing-sm);padding:0 var(--mantine-spacing-sm) var(--mantine-spacing-sm);flex-direction:column;display:flex}._columnsPanelFooter_1492o_18{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-sm);padding:var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);display:flex}._detailsToggle_n39tz_3{width:100%;height:100%;color:inherit;justify-content:center;align-items:center;display:flex}._detailsToggle_n39tz_3:hover ._chevron_n39tz_12{color:var(--mantine-color-text)}._chevron_n39tz_12{color:var(--mantine-color-dimmed);align-items:center;transition:transform .12s;display:flex}._chevron_n39tz_12[data-expanded=true]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){._chevron_n39tz_12{transition:none}}._groupToggle_h06xv_4{width:100%;min-width:0;font-size:var(--dg-font-size);color:inherit;align-items:center;gap:6px;display:flex}._chevron_h06xv_14{color:var(--mantine-color-dimmed);flex:none;align-items:center;transition:transform .12s;display:flex}._chevron_h06xv_14[data-expanded=true]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){._chevron_h06xv_14{transition:none}}._groupLabel_h06xv_34{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-weight:600;overflow:hidden}._groupCount_h06xv_44{color:var(--mantine-color-dimmed);font-variant-numeric:tabular-nums;flex:none}._filterPanel_izakx_4{top:calc(var(--dg-header-height) + 2px);left:var(--mantine-spacing-md);z-index:5;padding:var(--mantine-spacing-sm);border-radius:var(--mantine-radius-md);border:1px solid var(--mantine-color-default-border);background-color:var(--mantine-color-body);box-shadow:var(--mantine-shadow-md);position:absolute}._filterRow_izakx_16{align-items:flex-end;gap:var(--mantine-spacing-xs);display:flex}._filterPanelHeader_izakx_22{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-md);padding-bottom:var(--mantine-spacing-xs);display:flex}._filterPanelFooter_izakx_30{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-md);display:flex}._filterPills_1yybb_3{align-items:center;gap:var(--mantine-spacing-xs);flex-wrap:wrap;display:flex}._filterPills_1yybb_3 ._pill_1yybb_15{background-color:var(--lightningcss-light,var(--mantine-color-gray-1))var(--lightningcss-dark,var(--mantine-color-dark-5));color:var(--lightningcss-light,var(--mantine-color-black))var(--lightningcss-dark,var(--mantine-color-dark-0));border:1px solid var(--lightningcss-light,var(--mantine-color-gray-3))var(--lightningcss-dark,var(--mantine-color-dark-3))}._pillLabel_1yybb_27{font:inherit;color:inherit;cursor:pointer}._pillLabel_1yybb_27:hover{text-decoration:underline}._footer_149ca_1{justify-content:flex-end;align-items:center;gap:var(--mantine-spacing-lg);padding:4px var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);flex-shrink:0;min-height:48px;display:flex}._footer_149ca_1[data-paging-suspended=true]{opacity:.55}._tableWrapper_18r3a_2{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}._scrollContainer_18r3a_10{flex:1;min-height:0;position:relative;overflow:auto;container-type:inline-size}._grid_18r3a_21{display:grid}._headerRow_18r3a_27{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-header,6);display:grid;position:sticky;top:0}._headerRow_18r3a_27[data-dg-header-last]:after{content:"";pointer-events:none;background:linear-gradient(to bottom, var(--dg-header-shadow-color,#00000024), transparent);opacity:0;height:6px;position:absolute;inset:100% 0 auto}@supports (animation-timeline:scroll()){._headerRow_18r3a_27[data-dg-header-last]:after{animation:linear both _dg-header-shadow_18r3a_1;animation-timeline:scroll();animation-range:0 24px}}@keyframes _dg-header-shadow_18r3a_1{0%{opacity:0}to{opacity:1}}._bodyRow_18r3a_76{--row-bg:var(--mantine-color-body);grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;display:grid}._bodyRow_18r3a_76[data-striped=true]{--row-bg:var(--dg-row-striped-bg)}._bodyRow_18r3a_76:hover{--row-bg:var(--mantine-color-default-hover)}._bodyRow_18r3a_76[data-grouped=true]{--row-bg:var(--dg-row-group-bg)}._bodyRow_18r3a_76[data-context-menu=true]{--row-bg:var(--mantine-color-default-hover)}._bodyRow_18r3a_76[data-selected-bg=true]{--row-bg:var(--dg-row-selected-bg)}._bodyRow_18r3a_76[data-highlighted=true]{--row-bg:var(--dg-row-highlight-bg)}._bodyRow_18r3a_76[data-selects-on-click=true]{-webkit-user-select:none;user-select:none}._bodyRow_18r3a_76:focus-visible{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._bodyCell_18r3a_143{padding:0 var(--dg-padding);border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--row-bg);font-size:var(--dg-font-size);align-items:center;display:flex}._bodyCell_18r3a_143[data-control-column=true]{padding:0}._grid_18r3a_21[data-range-dragging]{-webkit-user-select:none;user-select:none}._bodyCell_18r3a_143[data-selected=true]{background-color:color-mix(in srgb, var(--mantine-primary-color-filled) 14%, var(--row-bg));--dg-edge-top:transparent;--dg-edge-bottom:transparent;--dg-edge-left:transparent;--dg-edge-right:transparent;box-shadow:inset 0 1px 0 0 var(--dg-edge-top), inset 0 -1px 0 0 var(--dg-edge-bottom), inset 1px 0 0 0 var(--dg-edge-left), inset -1px 0 0 0 var(--dg-edge-right)}._bodyCell_18r3a_143[data-edge-top=true]{--dg-edge-top:var(--mantine-primary-color-filled)}._bodyCell_18r3a_143[data-edge-bottom=true]{--dg-edge-bottom:var(--mantine-primary-color-filled)}._bodyCell_18r3a_143[data-edge-left=true]{--dg-edge-left:var(--mantine-primary-color-filled)}._bodyCell_18r3a_143[data-edge-right=true]{--dg-edge-right:var(--mantine-primary-color-filled)}._bodyCell_18r3a_143[data-focused=true]{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._cellContent_18r3a_141{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._bodyCell_18r3a_143[data-editing]{padding:0 calc(var(--dg-padding) / 2)}._cellEditor_18r3a_243{align-items:center;gap:2px;width:100%;min-width:0;display:flex}._cellEditorActions_18r3a_252{flex:none;align-items:center;display:flex}._bodyCell_18r3a_143[data-dirty],._bodyCell_18r3a_143[data-invalid]{position:relative}._bodyCell_18r3a_143[data-dirty]:after,._bodyCell_18r3a_143[data-invalid]:after{content:"";border:5px solid #0000;border-top-color:var(--mantine-primary-color-filled);border-right-color:var(--mantine-primary-color-filled);position:absolute;top:0;right:0}._bodyCell_18r3a_143[data-invalid]:after{border-top-color:var(--mantine-color-error);border-right-color:var(--mantine-color-error)}._bodyCell_18r3a_143[data-align=right]{justify-content:flex-end}._bodyCell_18r3a_143[data-align=center]{justify-content:center}._bodyCell_18r3a_143[data-align=left] ._cellContent_18r3a_141{flex:auto}._detailsCell_18r3a_303{border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--row-bg);padding:var(--dg-padding);-webkit-user-select:text;user-select:text;cursor:auto;grid-column:1/-1}._messageRow_18r3a_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_18r3a_76[data-deleted=true]{opacity:.55;pointer-events:none;text-decoration:line-through}._entryBlock_18r3a_347{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_18r3a_356{grid-column:1/-1;grid-template-columns:subgrid;display:grid}._pinnedTopBlock_18r3a_369{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_18r3a_369>:last-child>[role=cell]{border-bottom:2px solid var(--mantine-color-default-border)}._pinnedBottomBlock_18r3a_382{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_18r3a_382>:first-child>[role=cell]{border-top:2px solid var(--mantine-color-default-border)}._entryCell_18r3a_395{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_18r3a_395[data-control-column=true]{justify-content:center;padding:0}._entryCell_18r3a_395[data-align=right]{justify-content:flex-end}._entryCell_18r3a_395[data-align=center]{justify-content:center}._matchHighlight_18r3a_422{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_18r3a_434{grid-column:1/-1;grid-template-columns:subgrid;z-index:var(--dg-z-summary-row,4);display:grid;position:sticky;bottom:0}._summaryCell_18r3a_443{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_18r3a_443[data-control-column=true]{padding:0}._summaryCell_18r3a_443[data-align=right]{justify-content:flex-end}._summaryCell_18r3a_443[data-align=center]{justify-content:center}._stickyLeft_6z1iq_16:after,._stickyRight_6z1iq_17:after{content:"";pointer-events:none;width:8px;position:absolute;top:0;bottom:0}._stickyLeft_6z1iq_16:after{background:linear-gradient(90deg,var(--lightningcss-light,#00000012)var(--lightningcss-dark,#00000042),var(--lightningcss-light,#00000006)var(--lightningcss-dark,#00000017) 45%,#0000);left:100%}._stickyRight_6z1iq_17:after{background:linear-gradient(270deg,var(--lightningcss-light,#00000012)var(--lightningcss-dark,#00000042),var(--lightningcss-light,#00000006)var(--lightningcss-dark,#00000017) 45%,#0000);right:100%}@supports (animation-timeline:scroll()){._stickyLeft_6z1iq_16:after,._stickyRight_6z1iq_17:after{--dg-sticky-edge-range:20px;opacity:0;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(inline)}._stickyLeft_6z1iq_16:after{animation-name:_stickyEdgeIn_6z1iq_1;animation-range:0 var(--dg-sticky-edge-range)}._stickyRight_6z1iq_17:after{animation-name:_stickyEdgeOut_6z1iq_1;animation-range:calc(100% - var(--dg-sticky-edge-range)) 100%}}@keyframes _stickyEdgeIn_6z1iq_1{0%{opacity:0}to{opacity:1}}@keyframes _stickyEdgeOut_6z1iq_1{0%{opacity:1}to{opacity:0}}._headerCell_ikfbg_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_ikfbg_1[data-align=right]{justify-content:flex-end}._headerCell_ikfbg_1[data-align=center]{justify-content:center}._headerCell_ikfbg_1[data-control-column=true]{padding:0}._headerCellFiltered_ikfbg_35 ._headerTitle_ikfbg_35{color:var(--mantine-primary-color-filled)}._headerTitle_ikfbg_35{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._headerCell_ikfbg_1[data-align=right] ._headerTitle_ikfbg_35{text-align:right}._headerCell_ikfbg_1[data-align=center] ._headerTitle_ikfbg_35{justify-content:center;display:flex}._headerActions_ikfbg_58{flex-shrink:0;align-items:center;gap:0;margin-left:auto;display:flex}._headerCell_ikfbg_1[data-align=right] ._headerActions_ikfbg_58{order:-1;margin-left:0;margin-right:auto}._headerAction_ikfbg_58{display:none}._headerCell_ikfbg_1:hover ._headerAction_ikfbg_58,._headerCell_ikfbg_1:focus-within ._headerAction_ikfbg_58,._headerAction_ikfbg_58[data-pinned-visible=true]{display:flex}._headerCellSortable_ikfbg_87{cursor:pointer}._sortAction_ikfbg_93[data-sorted=false]{opacity:.55}._sortAction_ikfbg_93[data-sorted=false]:hover{opacity:1}._sortIndex_ikfbg_103{color:var(--mantine-color-dimmed);text-align:center;min-width:10px;font-size:10px;font-weight:600;line-height:1}._headerCellDragging_ikfbg_115{opacity:.4}._headerCellDropBefore_ikfbg_119:before,._headerCellDropAfter_ikfbg_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_ikfbg_119:before{left:0}._headerCellDropAfter_ikfbg_120:before{right:0}._columnSeparator_ikfbg_140{z-index:1;justify-content:center;width:10px;height:50%;display:flex;position:absolute;top:25%;right:0;transform:translate(50%)}._columnSeparatorResizable_ikfbg_152{cursor:col-resize;touch-action:none}._columnSeparator_ikfbg_140:after{content:"";background-color:#0000;width:1px;height:100%;transition:background-color .12s,width .12s}._headerCell_ikfbg_1:hover ._columnSeparator_ikfbg_140:after,._headerCell_ikfbg_1:focus-within ._columnSeparator_ikfbg_140:after{background-color:var(--mantine-color-default-border)}._columnSeparatorResizable_ikfbg_152:hover:after,._columnSeparatorActive_ikfbg_175:after{background-color:var(--mantine-primary-color-filled);width:2px}._menuItemActive_ikfbg_181{background-color:var(--mantine-color-default-hover);font-weight:600}._toolbar_4my8t_1{align-items:center;gap:var(--mantine-spacing-xs);padding:6px var(--mantine-spacing-xs);flex-shrink:0;min-height:42px;display:flex}._toolbarSpacer_4my8t_10{flex:1}
 /*$vite$:1*/

package/dist/styles.layer.css

@@ -0,0 +1 @@
+@import "./styles.css" layer(tmdatagrid);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jielga/tmdatagrid",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "description": "A React data grid built on TanStack Table v9 and Mantine — always virtualized, with resizable, reorderable, sortable, filterable, hideable and pinnable columns.",
   "license": "MIT",
   "type": "module",
@@ -52,6 +52,7 @@
       "import": "./dist/index.js"
     },
     "./styles.css": "./dist/styles.css",
+    "./styles.layer.css": "./dist/styles.layer.css",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -71,6 +72,7 @@
   "peerDependencies": {
     "@mantine/core": "^9.4.0",
     "@tabler/icons-react": "^3.46.0",
+    "@tanstack/react-form": "^1.33.0",
     "@tanstack/react-store": "^0.11.0",
     "@tanstack/react-table": "^9.0.0-beta.21",
     "@tanstack/react-virtual": "^3.14.4",
@@ -83,10 +85,13 @@
     "@babel/core": "^7.29.7",
     "@changesets/changelog-github": "^0.7.0",
     "@changesets/cli": "^2.31.1",
+    "@mantine/code-highlight": "^9.4.1",
     "@mantine/core": "^9.4.0",
+    "@mantine/hooks": "^9.4.1",
     "@rolldown/plugin-babel": "^0.2.3",
     "@tabler/icons-react": "^3.46.0",
     "@tanstack/intent": "0.3.6",
+    "@tanstack/react-form": "^1.33.2",
     "@tanstack/react-router": "^1.170.17",
     "@tanstack/react-router-devtools": "^1.167.0",
     "@tanstack/react-store": "^0.11.0",
@@ -112,8 +117,13 @@
     "remark-gfm": "^4.0.1",
     "rolldown": "~1.1.5",
     "rolldown-plugin-dts": "^0.27.14",
+    "shiki": "^4.4.3",
     "typescript": "~7.0.2",
     "vite": "^8.1.5",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.10",
+    "zod": "^4.4.3"
+  },
+  "dependencies": {
+    "@tanstack/match-sorter-utils": "^8.19.4"
   }
 }

package/skills/columns/SKILL.md

@@ -11,7 +11,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.5.0'
+  library_version: '1.0.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/columns.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/core/filterOperators.ts'

package/skills/features/SKILL.md

@@ -18,7 +18,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.5.0'
+  library_version: '1.0.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/features.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/core/capabilities.ts'

package/skills/getting-started/SKILL.md

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

package/skills/options/SKILL.md

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

package/skills/server-side/SKILL.md

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

package/skills/testing/SKILL.md

@@ -0,0 +1,198 @@
+---
+name: testing
+description: >
+  Write tests against TMDataGrid from a consuming app — Playwright or React
+  Testing Library. Covers the data-dg-part contract, data-row-id/data-column-id
+  coordinates, naming a grid with data-testid, the roles and ARIA the grid
+  publishes, the cell/gridcell role flip under cell selection, reaching rows
+  past virtualization with data-dg-row-count and scrollToRow, and waiting on
+  aria-busy. Load when writing or fixing tests that drive a grid, or when a
+  selector for a row, cell or control does not resolve.
+metadata:
+  type: core
+  library: '@jielga/tmdatagrid'
+  library_version: '1.0.0'
+sources:
+  - 'Jielga/TMDataGrid:src/docs/testing.md'
+  - 'Jielga/TMDataGrid:src/tmdatagrid/components/TMDataGrid.tsx'
+  - 'Jielga/TMDataGrid:src/tmdatagrid/components/TMDataGridTable.tsx'
+---
+
+# TMDataGrid — Testing
+
+The grid names its own pieces so a suite can be written against structure
+rather than against copy or class names. Three hooks carry it:
+
+- **`data-dg-part`** — *what* an element is (`"row"`, `"filter-button"`)
+- **`data-row-id` / `data-column-id`** — *which* one, using your own ids
+- **roles and ARIA** — framework-neutral, and what a screen reader reads
+
+Selectors compose: `[data-dg-part="save-row"][data-row-id="42"]`.
+
+The grid mints no `data-testid` of its own — that attribute belongs to the app,
+and Playwright's `testIdAttribute` is configurable. `@mantine/core` and
+`@tanstack/*` ship none either.
+
+## Naming a grid
+
+Parts repeat across grids on a page. Name the grid, scope through it:
+
+```tsx
+<TMDataGrid {...grid} data-testid="orders">
+  <TMDataGrid.Table<Order> aria-label="Orders" />
+</TMDataGrid>
+```
+
+`data-testid` and `id` go on the root (which also carries `data-dg-root`);
+`aria-label` or `aria-labelledby` goes on `TMDataGrid.Table`, because the
+accessible name belongs to the element carrying the `grid` role.
+
+## Roles
+
+| Element | Role | Key attributes |
+| --- | --- | --- |
+| Grid | `table`, or `grid` under cell selection | `aria-rowcount`, `aria-colcount`, `aria-busy`, `data-dg-row-count` |
+| Body row | `row` | `data-row-id`, `aria-rowindex`, `data-selected`, `data-highlighted`, `data-grouped`, `data-pinned`, `data-deleted` |
+| Body cell | `cell`, or `gridcell` under cell selection | `data-row-id`, `data-column-id`, `data-editing`, `data-dirty`, `data-invalid`, `data-focused` |
+| Header cell | `columnheader` | `data-column-id`, `aria-sort` |
+
+Body cells carry no `data-dg-part` — the coordinate pair already names them.
+
+## Parts
+
+**Whole-grid** (unique, no coordinate needed): `toolbar`, `summary-count`,
+`loading`, `search`, `search-clear`, `filter-button`, `filter-panel`,
+`filter-panel-close`, `filter-add`, `filter-clear-all`, `filter-pills`,
+`columns-button`, `columns-panel`, `columns-search`, `columns-toggle-all`,
+`columns-reset`, `footer`, `page-size`, `page-range`, `page-prev`, `page-next`,
+`summary-row`, `pinned-top`, `pinned-bottom`, `select-all`,
+`details-toggle-all`, `save-all`, `discard-all`, `editor-confirm`,
+`editor-cancel`, `editor-input`, `sort-index`.
+
+**Keyed by `data-row-id`**: `row`, `entry-row`, `details`, `select-row`,
+`details-toggle`, `group-toggle`, `edit-row`, `delete-row`, `save-row`,
+`cancel-row`, `restore-row`, `confirm-new-row`, `discard-new-row`.
+
+**Keyed by `data-column-id`**: `header`, `header-sort`, `header-menu`,
+`header-filter`, `filter-row`, `filter-pill`, `columns-toggle`.
+
+**Keyed by both**: `editor`.
+
+Inside a `filter-row` the controls are `filter-column`, `filter-operator` and
+`filter-value` — or `filter-value-from` / `filter-value-to` for `between`.
+
+A column declaring `meta.filterControl` or `meta.editor` renders your own
+component in that slot, so `filter-value` and `editor-input` cover the built-ins
+only. `filter-row` and `editor` still hold; scope through them.
+
+## A page object
+
+```ts
+import { type Locator, type Page, expect } from "@playwright/test";
+
+type PartKey = { rowId?: string; columnId?: string };
+
+export class DataGrid {
+  readonly root: Locator;
+  readonly grid: Locator;
+
+  constructor(page: Page, testId: string) {
+    this.root = page.getByTestId(testId);
+    this.grid = this.root.getByRole("table");
+  }
+
+  part(name: string, key: PartKey = {}): Locator {
+    return this.root.locator(
+      `[data-dg-part="${name}"]` +
+        (key.rowId === undefined ? "" : `[data-row-id="${key.rowId}"]`) +
+        (key.columnId === undefined ? "" : `[data-column-id="${key.columnId}"]`),
+    );
+  }
+
+  cell({ rowId, columnId }: { rowId: string; columnId: string }): Locator {
+    return this.root.locator(
+      `[data-row-id="${rowId}"][data-column-id="${columnId}"]`,
+    );
+  }
+
+  async expectRowCount(count: number): Promise<void> {
+    await expect(this.grid).toHaveAttribute("data-dg-row-count", String(count));
+  }
+
+  async expectSettled(): Promise<void> {
+    await expect(this.grid).not.toHaveAttribute("aria-busy");
+  }
+}
+```
+
+## Virtualization
+
+Only the rows in the viewport plus overscan are in the DOM. A row at index 500
+has no element, and Playwright cannot scroll to what it cannot find.
+
+**Count rows off the grid.** `data-dg-row-count` is the body rows the grid is
+showing — the current page under pagination, everything the filters left
+otherwise. (`aria-rowcount` also counts the header and summary rows.)
+
+**Reach a row by narrowing to it** — filter or search. Faster, more stable, and
+what a user would do. Where the row must be reached in place,
+`grid.scrollToRow({ rowId, align })` moves the virtualizer and answers whether
+the row was reachable; from Playwright that needs the app to expose the api.
+
+## Waiting
+
+`meta.loading` sets `aria-busy` on the grid whether or not the body has rows, so
+a refetch over existing rows is visible to a test. Quick search debounces
+(250 ms by default). Assert on `data-dg-row-count` and let Playwright retry
+rather than adding a timeout.
+
+## Common mistakes
+
+### Selecting chrome by its aria-label
+
+Every icon-only control has one, but they come from `labels` and are yours to
+translate. A suite written on `getByRole("button", { name: "Filters" })` breaks
+the day the grid renders in Swedish, and again on any copy change. Use the part.
+
+### Counting row elements
+
+`expect(rows).toHaveLength(50)` fails at any real row count, because
+virtualization mounts a couple of dozen. Under jsdom it is worse: there is no
+layout, so the count depends on the stubbed element size. Assert
+`data-dg-row-count`.
+
+### getByRole("cell") on a grid with cell selection
+
+`enableCellSelection` turns every `cell` into a `gridcell`, and the grid's
+`table` into a `grid` — a widget with a keyboard cursor is not a table of
+content. Tests written on the role break when the feature is switched on. Query
+cells by `[data-row-id][data-column-id]`, which do not move.
+
+### Expecting a row far down the list to exist
+
+`dg-row-450` has no element until it is scrolled to, so the locator times out
+with no useful message. Filter or search down to it first.
+
+### Unscoped parts with two grids on a page
+
+`page.locator('[data-dg-part="row"]')` matches both grids and Playwright's
+strict mode fails on the ambiguity. Give each grid a `data-testid` and scope
+every query through it.
+
+### Adding data-testid and expecting the grid to honour it
+
+`data-testid` on `<TMDataGrid>` lands on the root element only; it is not a
+prefix that propagates to the parts inside. Scope through the root instead of
+looking for `orders-row-42`.
+
+### Asserting on a column's cells through nth-child
+
+Column order changes with pinning, reordering and the generated lanes
+(checkbox, tree, details, row numbers, edit), so a positional index points at a
+different column than it did. Use `[data-column-id]`.
+
+### Waiting on the toolbar spinner
+
+`data-dg-part="loading"` only renders where `TMDataGrid.LoadingIndicator` was
+placed, and only while `meta.loading` is true. `aria-busy` on the grid is set
+regardless of whether that component is rendered.

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

@@ -59,12 +59,23 @@
      group row, so a tint would grey out the whole grid. Set it to give groups a
      band of their own. */
   --dg-row-group-bg: var(--mantine-color-body);
+  /* Every second row under `striped`. A whisper of the text colour over the
+     body, so one declaration is right in both themes. */
+  --dg-row-striped-bg: color-mix(
+    in srgb,
+    var(--mantine-color-text) 3.5%,
+    var(--mantine-color-body)
+  );
 
   /* The stacking ladder, stated once. Body cells sit at auto (0); everything
      sticky stacks over them in this order, and a sticky row crossing a sticky
      column takes the row's slot plus one. */
   --dg-z-pinned-cell: 2;
   --dg-z-focused-cell: 3;
+  /* The pinned-row slot serves both sticky rows: the summary along the
+     bottom and the entry block under the header. */
+  --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;

package/src/tmdatagrid/components/TMDataGrid.tsx

@@ -3,6 +3,7 @@ import { type CSSProperties, type ReactNode, useMemo } from "react";
 import classes from "./TMDataGrid.module.css";
 import { TMDataGridColumnsPanel } from "./TMDataGridColumnsPanel";
 import { TMDataGridContextProvider } from "../TMDataGridContext";
+import { TMDataGridEditActions } from "./TMDataGridEditActions";
 import { TMDataGridFilterPanel } from "./TMDataGridFilterPanel";
 import { TMDataGridFilterPills } from "./TMDataGridFilterPills";
 import { TMDataGridFooter } from "./TMDataGridFooter";
@@ -38,6 +39,20 @@ export type TMDataGridProps<TData extends RowData> = TMDataGridApi<TData> & {
    * background. Plain `CSSProperties` rejects `--*` keys.
    */
   style?: CSSProperties & Record<`--${string}`, string | number>;
+  /** Set on the root element. */
+  id?: string;
+  /**
+   * Names this grid for tests. The grid names its own pieces with
+   * `data-dg-part` rather than minting test ids, and those repeat across
+   * grids — scope through this one and they stop colliding:
+   *
+   * ```ts
+   * page.getByTestId("orders").locator('[data-dg-part="row"][data-row-id="42"]')
+   * ```
+   *
+   * See the Testing docs page for the full attribute contract.
+   */
+  "data-testid"?: string;
 };
 
 /**
@@ -61,15 +76,21 @@ export type TMDataGridProps<TData extends RowData> = TMDataGridApi<TData> & {
 function TMDataGridRoot<TData extends RowData>({
   table,
   ui,
+  edit,
   features,
   labels,
   renderDetails,
   renderDetailsEstHeight,
   overscan,
+  resetSettings,
+  scrollToRow,
+  scrollerRef,
   size = DEFAULT_TMDATAGRID_SIZE,
   children,
   className,
   style,
+  id,
+  "data-testid": testId,
 }: TMDataGridProps<TData>) {
   const rowHeight = table.options.meta?.rowHeight ?? SIZE_ROW_HEIGHT[size];
 
@@ -77,11 +98,15 @@ function TMDataGridRoot<TData extends RowData>({
     () => ({
       table,
       ui,
+      edit,
       features,
       labels,
       renderDetails,
       renderDetailsEstHeight,
       overscan,
+      resetSettings,
+      scrollToRow,
+      scrollerRef,
       size,
       rowHeight,
       controlSize: SIZE_CONTROL_SIZE[size],
@@ -89,11 +114,15 @@ function TMDataGridRoot<TData extends RowData>({
     [
       table,
       ui,
+      edit,
       features,
       labels,
       renderDetails,
       renderDetailsEstHeight,
       overscan,
+      resetSettings,
+      scrollToRow,
+      scrollerRef,
       size,
       rowHeight,
     ],
@@ -102,6 +131,10 @@ function TMDataGridRoot<TData extends RowData>({
   return (
     <TMDataGridContextProvider value={api}>
       <div
+        id={id}
+        data-testid={testId}
+        // The handle everything else scopes off — see the `data-testid` prop.
+        data-dg-root
         data-size={size}
         className={[classes.root, className].filter(Boolean).join(" ")}
         style={style}
@@ -118,6 +151,7 @@ export const TMDataGrid = Object.assign(TMDataGridRoot, {
   SummaryCount: TMDataGridSummaryCount,
   LoadingIndicator: TMDataGridLoadingIndicator,
   Search: TMDataGridSearch,
+  EditActions: TMDataGridEditActions,
   ColumnsButton: TMDataGridColumnsButton,
   FilterButton: TMDataGridFilterButton,
   Table: TMDataGridTable,