@ni/nimble-components 18.10.2 → 18.10.4

package/dist/esm/anchor-tab/index.d.ts

@@ -17,5 +17,14 @@ export declare class AnchorTab extends AnchorBase {
      * HTML Attribute: disabled
      */
     disabled: boolean;
+    /**
+     * 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
+     */
+    ariaSelected: string;
 }
 export declare const anchorTabTag: string;

package/dist/esm/anchor-tab/index.js

@@ -17,11 +17,23 @@ export class AnchorTab extends AnchorBase {
          * 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([
     attr({ mode: 'boolean' })
 ], AnchorTab.prototype, "disabled", void 0);
+__decorate([
+    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',

package/dist/esm/anchor-tab/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-tab/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EAGf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAUtC;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QACI;;;;;WAKG;QAEI,aAAQ,GAAG,KAAK,CAAC;IAC5B,CAAC;CAAA;AADG;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACF;AAG5B,uFAAuF;AAEvF,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-tab/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EAGf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAUtC;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QACI;;;;;WAKG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAExB;;;;;;;WAOG;QAEa,iBAAY,GAAG,OAAO,CAAC;IAC3C,CAAC;CAAA;AAZG;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACF;AAWxB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;+CACE;AAG3C,uFAAuF;AAEvF,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC"}

package/dist/esm/table/components/cell/index.d.ts

@@ -18,6 +18,7 @@ export declare class TableCell<TCellRecord extends TableCellRecord = TableCellRe
     menuOpen: boolean;
     actionMenuLabel?: string;
     cellViewTemplate?: ViewTemplate<TableCell>;
+    nestingLevel: number;
     readonly actionMenuButton?: MenuButton;
     onActionMenuBeforeToggle(event: CustomEvent<MenuButtonToggleEventDetail>): void;
     onActionMenuToggle(event: CustomEvent<MenuButtonToggleEventDetail>): void;

package/dist/esm/table/components/cell/index.js

@@ -12,6 +12,7 @@ export class TableCell extends FoundationElement {
         super(...arguments);
         this.hasActionMenu = false;
         this.menuOpen = false;
+        this.nestingLevel = 0;
     }
     onActionMenuBeforeToggle(event) {
         this.$emit('cell-action-menu-beforetoggle', event.detail);
@@ -36,6 +37,9 @@ __decorate([
 __decorate([
     observable
 ], TableCell.prototype, "cellViewTemplate", void 0);
+__decorate([
+    observable
+], TableCell.prototype, "nestingLevel", void 0);
 const nimbleTableCell = TableCell.compose({
     baseName: 'table-cell',
     template,

package/dist/esm/table/components/cell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAO7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,SAEX,SAAQ,iBAAiB;IAF3B;;QAOW,kBAAa,GAAG,KAAK,CAAC;QAGtB,aAAQ,GAAG,KAAK,CAAC;IAsB5B,CAAC;IAZU,wBAAwB,CAC3B,KAA+C;QAE/C,IAAI,CAAC,KAAK,CAAC,+BAA+B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9D,CAAC;IAEM,kBAAkB,CACrB,KAA+C;QAE/C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACxD,CAAC;CACJ;AA5BG;IADC,UAAU;4CACoC;AAG/C;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC3B;AAG7B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CAC1B;AAGxB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;kDACT;AAGhC;IADC,UAAU;mDACuC;AAkBtD,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAO7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,SAEX,SAAQ,iBAAiB;IAF3B;;QAOW,kBAAa,GAAG,KAAK,CAAC;QAGtB,aAAQ,GAAG,KAAK,CAAC;QASjB,iBAAY,GAAG,CAAC,CAAC;IAgB5B,CAAC;IAZU,wBAAwB,CAC3B,KAA+C;QAE/C,IAAI,CAAC,KAAK,CAAC,+BAA+B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9D,CAAC;IAEM,kBAAkB,CACrB,KAA+C;QAE/C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACxD,CAAC;CACJ;AA/BG;IADC,UAAU;4CACoC;AAG/C;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC3B;AAG7B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CAC1B;AAGxB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;kDACT;AAGhC;IADC,UAAU;mDACuC;AAGlD;IADC,UAAU;+CACa;AAkB5B,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC"}

package/dist/esm/table/components/cell/styles.js

@@ -5,7 +5,15 @@ export const styles = 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;

package/dist/esm/table/components/cell/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;4BAGO,eAAe;;;;;;;;;;;;;;;;;CAiB1C,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;4BAIO,eAAe;;cAE7B,eAAe;;;0BAGH,eAAe;;;;;;;;;;;;;;;;;;;CAmBxC,CAAC"}

package/dist/esm/table/components/cell/template.js

@@ -4,7 +4,7 @@ import { menuButtonTag } from '../../../menu-button';
 import { ButtonAppearance } from '../../../menu-button/types';
 // prettier-ignore
 export const template = html `
-    <template role="cell">
+    <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}">
         ${x => x.cellViewTemplate}
         ${when(x => x.hasActionMenu, html `
             <${menuButtonTag} ${ref('actionMenuButton')}

package/dist/esm/table/components/cell/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EACH,gBAAgB,EAEnB,MAAM,4BAA4B,CAAC;AAEpC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAW;;UAE7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;UACvB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,IAAI,CAAW;eACrC,aAAa,IAAI,GAAG,CAAC,kBAAkB,CAAC;;8BAEzB,gBAAgB,CAAC,KAAK;iCACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,KAAiD,CAAC;2BAC/F,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAiD,CAAC;;;mBAG3F,oBAAoB,mBAAmB,oBAAoB;kBAC5D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;gBAExB,aAAa;SACpB,CAAC;;CAET,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAClC,WAAmB,EACI,EAAE,CAAC,IAAI,CAAW,IAAI,WAAW;uBACrC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,UAAU;yBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,YAAY;;QAE/C,WAAW,GAAG,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EACH,gBAAgB,EAEnB,MAAM,4BAA4B,CAAC;AAEpC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAW;0EACmC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;UACnF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;UACvB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,IAAI,CAAW;eACrC,aAAa,IAAI,GAAG,CAAC,kBAAkB,CAAC;;8BAEzB,gBAAgB,CAAC,KAAK;iCACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,KAAiD,CAAC;2BAC/F,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAiD,CAAC;;;mBAG3F,oBAAoB,mBAAmB,oBAAoB;kBAC5D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;gBAExB,aAAa;SACpB,CAAC;;CAET,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAClC,WAAmB,EACI,EAAE,CAAC,IAAI,CAAW,IAAI,WAAW;uBACrC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,UAAU;yBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,YAAY;;QAE/C,WAAW,GAAG,CAAC"}

package/dist/esm/table/components/group-row/index.d.ts

@@ -0,0 +1,29 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { TableColumn } from '../../../table-column/base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-table-group-row': TableGroupRow;
+    }
+}
+/**
+ * A styled cell that is used within the nimble-table-row.
+ * @internal
+ */
+export declare class TableGroupRow extends FoundationElement {
+    groupRowValue?: unknown;
+    nestingLevel: number;
+    leafItemCount?: number;
+    groupColumn?: TableColumn;
+    expanded: boolean;
+    /**
+     * @internal
+     */
+    readonly expandIcon: HTMLElement;
+    /**
+     * @internal
+     */
+    animationClass: string;
+    onGroupExpandToggle(): void;
+    private readonly removeAnimatingClass;
+}
+export declare const tableGroupRowTag: string;

package/dist/esm/table/components/group-row/index.js

@@ -0,0 +1,61 @@
+import { __decorate } from "tslib";
+import { attr, observable } from '@microsoft/fast-element';
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A styled cell that is used within the nimble-table-row.
+ * @internal
+ */
+export 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([
+    observable
+], TableGroupRow.prototype, "groupRowValue", void 0);
+__decorate([
+    observable
+], TableGroupRow.prototype, "nestingLevel", void 0);
+__decorate([
+    observable
+], TableGroupRow.prototype, "leafItemCount", void 0);
+__decorate([
+    observable
+], TableGroupRow.prototype, "groupColumn", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], TableGroupRow.prototype, "expanded", void 0);
+__decorate([
+    observable
+], TableGroupRow.prototype, "animationClass", void 0);
+const nimbleTableGroupRow = TableGroupRow.compose({
+    baseName: 'table-group-row',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
+export const tableGroupRowTag = DesignSystem.tagFor(TableGroupRow);
+//# sourceMappingURL=index.js.map

package/dist/esm/table/components/group-row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,iBAAiB;IAApD;;QAKW,iBAAY,GAAG,CAAC,CAAC;QASjB,aAAQ,GAAG,KAAK,CAAC;QAOxB;;WAEG;QAEI,mBAAc,GAAG,EAAE,CAAC;QAiBV,yBAAoB,GAAG,GAAS,EAAE;YAC/C,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;YACzB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAC/B,eAAe,EACf,IAAI,CAAC,oBAAoB,CAC5B,CAAC;QACN,CAAC,CAAC;IACN,CAAC;IAtBU,mBAAmB;QACtB,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;QAClC,6EAA6E;QAC7E,iFAAiF;QACjF,gFAAgF;QAChF,mFAAmF;QACnF,qFAAqF;QACrF,gDAAgD;QAChD,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;QAClC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAC5B,eAAe,EACf,IAAI,CAAC,oBAAoB,CAC5B,CAAC;IACN,CAAC;CASJ;AA/CG;IADC,UAAU;oDACoB;AAG/B;IADC,UAAU;mDACa;AAGxB;IADC,UAAU;oDACmB;AAG9B;IADC,UAAU;kDACsB;AAGjC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CACF;AAWxB;IADC,UAAU;qDACgB;AA0B/B,MAAM,mBAAmB,GAAG,aAAa,CAAC,OAAO,CAAC;IAC9C,QAAQ,EAAE,iBAAiB;IAC3B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,mBAAmB,EAAE,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,gBAAgB,GAAG,YAAY,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC"}

package/dist/esm/table/components/group-row/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/table/components/group-row/styles.js

@@ -0,0 +1,64 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { borderWidth, controlHeight, controlSlimHeight, fillHoverColor, mediumDelay, smallPadding, standardPadding, tableRowBorderColor } from '../../../theme-provider/design-tokens';
+export const styles = 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;
+        }
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/table/components/group-row/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,YAAY,EACZ,eAAe,EACf,mBAAmB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;uBAIE,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,mBAAmB;;cAE1D,YAAY,UAAU,eAAe;;;;;;sBAM7B,cAAc;;;;;sBAKd,WAAW;;;;iBAIhB,iBAAiB;kBAChB,iBAAiB;;;;;;;;;;;;;;;;;6BAiBN,eAAe;;;;;;;;;;;;;;;;;;CAkB3C,CAAC"}

package/dist/esm/table/components/group-row/template.d.ts

@@ -0,0 +1,2 @@
+import type { TableGroupRow } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<TableGroupRow, any>;

package/dist/esm/table/components/group-row/template.js

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/indent */
+import { html, ref } from '@microsoft/fast-element';
+import { buttonTag } from '../../../button';
+import { ButtonAppearance } from '../../../button/types';
+import { iconArrowExpanderRightTag } from '../../../icons/arrow-expander-right';
+// prettier-ignore
+export const template = 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>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/table/components/group-row/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/template.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AAEhF,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAe;uBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE,sDAAsD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;WACjH,SAAS;0BACM,gBAAgB,CAAC,KAAK;;;;;eAKjC,yBAAyB,IAAI,GAAG,CAAC,YAAY,CAAC,sCAAsC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,OAAO,yBAAyB;YAC5I,SAAS;;cAEP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,+BAA+B;kDACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;;;CAGrE,CAAC"}

package/dist/esm/table/components/row/index.d.ts

@@ -11,6 +11,7 @@ declare global {
 export interface ColumnState {
     column: TableColumn;
     cellState: TableCellState;
+    cellIndentLevel: number;
 }
 /** Represents a single row (element) in the Table's data  */
 export interface TableDataRecord extends TableRecord {
@@ -24,6 +25,7 @@ export declare class TableRow<TDataRecord extends TableDataRecord = TableDataRec
     dataRecord?: TDataRecord;
     columns: TableColumn[];
     currentActionMenuColumn?: TableColumn;
+    nestingLevel: number;
     menuOpen: boolean;
     get columnStates(): ColumnState[];
     onCellActionMenuBeforeToggle(event: CustomEvent<MenuButtonToggleEventDetail>, column: TableColumn): void;

package/dist/esm/table/components/row/index.js

@@ -12,17 +12,18 @@ export class TableRow extends FoundationElement {
     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 = {
@@ -31,9 +32,13 @@ export class TableRow extends FoundationElement {
                 };
             }
             else {
-                cellState = { cellRecord: {}, columnConfig: {} };
+                cellState = {
+                    cellRecord: {},
+                    columnConfig: {}
+                };
             }
-            return { column, cellState };
+            const cellIndentLevel = i === 0 ? this.nestingLevel : 0;
+            return { column, cellState, cellIndentLevel };
         });
     }
     onCellActionMenuBeforeToggle(event, column) {
@@ -77,6 +82,9 @@ __decorate([
 __decorate([
     observable
 ], TableRow.prototype, "currentActionMenuColumn", void 0);
+__decorate([
+    observable
+], TableRow.prototype, "nestingLevel", void 0);
 __decorate([
     attr({ attribute: 'menu-open', mode: 'boolean' })
 ], TableRow.prototype, "menuOpen", void 0);

package/dist/esm/table/components/row/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/row/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/row/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAkBpC;;;GAGG;AACH,MAAM,OAAO,QAEX,SAAQ,iBAAiB;IAF3B;;QAUW,YAAO,GAAkB,EAAE,CAAC;QAM5B,iBAAY,GAAG,CAAC,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;IAmF5B,CAAC;IAhFG,IAAW,YAAY;QACnB,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAClC,MAAM,UAAU,GAAG,MAAM,CAAC,oBAAoB,CAAC;YAC/C,IAAI,SAAyB,CAAC;YAC9B,IAAI,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE;gBACxD,MAAM,cAAc,GAAG,UAAU,CAAC,GAAG,CACjC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAW,CAAC,KAAK,CAAC,CACnC,CAAC;gBACF,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CACjC,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;oBACtC,CAAC;oBACD,cAAc,CAAC,CAAC,CAAC;iBACpB,CAAC,CACL,CAAC;gBACF,MAAM,YAAY,GAAG,MAAM,CAAC,YAAY,IAAI,EAAE,CAAC;gBAC/C,SAAS,GAAG;oBACR,UAAU;oBACV,YAAY;iBACf,CAAC;aACL;iBAAM;gBACH,SAAS,GAAG;oBACR,UAAU,EAAE,EAAE;oBACd,YAAY,EAAE,EAAE;iBACnB,CAAC;aACL;YACD,MAAM,eAAe,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;YACxD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;QAClD,CAAC,CAAC,CAAC;IACP,CAAC;IAEM,4BAA4B,CAC/B,KAA+C,EAC/C,MAAmB;QAEnB,IAAI,CAAC,uBAAuB,GAAG,MAAM,CAAC;QACtC,IAAI,CAAC,eAAe,CAChB,8BAA8B,EAC9B,KAAK,CAAC,MAAM,EACZ,MAAM,CACT,CAAC;IACN,CAAC;IAEM,sBAAsB,CACzB,KAA+C,EAC/C,MAAmB;QAEnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,eAAe,CAAC,wBAAwB,EAAE,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzE,CAAC;IAEM,oBAAoB;QACvB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC/D,CAAC,CAAC,EAAE,CAAC,CAAC,YAAY,SAAS,IAAI,CAAC,CAAC,QAAQ,CAC/B,CAAC;YACf,IAAI,gBAAgB,EAAE,gBAAgB,EAAE,IAAI,EAAE;gBAC1C,gBAAgB,CAAC,gBAAgB,CAAC,YAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;aACnE;SACJ;IACL,CAAC;IAEO,eAAe,CACnB,SAAiB,EACjB,qBAAkD,EAClD,MAAmB;QAEnB,MAAM,MAAM,GAAqC;YAC7C,QAAQ,EAAE,qBAAqB,CAAC,QAAQ;YACxC,QAAQ,EAAE,qBAAqB,CAAC,QAAQ;YACxC,SAAS,EAAE,CAAC,IAAI,CAAC,QAAS,CAAC;YAC3B,QAAQ,EAAE,MAAM,CAAC,QAAQ;SAC5B,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAClC,CAAC;IAEO,kBAAkB,CACtB,IAA6C;QAE7C,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC;IAChD,CAAC;CACJ;AAlGG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;0CACR;AAGzB;IADC,UAAU;4CACqB;AAGhC;IADC,UAAU;yCACwB;AAGnC;IADC,UAAU;yDACkC;AAG7C;IADC,UAAU;8CACa;AAGxB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;0CAC1B;AAGxB;IADC,QAAQ;4CA6BR;AAsDL,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/table/components/row/template.js

@@ -13,6 +13,7 @@ export const template = html `
                     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 `

package/dist/esm/table/components/row/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/row/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;UAE5B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,IAAI,CAAuB;cACnD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,EAAE,IAAI,CAAuB;mBACxD,YAAY;;kCAEG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;yCACT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB;wCACtC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc;yCAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe;sDAChB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,CAAC,KAAiD,EAAE,CAAC,CAAC,MAAM,CAAC;gDACpH,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,CAAC,KAAiD,EAAE,CAAC,CAAC,MAAM,CAAC;;;sBAGlI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAE,CAAC,CAAC,MAAmB,CAAC,uBAAuB,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,IAAI,CAAuB;;oCAEtH,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,MAAM,CAAC,cAAe,EAAE;;;qBAGjE,CAAC;oBACF,YAAY;aACnB,CAAC;SACL,CAAC;;CAET,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/row/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;UAE5B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,IAAI,CAAuB;cACnD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,EAAE,IAAI,CAAuB;mBACxD,YAAY;;kCAEG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;yCACT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB;wCACtC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc;yCAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe;sDAChB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,CAAC,KAAiD,EAAE,CAAC,CAAC,MAAM,CAAC;gDACpH,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,CAAC,KAAiD,EAAE,CAAC,CAAC,MAAM,CAAC;qCACnH,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;;sBAGrC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAE,CAAC,CAAC,MAAmB,CAAC,uBAAuB,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,IAAI,CAAuB;;oCAEtH,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,MAAM,CAAC,cAAe,EAAE;;;qBAGjE,CAAC;oBACF,YAAY;aACnB,CAAC;SACL,CAAC;;CAET,CAAC"}

package/dist/esm/table/index.d.ts

@@ -11,6 +11,12 @@ declare global {
 interface TableRowState<TData extends TableRecord = TableRecord> {
     record: TData;
     id: string;
+    isGrouped: boolean;
+    groupRowValue?: unknown;
+    isExpanded: boolean;
+    nestingLevel?: number;
+    leafItemCount?: number;
+    groupColumn?: TableColumn;
 }
 /**
  * A nimble-styled table.
@@ -75,6 +81,7 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
     private readonly tableValidator;
     private readonly updateTracker;
     private columnNotifiers;
+    private readonly collapsedRows;
     constructor();
     setData(newData: readonly TData[]): void;
     connectedCallback(): void;
@@ -90,6 +97,7 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
     handleChange(source: unknown, args: unknown): void;
     onRowActionMenuBeforeToggle(event: CustomEvent<TableActionMenuToggleEventDetail>): void;
     onRowActionMenuToggle(event: CustomEvent<TableActionMenuToggleEventDetail>): void;
+    handleGroupRowExpanded(rowIndex: number, event: Event): void;
     /**
      * @internal
      */
@@ -100,6 +108,7 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
     private removeColumnObservers;
     private observeColumns;
     private getColumnsParticipatingInSorting;
+    private getColumnsParticipatingInGrouping;
     private childItemsChanged;
     private updateColumnsFromChildItems;
     private updateTanStack;
@@ -109,8 +118,13 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
     private validateWithData;
     private setTableData;
     private refreshRows;
+    private getGroupRowColumn;
     private updateTableOptions;
+    private readonly getIsRowExpanded;
+    private readonly handleExpandedChange;
+    private toggleGroupExpanded;
     private calculateTanStackSortState;
+    private calculateTanStackGroupingState;
     private calculateTanStackRowIdFunction;
     private calculateTanStackColumns;
 }

package/dist/esm/table/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { attr, Observable, observable } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
-import { createTable as tanStackCreateTable, getCoreRowModel as tanStackGetCoreRowModel, getSortedRowModel as tanStackGetSortedRowModel } from '@tanstack/table-core';
+import { createTable as tanStackCreateTable, getCoreRowModel as tanStackGetCoreRowModel, getSortedRowModel as tanStackGetSortedRowModel, getGroupedRowModel as tanStackGetGroupedRowModel, getExpandedRowModel as tanStackGetExpandedRowModel } from '@tanstack/table-core';
 import { TableColumn } from '../table-column/base';
 import { TableValidator } from './models/table-validator';
 import { styles } from './styles';
@@ -48,22 +48,54 @@ export class Table extends FoundationElement {
         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: tanStackGetCoreRowModel(),
             getSortedRowModel: tanStackGetSortedRowModel(),
+            getGroupedRowModel: tanStackGetGroupedRowModel(),
+            getExpandedRowModel: tanStackGetExpandedRowModel(),
+            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 = tanStackCreateTable(this.options);
-        this.virtualizer = new Virtualizer(this);
+        this.virtualizer = new Virtualizer(this, this.table);
     }
     get validity() {
         return this.tableValidator.getValidity();
@@ -111,6 +143,10 @@ export class Table extends FoundationElement {
             this.openActionMenuRecordId = undefined;
         }
     }
+    handleGroupRowExpanded(rowIndex, event) {
+        this.toggleGroupExpanded(rowIndex);
+        event.stopPropagation();
+    }
     /**
      * @internal
      */
@@ -157,6 +193,10 @@ export class Table extends FoundationElement {
         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();
     }
@@ -184,6 +224,11 @@ export class Table extends FoundationElement {
             // 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() {
@@ -201,6 +246,7 @@ export class Table extends FoundationElement {
     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) {
@@ -221,12 +267,30 @@ export class Table extends FoundationElement {
         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,
@@ -236,6 +300,18 @@ export class Table extends FoundationElement {
         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
@@ -248,6 +324,10 @@ export class Table extends FoundationElement {
             };
         });
     }
+    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