@ni/nimble-components 18.10.2 → 18.10.4

package/dist/all-components-bundle.js

@@ -16744,9 +16744,9 @@
         return `${prefix}${uniqueIdCounter++}`;
     }
 
-    const template$o = html `<slot></slot>`;
+    const template$q = html `<slot></slot>`;
 
-    const styles$M = css `
+    const styles$O = css `
     :host {
         display: contents;
     }
@@ -16802,8 +16802,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$M,
-        template: template$o
+        styles: styles$O,
+        template: template$q
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -16895,7 +16895,7 @@
     const groupHeaderTextTransform = DesignToken.create(styleNameFromTokenName(tokenNames.groupHeaderTextTransform)).withDefault('uppercase');
     // Animation Tokens
     const smallDelay = DesignToken.create(styleNameFromTokenName(tokenNames.smallDelay)).withDefault(SmallDelay);
-    DesignToken.create(styleNameFromTokenName(tokenNames.mediumDelay)).withDefault(MediumDelay);
+    const mediumDelay = DesignToken.create(styleNameFromTokenName(tokenNames.mediumDelay)).withDefault(MediumDelay);
     const largeDelay = DesignToken.create(styleNameFromTokenName(tokenNames.largeDelay)).withDefault(LargeDelay);
     // Private helpers functions
     function hexToRgbPartial(hexValue) {
@@ -16987,7 +16987,7 @@
         }
     }
 
-    const styles$L = css `
+    const styles$N = css `
     ${display('inline')}
 
     :host {
@@ -17070,7 +17070,7 @@
 `;
 
     // prettier-ignore
-    const template$n = (context, definition) => html `
+    const template$p = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17144,8 +17144,8 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$n,
-        styles: styles$L,
+        template: template$p,
+        styles: styles$N,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17231,7 +17231,7 @@
         return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
     }
 
-    const styles$K = css `
+    const styles$M = css `
     ${display('inline-flex')}
 
     :host {
@@ -17512,8 +17512,8 @@
             }
         `));
 
-    const styles$J = css `
-    ${styles$K}
+    const styles$L = css `
+    ${styles$M}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17521,7 +17521,7 @@
     }
 `;
 
-    const template$m = (context, definition) => html `
+    const template$o = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17603,8 +17603,8 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$m,
-        styles: styles$J,
+        template: template$o,
+        styles: styles$L,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17612,7 +17612,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
     DesignSystem.tagFor(AnchorButton);
 
-    const styles$I = css `
+    const styles$K = css `
     ${display('grid')}
 
     :host {
@@ -17689,7 +17689,7 @@
     }
 `;
 
-    const template$l = (context, definition) => html `
+    const template$n = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17795,8 +17795,8 @@
     // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
     const nimbleAnchorMenuItem = AnchorMenuItem.compose({
         baseName: 'anchor-menu-item',
-        template: template$l,
-        styles: styles$I,
+        template: template$n,
+        styles: styles$K,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17820,7 +17820,7 @@
         }
     });
 
-    const styles$H = css `
+    const styles$J = css `
     ${display('inline-flex')}
 
     :host {
@@ -17926,8 +17926,8 @@
     }
 `;
 
-    const styles$G = css `
-    ${styles$H}
+    const styles$I = css `
+    ${styles$J}
 
     a {
         text-decoration: none;
@@ -17945,7 +17945,7 @@
     }
 `;
 
-    const template$k = (context, definition) => html `
+    const template$m = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17978,21 +17978,33 @@
              * HTML Attribute: disabled
              */
             this.disabled = false;
+            /**
+             * Indicates the current "selected" state of various widgets.
+             * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-selected}
+             *
+             * @public
+             * @remarks
+             * HTML Attribute: aria-selected
+             */
+            this.ariaSelected = 'false';
         }
     }
     __decorate$1([
         attr({ mode: 'boolean' })
     ], AnchorTab.prototype, "disabled", void 0);
+    __decorate$1([
+        attr({ attribute: 'aria-selected' })
+    ], AnchorTab.prototype, "ariaSelected", void 0);
     // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
     const nimbleAnchorTab = AnchorTab.compose({
         baseName: 'anchor-tab',
-        template: template$k,
-        styles: styles$G
+        template: template$m,
+        styles: styles$I
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
     DesignSystem.tagFor(AnchorTab);
 
-    const styles$F = css `
+    const styles$H = css `
     ${display('grid')}
 
     :host {
@@ -18010,7 +18022,7 @@
     }
 `;
 
-    const template$j = (context, definition) => html `
+    const template$l = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18207,8 +18219,8 @@
     applyMixins(AnchorTabs, StartEnd);
     const nimbleAnchorTabs = AnchorTabs.compose({
         baseName: 'anchor-tabs',
-        template: template$j,
-        styles: styles$F,
+        template: template$l,
+        styles: styles$H,
         shadowOptions: {
             delegatesFocus: false
         }
@@ -18216,7 +18228,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
     DesignSystem.tagFor(AnchorTabs);
 
-    const styles$E = css `
+    const styles$G = css `
     ${display('block')}
 
     :host {
@@ -18320,7 +18332,7 @@
     }
 `;
 
-    const template$i = (context, definition) => html `
+    const template$k = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18457,8 +18469,8 @@
     // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
     const nimbleAnchorTreeItem = AnchorTreeItem.compose({
         baseName: 'anchor-tree-item',
-        template: template$i,
-        styles: styles$E,
+        template: template$k,
+        styles: styles$G,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -18468,7 +18480,7 @@
         .register(nimbleAnchorTreeItem());
     DesignSystem.tagFor(AnchorTreeItem);
 
-    const styles$D = css `
+    const styles$F = css `
     :host {
         contain: layout;
         display: block;
@@ -18492,7 +18504,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$D
+        styles: styles$F
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -18572,7 +18584,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$C = css `
+    const styles$E = css `
     ${display('flex')}
 
     :host {
@@ -18730,8 +18742,8 @@
             }
         `));
 
-    const styles$B = css `
-    ${styles$K}
+    const styles$D = css `
+    ${styles$M}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18777,7 +18789,7 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$B,
+        styles: styles$D,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19399,13 +19411,13 @@
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.033 14.026 4.9 10.866 6.277 9.53l1.744 1.81 4.562-4.507 1.307 1.363Zm1.155-10.68-1.321-1.32-2.312 2.311-2.311-2.311-1.321 1.32 2.311 2.312L1.923 7.97l1.32 1.32 2.312-2.31 2.312 2.31 1.32-1.32-2.31-2.312Z"/></svg>`
     };
 
-    const template$h = html `
+    const template$j = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$A = css `
+    const styles$C = css `
     ${display('inline-flex')}
 
     :host {
@@ -19458,8 +19470,8 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$h,
-            styles: styles$A,
+            template: template$j,
+            styles: styles$C,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19525,7 +19537,7 @@
     };
 
     // prettier-ignore
-    const template$g = html `
+    const template$i = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19644,13 +19656,13 @@
     applyMixins(Banner, ARIAGlobalStatesAndProperties);
     const nimbleBanner = Banner.compose({
         baseName: 'banner',
-        template: template$g,
-        styles: styles$C
+        template: template$i,
+        styles: styles$E
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
     DesignSystem.tagFor(Banner);
 
-    const styles$z = css `
+    const styles$B = css `
     ${display('inline-block')}
 
     :host {
@@ -19691,12 +19703,12 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$z
+        styles: styles$B
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
     DesignSystem.tagFor(Breadcrumb);
 
-    const styles$y = css `
+    const styles$A = css `
     ${display('inline-flex')}
 
     :host {
@@ -19772,7 +19784,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$y,
+        styles: styles$A,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -19780,7 +19792,7 @@
         .register(nimbleBreadcrumbItem());
     DesignSystem.tagFor(BreadcrumbItem);
 
-    const styles$x = css `
+    const styles$z = css `
     ${display('inline-flex')}
 
     :host {
@@ -19939,7 +19951,7 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$x,
+        styles: styles$z,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -19947,7 +19959,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
     DesignSystem.tagFor(CardButton);
 
-    const styles$w = css `
+    const styles$y = css `
     ${display('inline-flex')}
 
     :host {
@@ -20065,15 +20077,15 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$w,
+        styles: styles$y,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
     DesignSystem.tagFor(Checkbox);
 
-    const styles$v = css `
-    ${styles$K}
+    const styles$x = css `
+    ${styles$M}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -20099,7 +20111,7 @@
     }
 `;
 
-    const template$f = (context, definition) => html `
+    const template$h = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20174,8 +20186,8 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$f,
-        styles: styles$v,
+        template: template$h,
+        styles: styles$x,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -20207,7 +20219,7 @@
         block: 'block'
     };
 
-    const styles$u = css `
+    const styles$w = css `
     ${display('inline-flex')}
 
     :host {
@@ -20443,7 +20455,7 @@
             }
         `));
 
-    const styles$t = css `
+    const styles$v = css `
     .error-icon {
         display: none;
     }
@@ -20477,9 +20489,9 @@
     }
 `;
 
-    const styles$s = css `
-    ${styles$u}
-    ${styles$t}
+    const styles$u = css `
+    ${styles$w}
+    ${styles$v}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -20715,7 +20727,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$s,
+        styles: styles$u,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -20760,7 +20772,7 @@
      */
     const UserDismissed = Symbol('user dismissed');
 
-    const styles$r = css `
+    const styles$t = css `
     ${display('grid')}
 
     dialog {
@@ -20876,7 +20888,7 @@
             }
         `));
 
-    const template$e = html `
+    const template$g = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -21002,14 +21014,14 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$e,
-        styles: styles$r,
+        template: template$g,
+        styles: styles$t,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
     DesignSystem.tagFor(Dialog);
 
-    const styles$q = css `
+    const styles$s = css `
     ${display('block')}
 
     :host {
@@ -21162,7 +21174,7 @@
             }
         `));
 
-    const template$d = html `
+    const template$f = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21276,8 +21288,8 @@
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$d,
-        styles: styles$q
+        template: template$f,
+        styles: styles$s
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
     DesignSystem.tagFor(Drawer);
@@ -21340,7 +21352,7 @@
         }
     }
     registerIcon('icon-arrow-expander-right', IconArrowExpanderRight);
-    DesignSystem.tagFor(IconArrowExpanderRight);
+    const iconArrowExpanderRightTag = DesignSystem.tagFor(IconArrowExpanderRight);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -23058,7 +23070,7 @@
     registerIcon('icon-xmark-check', IconXmarkCheck);
     DesignSystem.tagFor(IconXmarkCheck);
 
-    const styles$p = css `
+    const styles$r = css `
     ${display('flex')}
 
     :host {
@@ -23138,12 +23150,12 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$p
+        styles: styles$r
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
     DesignSystem.tagFor(ListOption);
 
-    const styles$o = css `
+    const styles$q = css `
     ${display('grid')}
 
     :host {
@@ -23210,12 +23222,12 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$o
+        styles: styles$q
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
     DesignSystem.tagFor(Menu);
 
-    const styles$n = css `
+    const styles$p = css `
     ${display('inline-block')}
 
     :host {
@@ -23234,7 +23246,7 @@
 `;
 
     // prettier-ignore
-    const template$c = html `
+    const template$e = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -23489,8 +23501,8 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$c,
-        styles: styles$n,
+        template: template$e,
+        styles: styles$p,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -23498,7 +23510,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
     const menuButtonTag = DesignSystem.tagFor(MenuButton);
 
-    const styles$m = css `
+    const styles$o = css `
     ${display('grid')}
 
     :host {
@@ -23596,7 +23608,7 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$m,
+        styles: styles$o,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -23611,9 +23623,9 @@
         block: 'block'
     };
 
-    const styles$l = css `
+    const styles$n = css `
     ${display('inline-block')}
-    ${styles$t}
+    ${styles$v}
 
     :host {
         font: ${bodyFont};
@@ -23827,7 +23839,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$l,
+        styles: styles$n,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -23869,7 +23881,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
     DesignSystem.tagFor(NumberField);
 
-    const styles$k = css `
+    const styles$m = css `
     ${display('inline-flex')}
 
     :host {
@@ -23970,13 +23982,13 @@
         baseName: 'radio',
         baseClass: Radio$1,
         template: radioTemplate,
-        styles: styles$k,
+        styles: styles$m,
         checkedIndicator: circleFilled16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
     DesignSystem.tagFor(Radio);
 
-    const styles$j = css `
+    const styles$l = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -24011,7 +24023,7 @@
         baseName: 'radio-group',
         baseClass: RadioGroup$1,
         template: radioGroupTemplate,
-        styles: styles$j,
+        styles: styles$l,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -24019,9 +24031,9 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
     DesignSystem.tagFor(RadioGroup);
 
-    const styles$i = css `
-    ${styles$u}
-    ${styles$t}
+    const styles$k = css `
+    ${styles$w}
+    ${styles$v}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -24097,7 +24109,7 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$i,
+        styles: styles$k,
         indicator: arrowExpanderDown16X16.data,
         end: html `
         <${iconExclamationMarkTag}
@@ -24110,7 +24122,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
     DesignSystem.tagFor(Select);
 
-    const styles$h = css `
+    const styles$j = css `
     ${display('inline-flex')}
 
     :host {
@@ -24254,7 +24266,7 @@
             }
         `));
 
-    const template$b = html `
+    const template$d = html `
     <template role="progressbar">
         <div class="container">
             <div class="bit1"></div>
@@ -24271,13 +24283,13 @@
     }
     const nimbleSpinner = Spinner.compose({
         baseName: 'spinner',
-        template: template$b,
-        styles: styles$h
+        template: template$d,
+        styles: styles$j
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
     DesignSystem.tagFor(Spinner);
 
-    const styles$g = css `
+    const styles$i = css `
     ${display('inline-flex')}
 
     :host {
@@ -24440,7 +24452,7 @@
         `));
 
     // prettier-ignore
-    const template$a = html `
+    const template$c = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -24484,8 +24496,8 @@
     const nimbleSwitch = Switch.compose({
         baseClass: Switch$1,
         baseName: 'switch',
-        template: template$a,
-        styles: styles$g
+        template: template$c,
+        styles: styles$i
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
     DesignSystem.tagFor(Switch);
@@ -24499,12 +24511,12 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$H
+        styles: styles$J
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
     DesignSystem.tagFor(Tab);
 
-    const styles$f = css `
+    const styles$h = css `
     ${display('block')}
 
     :host {
@@ -24524,7 +24536,7 @@
         baseName: 'tab-panel',
         baseClass: TabPanel$1,
         template: tabPanelTemplate,
-        styles: styles$f
+        styles: styles$h
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
     DesignSystem.tagFor(TabPanel);
@@ -27558,9 +27570,195 @@
       });
     }
 
+    function getGroupedRowModel() {
+      return table => memo$1(() => [table.getState().grouping, table.getPreGroupedRowModel()], (grouping, rowModel) => {
+        if (!rowModel.rows.length || !grouping.length) {
+          return rowModel;
+        }
+
+        // Filter the grouping list down to columns that exist
+        const existingGrouping = grouping.filter(columnId => table.getColumn(columnId));
+        const groupedFlatRows = [];
+        const groupedRowsById = {};
+        // const onlyGroupedFlatRows: Row[] = [];
+        // const onlyGroupedRowsById: Record<RowId, Row> = {};
+        // const nonGroupedFlatRows: Row[] = [];
+        // const nonGroupedRowsById: Record<RowId, Row> = {};
+
+        // Recursively group the data
+        const groupUpRecursively = function (rows, depth, parentId) {
+          if (depth === void 0) {
+            depth = 0;
+          }
+          // Grouping depth has been been met
+          // Stop grouping and simply rewrite thd depth and row relationships
+          if (depth >= existingGrouping.length) {
+            return rows.map(row => {
+              row.depth = depth;
+              groupedFlatRows.push(row);
+              groupedRowsById[row.id] = row;
+              if (row.subRows) {
+                row.subRows = groupUpRecursively(row.subRows, depth + 1);
+              }
+              return row;
+            });
+          }
+          const columnId = existingGrouping[depth];
+
+          // Group the rows together for this level
+          const rowGroupsMap = groupBy(rows, columnId);
+
+          // Peform aggregations for each group
+          const aggregatedGroupedRows = Array.from(rowGroupsMap.entries()).map((_ref, index) => {
+            let [groupingValue, groupedRows] = _ref;
+            let id = `${columnId}:${groupingValue}`;
+            id = parentId ? `${parentId}>${id}` : id;
+
+            // First, Recurse to group sub rows before aggregation
+            const subRows = groupUpRecursively(groupedRows, depth + 1, id);
+
+            // Flatten the leaf rows of the rows in this group
+            const leafRows = depth ? flattenBy(groupedRows, row => row.subRows) : groupedRows;
+            const row = createRow(table, id, leafRows[0].original, index, depth);
+            Object.assign(row, {
+              groupingColumnId: columnId,
+              groupingValue,
+              subRows,
+              leafRows,
+              getValue: columnId => {
+                // Don't aggregate columns that are in the grouping
+                if (existingGrouping.includes(columnId)) {
+                  if (row._valuesCache.hasOwnProperty(columnId)) {
+                    return row._valuesCache[columnId];
+                  }
+                  if (groupedRows[0]) {
+                    var _groupedRows$0$getVal;
+                    row._valuesCache[columnId] = (_groupedRows$0$getVal = groupedRows[0].getValue(columnId)) != null ? _groupedRows$0$getVal : undefined;
+                  }
+                  return row._valuesCache[columnId];
+                }
+                if (row._groupingValuesCache.hasOwnProperty(columnId)) {
+                  return row._groupingValuesCache[columnId];
+                }
+
+                // Aggregate the values
+                const column = table.getColumn(columnId);
+                const aggregateFn = column == null ? void 0 : column.getAggregationFn();
+                if (aggregateFn) {
+                  row._groupingValuesCache[columnId] = aggregateFn(columnId, leafRows, groupedRows);
+                  return row._groupingValuesCache[columnId];
+                }
+              }
+            });
+            subRows.forEach(subRow => {
+              groupedFlatRows.push(subRow);
+              groupedRowsById[subRow.id] = subRow;
+              // if (subRow.getIsGrouped?.()) {
+              //   onlyGroupedFlatRows.push(subRow);
+              //   onlyGroupedRowsById[subRow.id] = subRow;
+              // } else {
+              //   nonGroupedFlatRows.push(subRow);
+              //   nonGroupedRowsById[subRow.id] = subRow;
+              // }
+            });
+
+            return row;
+          });
+          return aggregatedGroupedRows;
+        };
+        const groupedRows = groupUpRecursively(rowModel.rows, 0, '');
+        groupedRows.forEach(subRow => {
+          groupedFlatRows.push(subRow);
+          groupedRowsById[subRow.id] = subRow;
+          // if (subRow.getIsGrouped?.()) {
+          //   onlyGroupedFlatRows.push(subRow);
+          //   onlyGroupedRowsById[subRow.id] = subRow;
+          // } else {
+          //   nonGroupedFlatRows.push(subRow);
+          //   nonGroupedRowsById[subRow.id] = subRow;
+          // }
+        });
+
+        return {
+          rows: groupedRows,
+          flatRows: groupedFlatRows,
+          rowsById: groupedRowsById
+        };
+      }, {
+        key: 'getGroupedRowModel',
+        debug: () => {
+          var _table$options$debugA;
+          return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugTable;
+        },
+        onChange: () => {
+          table._queue(() => {
+            table._autoResetExpanded();
+            table._autoResetPageIndex();
+          });
+        }
+      });
+    }
+    function groupBy(rows, columnId) {
+      const groupMap = new Map();
+      return rows.reduce((map, row) => {
+        const resKey = `${row.getValue(columnId)}`;
+        const previous = map.get(resKey);
+        if (!previous) {
+          map.set(resKey, [row]);
+        } else {
+          previous.push(row);
+        }
+        return map;
+      }, groupMap);
+    }
+
+    function getExpandedRowModel() {
+      return table => memo$1(() => [table.getState().expanded, table.getPreExpandedRowModel(), table.options.paginateExpandedRows], (expanded, rowModel, paginateExpandedRows) => {
+        if (!rowModel.rows.length || expanded !== true && !Object.keys(expanded != null ? expanded : {}).length) {
+          return rowModel;
+        }
+        if (!paginateExpandedRows) {
+          // Only expand rows at this point if they are being paginated
+          return rowModel;
+        }
+        return expandRows(rowModel);
+      }, {
+        key: 'getExpandedRowModel',
+        debug: () => {
+          var _table$options$debugA;
+          return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugTable;
+        }
+      });
+    }
+    function expandRows(rowModel) {
+      const expandedRows = [];
+      const handleRow = row => {
+        var _row$subRows;
+        expandedRows.push(row);
+        if ((_row$subRows = row.subRows) != null && _row$subRows.length && row.getIsExpanded()) {
+          row.subRows.forEach(handleRow);
+        }
+      };
+      rowModel.rows.forEach(handleRow);
+      return {
+        rows: expandedRows,
+        flatRows: rowModel.flatRows,
+        rowsById: rowModel.rowsById
+      };
+    }
+
+    const createGroupHeaderViewTemplate = (groupHeaderViewTag) => html `
+        <${groupHeaderViewTag}
+            :groupHeaderValue="${x => x.groupRowValue}"
+            :columnConfig="${x => x.groupColumn?.columnConfig}"
+            class="group-header-value"
+            >
+        </${groupHeaderViewTag}>
+    `;
+
     // prettier-ignore
-    const template$9 = html `
-    <template role="cell">
+    const template$b = html `
+    <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}">
         ${x => x.cellViewTemplate}
         ${when(x => x.hasActionMenu, html `
             <${menuButtonTag} ${ref('actionMenuButton')}
@@ -27634,6 +27832,11 @@
              * The minimum size in pixels according to the design doc
              */
             this.internalMinPixelWidth = defaultMinPixelWidth;
+            /**
+             * @internal
+             * Whether or not this column can be used to group rows by
+             */
+            this.internalGroupingDisabled = false;
             /**
              * @internal
              *
@@ -27667,6 +27870,11 @@
         internalPixelWidthChanged() {
             this.currentPixelWidth = this.internalPixelWidth;
         }
+        groupHeaderViewTagChanged() {
+            this.internalGroupHeaderViewTemplate = this.groupHeaderViewTag
+                ? createGroupHeaderViewTemplate(this.groupHeaderViewTag)
+                : undefined;
+        }
     }
     __decorate$1([
         attr({ attribute: 'column-id' })
@@ -27701,6 +27909,18 @@
     __decorate$1([
         observable
     ], TableColumn.prototype, "internalMinPixelWidth", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "internalGroupingDisabled", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "internalGroupIndex", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "groupHeaderViewTag", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "internalGroupHeaderViewTemplate", void 0);
     __decorate$1([
         observable
     ], TableColumn.prototype, "cellViewTag", void 0);
@@ -27732,6 +27952,7 @@
             this.duplicateColumnId = false;
             this.missingColumnId = false;
             this.duplicateSortIndex = false;
+            this.duplicateGroupIndex = false;
         }
         getValidity() {
             return {
@@ -27740,7 +27961,8 @@
                 invalidRecordId: this.invalidRecordId,
                 duplicateColumnId: this.duplicateColumnId,
                 missingColumnId: this.missingColumnId,
-                duplicateSortIndex: this.duplicateSortIndex
+                duplicateSortIndex: this.duplicateSortIndex,
+                duplicateGroupIndex: this.duplicateGroupIndex
             };
         }
         isValid() {
@@ -27795,19 +28017,20 @@
             return !this.missingColumnId && !this.duplicateColumnId;
         }
         validateColumnSortIndices(sortIndices) {
-            this.duplicateSortIndex = false;
-            const sortIndexSet = new Set();
-            for (const sortIndex of sortIndices) {
-                if (sortIndexSet.has(sortIndex)) {
-                    this.duplicateSortIndex = true;
-                }
-                sortIndexSet.add(sortIndex);
-            }
+            this.duplicateSortIndex = !this.validateIndicesAreUnique(sortIndices);
             return !this.duplicateSortIndex;
         }
+        validateColumnGroupIndices(groupIndices) {
+            this.duplicateGroupIndex = !this.validateIndicesAreUnique(groupIndices);
+            return !this.duplicateGroupIndex;
+        }
+        validateIndicesAreUnique(indices) {
+            const numberSet = new Set(indices);
+            return numberSet.size === indices.length;
+        }
     }
 
-    const styles$e = css `
+    const styles$g = css `
     ${display('flex')}
 
     :host {
@@ -27903,7 +28126,7 @@
             }
         `));
 
-    const styles$d = css `
+    const styles$f = css `
     ${display('flex')}
 
     :host {
@@ -27922,7 +28145,7 @@
 `;
 
     // prettier-ignore
-    const template$8 = html `
+    const template$a = html `
     <template role="columnheader" aria-sort="${x => x.ariaSort}">
         <slot></slot>
 
@@ -27972,13 +28195,13 @@
     ], TableHeader.prototype, "firstSortedColumn", void 0);
     const nimbleTableHeader = TableHeader.compose({
         baseName: 'table-header',
-        template: template$8,
-        styles: styles$d
+        template: template$a,
+        styles: styles$f
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
     const tableHeaderTag = DesignSystem.tagFor(TableHeader);
 
-    const styles$c = css `
+    const styles$e = css `
     ${display('grid')}
 
     :host {
@@ -28004,11 +28227,19 @@
     }
 `;
 
-    const styles$b = css `
+    const styles$d = css `
     ${display('grid')}
 
     :host {
+        --ni-private-table-cell-nesting-level: 0;
         padding: 0px calc(${standardPadding} / 2);
+        padding-left: calc(
+            ${standardPadding} / 2 +
+                (
+                    var(--ni-private-table-cell-nesting-level) *
+                        ${standardPadding} * 2
+                )
+        );
         align-self: center;
         height: 100%;
         grid-template-columns: 1fr auto;
@@ -28036,6 +28267,7 @@
             super(...arguments);
             this.hasActionMenu = false;
             this.menuOpen = false;
+            this.nestingLevel = 0;
         }
         onActionMenuBeforeToggle(event) {
             this.$emit('cell-action-menu-beforetoggle', event.detail);
@@ -28060,16 +28292,19 @@
     __decorate$1([
         observable
     ], TableCell.prototype, "cellViewTemplate", void 0);
+    __decorate$1([
+        observable
+    ], TableCell.prototype, "nestingLevel", void 0);
     const nimbleTableCell = TableCell.compose({
         baseName: 'table-cell',
-        template: template$9,
-        styles: styles$b
+        template: template$b,
+        styles: styles$d
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
     const tableCellTag = DesignSystem.tagFor(TableCell);
 
     // prettier-ignore
-    const template$7 = html `
+    const template$9 = html `
     <template role="row">
         ${repeat(x => x.columnStates, html `
             ${when(x => !x.column.columnHidden, html `
@@ -28081,6 +28316,7 @@
                     action-menu-label="${x => x.column.actionMenuLabel}"
                     @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x.column)}"
                     @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x.column)}"
+                    :nestingLevel="${x => x.cellIndentLevel};"
                 >
 
                     ${when((x, c) => (c.parent.currentActionMenuColumn === x.column) && x.column.actionMenuSlot, html `
@@ -28103,17 +28339,18 @@
         constructor() {
             super(...arguments);
             this.columns = [];
+            this.nestingLevel = 0;
             this.menuOpen = false;
         }
         get columnStates() {
-            return this.columns.map(column => {
+            return this.columns.map((column, i) => {
                 const fieldNames = column.dataRecordFieldNames;
                 let cellState;
                 if (this.hasValidFieldNames(fieldNames) && this.dataRecord) {
                     const cellDataValues = fieldNames.map(field => this.dataRecord[field]);
-                    const cellRecord = Object.fromEntries(column.cellRecordFieldNames.map((k, i) => [
+                    const cellRecord = Object.fromEntries(column.cellRecordFieldNames.map((k, j) => [
                         k,
-                        cellDataValues[i]
+                        cellDataValues[j]
                     ]));
                     const columnConfig = column.columnConfig ?? {};
                     cellState = {
@@ -28122,9 +28359,13 @@
                     };
                 }
                 else {
-                    cellState = { cellRecord: {}, columnConfig: {} };
+                    cellState = {
+                        cellRecord: {},
+                        columnConfig: {}
+                    };
                 }
-                return { column, cellState };
+                const cellIndentLevel = i === 0 ? this.nestingLevel : 0;
+                return { column, cellState, cellIndentLevel };
             });
         }
         onCellActionMenuBeforeToggle(event, column) {
@@ -28168,6 +28409,9 @@
     __decorate$1([
         observable
     ], TableRow.prototype, "currentActionMenuColumn", void 0);
+    __decorate$1([
+        observable
+    ], TableRow.prototype, "nestingLevel", void 0);
     __decorate$1([
         attr({ attribute: 'menu-open', mode: 'boolean' })
     ], TableRow.prototype, "menuOpen", void 0);
@@ -28176,14 +28420,150 @@
     ], TableRow.prototype, "columnStates", null);
     const nimbleTableRow = TableRow.compose({
         baseName: 'table-row',
-        template: template$7,
-        styles: styles$c
+        template: template$9,
+        styles: styles$e
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
     const tableRowTag = DesignSystem.tagFor(TableRow);
 
+    const styles$c = css `
+    ${display('flex')}
+
+    :host {
+        align-items: center;
+        height: calc(${controlHeight} + 2 * ${borderWidth});
+        border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
+        padding-left: calc(
+            ${smallPadding} * 2 + ${standardPadding} * 2 *
+                var(--ni-private-table-group-row-indent-level)
+        );
+    }
+
+    :host(:hover) {
+        background: ${fillHoverColor};
+    }
+
+    :host([expanded]) .animating,
+    :host .animating {
+        transition: ${mediumDelay} ease-in-out;
+    }
+
+    .expand-collapse-button {
+        width: ${controlSlimHeight};
+        height: ${controlSlimHeight};
+    }
+
+    :host([expanded]) .expander-icon {
+        transform: rotate(90deg);
+    }
+
+    .expander-icon {
+        transform: rotate(0deg);
+    }
+
+    .group-row-header-content {
+        display: flex;
+        overflow: hidden;
+    }
+
+    .group-header-value {
+        padding-left: calc(${standardPadding} / 2);
+        user-select: none;
+        overflow: hidden;
+        display: flex;
+    }
+
+    .group-row-child-count {
+        padding-left: 2px;
+        pointer-events: none;
+        user-select: none;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host .animating,
+        :host([expanded]) .animating {
+            transition-duration: 0s;
+        }
+    }
+`;
+
+    /* eslint-disable @typescript-eslint/indent */
     // prettier-ignore
-    const template$6 = html `
+    const template$8 = html `
+    <template @click=${x => x.onGroupExpandToggle()} style="--ni-private-table-group-row-indent-level: ${x => x.nestingLevel};">
+        <${buttonTag}
+            appearance="${ButtonAppearance.ghost}"
+            content-hidden
+            class="expand-collapse-button"
+            tabindex="-1"
+        >
+            <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot="start" class="expander-icon ${x => x.animationClass}"></${iconArrowExpanderRightTag}>
+        </${buttonTag}>
+        <div class="group-row-header-content">
+            ${x => x.groupColumn?.internalGroupHeaderViewTemplate}
+            <div class="group-row-child-count">(${x => x.leafItemCount})</span>
+        </div>
+    </template>
+`;
+
+    /**
+     * A styled cell that is used within the nimble-table-row.
+     * @internal
+     */
+    class TableGroupRow extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            this.nestingLevel = 0;
+            this.expanded = false;
+            /**
+             * @internal
+             */
+            this.animationClass = '';
+            this.removeAnimatingClass = () => {
+                this.animationClass = '';
+                this.expandIcon.removeEventListener('transitionend', this.removeAnimatingClass);
+            };
+        }
+        onGroupExpandToggle() {
+            this.$emit('group-expand-toggle');
+            // To avoid a visual glitch with improper expand/collapse icons performing an
+            // animation, we apply a class to the appropriate group row such that we can have
+            // a more targeted CSS animation. We use the 'transitionend' event to remove the
+            // temporary class and register a function reference as the handler to avoid issues
+            // that may result from the 'transitionend' event not firing, as it will never result
+            // in multiple event listeners being registered.
+            this.animationClass = 'animating';
+            this.expandIcon.addEventListener('transitionend', this.removeAnimatingClass);
+        }
+    }
+    __decorate$1([
+        observable
+    ], TableGroupRow.prototype, "groupRowValue", void 0);
+    __decorate$1([
+        observable
+    ], TableGroupRow.prototype, "nestingLevel", void 0);
+    __decorate$1([
+        observable
+    ], TableGroupRow.prototype, "leafItemCount", void 0);
+    __decorate$1([
+        observable
+    ], TableGroupRow.prototype, "groupColumn", void 0);
+    __decorate$1([
+        attr({ mode: 'boolean' })
+    ], TableGroupRow.prototype, "expanded", void 0);
+    __decorate$1([
+        observable
+    ], TableGroupRow.prototype, "animationClass", void 0);
+    const nimbleTableGroupRow = TableGroupRow.compose({
+        baseName: 'table-group-row',
+        template: template$8,
+        styles: styles$c
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
+    const tableGroupRowTag = DesignSystem.tagFor(TableGroupRow);
+
+    // prettier-ignore
+    const template$7 = html `
     <template role="table" ${children$1({ property: 'childItems', filter: elements() })}>
         <div class="table-container" style="
             --ni-private-table-scroll-x: -${x => x.scrollX}px;
@@ -28214,23 +28594,38 @@
                      role="rowgroup">
                     ${when(x => x.columns.length > 0 && x.canRenderRows, html `
                         ${repeat(x => x.virtualizer.visibleItems, html `
-                            <${tableRowTag}
-                                class="row"
-                                record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
-                                :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
-                                :columns="${(_, c) => c.parent.columns}"
-                                @row-action-menu-beforetoggle="${(_, c) => c.parent.onRowActionMenuBeforeToggle(c.event)}"
-                                @row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
-                            >
-                            ${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
-                                ${repeat((_, c) => c.parent.actionMenuSlots, html `
-                                    <slot
-                                        name="${x => x}"
-                                        slot="${x => `row-action-menu-${x}`}">
-                                    </slot>
-                                `)}
-                            `)}                        
-                            </${tableRowTag}>
+                            ${when((x, c) => c.parent.tableData[x.index]?.isGrouped, html `
+                                <${tableGroupRowTag}
+                                    class="group-row"
+                                    :groupRowValue="${(x, c) => c.parent.tableData[x.index]?.groupRowValue}"
+                                    ?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
+                                    :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
+                                    :leafItemCount="${(x, c) => c.parent.tableData[x.index]?.leafItemCount}"
+                                    :groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
+                                    @group-expand-toggle="${(x, c) => c.parent.handleGroupRowExpanded(x.index, c.event)}"
+                                    >
+                                </${tableGroupRowTag}>
+                            `)}
+                            ${when((x, c) => !c.parent.tableData[x.index]?.isGrouped, html `
+                                <${tableRowTag}
+                                    class="row"
+                                    record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
+                                    :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
+                                    :columns="${(_, c) => c.parent.columns}"
+                                    :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
+                                    @row-action-menu-beforetoggle="${(_, c) => c.parent.onRowActionMenuBeforeToggle(c.event)}"
+                                    @row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
+                                >
+                                ${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
+                                    ${repeat((_, c) => c.parent.actionMenuSlots, html `
+                                        <slot
+                                            name="${x => x}"
+                                            slot="${x => `row-action-menu-${x}`}">
+                                        </slot>
+                                    `)}
+                                `)}                        
+                                </${tableRowTag}>
+                            `)}
                         `)}
                     `)}
                 </div>
@@ -28889,12 +29284,13 @@
      * @internal
      */
     class Virtualizer {
-        constructor(table) {
+        constructor(table, tanStackTable) {
             this.visibleItems = [];
             this.allRowsHeight = 0;
             this.headerContainerMarginRight = 0;
             this.rowContainerYOffset = 0;
             this.table = table;
+            this.tanStackTable = tanStackTable;
             this.viewportResizeObserver = new ResizeObserver(entries => {
                 const borderBoxSize = entries[0]?.borderBoxSize[0];
                 if (borderBoxSize) {
@@ -28932,7 +29328,7 @@
             const rowHeight = parseFloat(controlHeight.getValueFor(this.table))
                 + 2 * parseFloat(borderWidth.getValueFor(this.table));
             return {
-                count: this.table.tableData.length,
+                count: this.tanStackTable.getRowModel().rows.length,
                 getScrollElement: () => {
                     return this.table.viewport;
                 },
@@ -29045,6 +29441,7 @@
         constructor(table) {
             this.requiredUpdates = {
                 rowIds: false,
+                groupRows: false,
                 columnIds: false,
                 columnSort: false,
                 columnWidths: false,
@@ -29057,6 +29454,9 @@
         get updateRowIds() {
             return this.requiredUpdates.rowIds;
         }
+        get updateGroupRows() {
+            return this.requiredUpdates.groupRows;
+        }
         get updateColumnIds() {
             return this.requiredUpdates.columnIds;
         }
@@ -29075,7 +29475,8 @@
         get requiresTanStackUpdate() {
             return (this.requiredUpdates.rowIds
                 || this.requiredUpdates.columnSort
-                || this.requiredUpdates.columnDefinition);
+                || this.requiredUpdates.columnDefinition
+                || this.requiredUpdates.groupRows);
         }
         get requiresTanStackDataReset() {
             return (this.requiredUpdates.rowIds || this.requiredUpdates.columnDefinition);
@@ -29100,6 +29501,9 @@
             else if (isColumnProperty(changedColumnProperty, 'actionMenuSlot')) {
                 this.requiredUpdates.actionMenuSlots = true;
             }
+            else if (isColumnProperty(changedColumnProperty, 'internalGroupIndex', 'internalGroupingDisabled')) {
+                this.requiredUpdates.groupRows = true;
+            }
             this.queueUpdate();
         }
         trackColumnInstancesChanged() {
@@ -29108,6 +29512,7 @@
             this.requiredUpdates.columnSort = true;
             this.requiredUpdates.columnWidths = true;
             this.requiredUpdates.actionMenuSlots = true;
+            this.requiredUpdates.groupRows = true;
             this.queueUpdate();
         }
         trackIdFieldNameChanged() {
@@ -29195,22 +29600,54 @@
             this.tableValidator = new TableValidator();
             this.updateTracker = new UpdateTracker(this);
             this.columnNotifiers = [];
+            this.collapsedRows = new Set();
             this.onViewPortScroll = (event) => {
                 this.scrollX = event.target.scrollLeft;
             };
+            this.getIsRowExpanded = (row) => {
+                if (!row.getIsGrouped()) {
+                    return false;
+                }
+                const expandedState = this.table.options.state.expanded;
+                if (expandedState === true) {
+                    return true;
+                }
+                if (Object.keys(expandedState ?? {}).includes(row.id)) {
+                    return expandedState[row.id];
+                }
+                return !this.collapsedRows.has(row.id);
+            };
+            this.handleExpandedChange = (updaterOrValue) => {
+                const expandedState = updaterOrValue instanceof Function
+                    ? updaterOrValue(this.table.getState().expanded)
+                    : updaterOrValue;
+                this.updateTableOptions({
+                    state: {
+                        expanded: expandedState
+                    }
+                });
+            };
             this.options = {
                 data: [],
                 onStateChange: (_) => { },
+                onExpandedChange: this.handleExpandedChange,
                 getCoreRowModel: getCoreRowModel(),
                 getSortedRowModel: getSortedRowModel(),
+                getGroupedRowModel: getGroupedRowModel(),
+                getExpandedRowModel: getExpandedRowModel(),
+                getIsRowExpanded: this.getIsRowExpanded,
                 columns: [],
-                state: {},
+                state: {
+                    grouping: [],
+                    expanded: true // Workaround until we can apply a fix to TanStack regarding leveraging our getIsRowExpanded implementation
+                },
                 enableSorting: true,
+                enableGrouping: true,
                 renderFallbackValue: null,
                 autoResetAll: false
             };
             this.table = createTable(this.options);
-            this.virtualizer = new Virtualizer(this);
+            this.virtualizer = new Virtualizer(this, this.table);
         }
         get validity() {
             return this.tableValidator.getValidity();
@@ -29258,6 +29695,10 @@
                 this.openActionMenuRecordId = undefined;
             }
         }
+        handleGroupRowExpanded(rowIndex, event) {
+            this.toggleGroupExpanded(rowIndex);
+            event.stopPropagation();
+        }
         /**
          * @internal
          */
@@ -29304,6 +29745,10 @@
             return this.columns.filter(x => x.sortDirection !== TableColumnSortDirection.none
                 && typeof x.sortIndex === 'number');
         }
+        getColumnsParticipatingInGrouping() {
+            return this.columns.filter(x => !x.internalGroupingDisabled
+                && typeof x.internalGroupIndex === 'number');
+        }
         childItemsChanged() {
             void this.updateColumnsFromChildItems();
         }
@@ -29331,6 +29776,11 @@
                 // Perform a shallow copy of the data to trigger tanstack to regenerate the row models and columns.
                 updatedOptions.data = [...this.table.options.data];
             }
+            if (this.updateTracker.updateGroupRows) {
+                updatedOptions.state.grouping = this.calculateTanStackGroupingState();
+                updatedOptions.state.expanded = true;
+                this.collapsedRows.clear();
+            }
             this.updateTableOptions(updatedOptions);
         }
         updateActionMenuSlots() {
@@ -29348,6 +29798,7 @@
         validate() {
             this.tableValidator.validateColumnIds(this.columns.map(x => x.columnId));
             this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.sortIndex));
+            this.tableValidator.validateColumnGroupIndices(this.getColumnsParticipatingInGrouping().map(x => x.internalGroupIndex));
             this.validateWithData(this.table.options.data);
         }
         validateWithData(data) {
@@ -29368,12 +29819,30 @@
             this.tableData = rows.map(row => {
                 const rowState = {
                     record: row.original,
-                    id: row.id
+                    id: row.id,
+                    isGrouped: row.getIsGrouped(),
+                    isExpanded: row.getIsExpanded(),
+                    groupRowValue: row.getIsGrouped()
+                        ? row.getValue(row.groupingColumnId)
+                        : undefined,
+                    nestingLevel: row.depth,
+                    leafItemCount: row
+                        .getLeafRows()
+                        .filter(leafRow => leafRow.getLeafRows().length === 0)
+                        .length,
+                    groupColumn: this.getGroupRowColumn(row)
                 };
                 return rowState;
             });
             this.virtualizer.dataChanged();
         }
+        getGroupRowColumn(row) {
+            const groupedId = row.groupingColumnId;
+            if (groupedId !== undefined) {
+                return this.columns.find(c => c.internalUniqueId === groupedId);
+            }
+            return undefined;
+        }
         updateTableOptions(updatedOptions) {
             this.options = {
                 ...this.options,
@@ -29383,6 +29852,18 @@
             this.table.setOptions(this.options);
             this.refreshRows();
         }
+        toggleGroupExpanded(rowIndex) {
+            const row = this.table.getRowModel().rows[rowIndex];
+            const wasExpanded = row.getIsExpanded();
+            // must update the collapsedRows before toggling expanded state
+            if (wasExpanded) {
+                this.collapsedRows.add(row.id);
+            }
+            else {
+                this.collapsedRows.delete(row.id);
+            }
+            row.toggleExpanded();
+        }
         calculateTanStackSortState() {
             const sortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.sortIndex - y.sortIndex);
             this.firstSortedColumn = sortedColumns.length
@@ -29395,6 +29876,10 @@
                 };
             });
         }
+        calculateTanStackGroupingState() {
+            const groupedColumns = this.getColumnsParticipatingInGrouping().sort((x, y) => x.internalGroupIndex - y.internalGroupIndex);
+            return groupedColumns.map(column => column.internalUniqueId);
+        }
         calculateTanStackRowIdFunction() {
             return this.idFieldName === null || this.idFieldName === undefined
                 ? undefined
@@ -29451,13 +29936,13 @@
     ], Table.prototype, "firstSortedColumn", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
-        template: template$6,
-        styles: styles$e
+        template: template$7,
+        styles: styles$g
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
     DesignSystem.tagFor(Table);
 
-    const styles$a = css `
+    const styles$b = css `
     :host {
         display: contents;
     }
@@ -29469,7 +29954,7 @@
     }
 `;
 
-    const template$5 = html `
+    const template$6 = html `
     <template>
         <span class="header-content">
             <slot></slot>
@@ -29516,6 +30001,123 @@
         return FractionalWidthColumn;
     }
 
+    // As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+    function mixinGroupableColumnAPI(base) {
+        /**
+         * The Mixin that provides a concrete column with the API to allow grouping
+         * by the values in that column.
+         */
+        class GroupableColumn extends base {
+            constructor() {
+                super(...arguments);
+                this.groupingDisabled = false;
+                this.groupIndex = null;
+            }
+            groupingDisabledChanged() {
+                this.internalGroupingDisabled = this.groupingDisabled;
+            }
+            groupIndexChanged() {
+                if (typeof this.groupIndex === 'number') {
+                    this.internalGroupIndex = this.groupIndex;
+                }
+                else {
+                    this.internalGroupIndex = undefined;
+                }
+            }
+        }
+        attr({ attribute: 'grouping-disabled', mode: 'boolean' })(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        GroupableColumn.prototype, 'groupingDisabled');
+        attr({ attribute: 'group-index', converter: nullableNumberConverter })(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        GroupableColumn.prototype, 'groupIndex');
+        return GroupableColumn;
+    }
+
+    /**
+     * The base class for group header views, which are displayed in a TableGroupRow.
+     * A TableColumn that uses the GroupableColumn mixin must provide a TableGroupHeaderView
+     * type (linked via TableColumn.groupHeaderViewTag).
+     */
+    class TableGroupHeaderView extends FoundationElement {
+    }
+    __decorate$1([
+        observable
+    ], TableGroupHeaderView.prototype, "groupHeaderValue", void 0);
+    __decorate$1([
+        observable
+    ], TableGroupHeaderView.prototype, "columnConfig", void 0);
+
+    const template$5 = html `
+    <span
+        ${ref('textSpan')}
+        class="${x => (typeof x.groupHeaderValue === 'string' ? '' : 'placeholder')}"
+        @mouseover="${x => x.updateTitleOverflow()}"
+        @mouseout="${x => x.clearTitleOverflow()}"
+        title="${x => (x.isValidContentAndHasOverflow && x.content
+    ? x.content
+    : undefined)}"
+    >
+        ${x => x.content}
+    </span>
+`;
+
+    const styles$a = css `
+    span {
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .placeholder {
+        color: ${controlLabelFontColor};
+    }
+`;
+
+    /**
+     * The custom element used to render a group row header for a group representing rows
+     * grouped by a TableColumnText column.
+     */
+    class TableColumnTextGroupHeaderView extends TableGroupHeaderView {
+        constructor() {
+            super(...arguments);
+            /** @internal */
+            this.isValidContentAndHasOverflow = false;
+        }
+        get content() {
+            return typeof this.groupHeaderValue === 'string'
+                ? this.groupHeaderValue
+                : this.columnConfig?.placeholder ?? '';
+        }
+        updateTitleOverflow() {
+            this.isValidContentAndHasOverflow = this.textSpan.offsetWidth < this.textSpan.scrollWidth;
+        }
+        clearTitleOverflow() {
+            this.isValidContentAndHasOverflow = false;
+        }
+    }
+    __decorate$1([
+        observable
+    ], TableColumnTextGroupHeaderView.prototype, "columnConfig", void 0);
+    __decorate$1([
+        observable
+    ], TableColumnTextGroupHeaderView.prototype, "isValidContentAndHasOverflow", void 0);
+    __decorate$1([
+        volatile
+    ], TableColumnTextGroupHeaderView.prototype, "content", null);
+    const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
+        baseName: 'table-column-text-group-header',
+        template: template$5,
+        styles: styles$a
+    });
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(tableColumnTextGroupHeaderView());
+    const tableColumnTextGroupHeaderTag = DesignSystem.tagFor(TableColumnTextGroupHeaderView);
+
     const styles$9 = css `
     span {
         font: ${bodyFont};
@@ -29602,12 +30204,16 @@
     /**
      * The table column for displaying strings.
      */
-    class TableColumnText extends mixinFractionalWidthColumnAPI(TableColumnTextBase) {
+    class TableColumnText extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(TableColumnTextBase)) {
+        constructor() {
+            super(...arguments);
+            this.groupHeaderViewTag = tableColumnTextGroupHeaderTag;
+        }
     }
     const nimbleTableColumnText = TableColumnText.compose({
         baseName: 'table-column-text',
-        template: template$5,
-        styles: styles$a
+        template: template$6,
+        styles: styles$b
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -29705,7 +30311,7 @@
 
     const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$t}
+    ${styles$v}
 
     :host {
         font: ${bodyFont};
@@ -30051,7 +30657,7 @@
 
     const styles$5 = css `
     ${display('inline-block')}
-    ${styles$t}
+    ${styles$v}
 
     :host {
         font: ${bodyFont};
@@ -30707,7 +31313,7 @@
     .expand-collapse-button svg {
         width: ${iconSize};
         height: ${iconSize};
-        transition: transform 0.2s ease-in;
+        transition: transform ${mediumDelay} ease-in;
         pointer-events: none;
         fill: currentcolor;
     }