Table collapse all

change/@ni-nimble-components-997c813b-24bc-4cff-93cf-ebd4a16affd9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add collapse-all button and grouping indicator to column headers",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/table-column/base/types.ts

@@ -32,6 +32,6 @@ export const TableColumnSortOperation = {
 export type TableColumnSortOperation =
     (typeof TableColumnSortOperation)[keyof typeof TableColumnSortOperation];
 
-export const defaultMinPixelWidth = 88;
+export const defaultMinPixelWidth = 121;
 
 export const defaultFractionalWidth = 1;

packages/nimble-components/src/table/components/cell/styles.ts

@@ -1,6 +1,9 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { standardPadding } from '../../../theme-provider/design-tokens';
+import {
+    smallPadding,
+    standardPadding
+} from '../../../theme-provider/design-tokens';
 
 export const styles = css`
     ${display('grid')}
@@ -9,11 +12,8 @@ export const styles = css`
         --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
-                )
+            ${smallPadding} * 2 + ${standardPadding} * 2 *
+                var(--ni-private-table-cell-nesting-level)
         );
         align-self: center;
         height: 100%;

packages/nimble-components/src/table/components/header/index.ts

@@ -1,4 +1,4 @@
-import { attr } from '@microsoft/fast-element';
+import { attr, observable } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
 import { TableColumnSortDirection } from '../../types';
 import { styles } from './styles';
@@ -21,6 +21,9 @@ export class TableHeader extends FoundationElement {
     @attr({ attribute: 'first-sorted-column', mode: 'boolean' })
     public firstSortedColumn = false;
 
+    @observable
+    public isGrouped = false;
+
     protected sortDirectionChanged(
         _prev: TableColumnSortDirection | undefined,
         _next: TableColumnSortDirection

packages/nimble-components/src/table/components/header/styles.ts

@@ -19,9 +19,11 @@ export const styles = css`
         color: ${tableHeaderFontColor};
         ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};
         text-transform: uppercase;
+        gap: calc(${standardPadding} / 2);
     }
 
-    .sort-indicator {
-        padding: 0px calc(${standardPadding} / 2);
+    .sort-indicator,
+    .grouped-indicator {
+        flex: 0 0 auto;
     }
 `;

packages/nimble-components/src/table/components/header/template.ts

@@ -2,6 +2,7 @@ import { html, when } from '@microsoft/fast-element';
 import type { TableHeader } from '.';
 import { iconArrowDownTag } from '../../../icons/arrow-down';
 import { iconArrowUpTag } from '../../../icons/arrow-up';
+import { iconTwoSquaresInBracketsTag } from '../../../icons/two-squares-in-brackets';
 import { TableColumnSortDirection } from '../../types';
 
 // prettier-ignore
@@ -15,5 +16,8 @@ export const template = html<TableHeader>`
         ${when(x => x.sortDirection === TableColumnSortDirection.descending, html`
             <${iconArrowDownTag} class="sort-indicator" aria-hidden="true"></${iconArrowDownTag}>
         `)}
+        ${when(x => x.isGrouped, html`
+            <${iconTwoSquaresInBracketsTag} class="grouped-indicator"></${iconTwoSquaresInBracketsTag}>
+        `)}
     </template>
 `;

packages/nimble-components/src/table/components/header/tests/table-header-pageobject.ts

@@ -0,0 +1,41 @@
+import type { TableHeader } from '..';
+import { iconArrowDownTag } from '../../../../icons/arrow-down';
+import { iconArrowUpTag } from '../../../../icons/arrow-up';
+
+/**
+ * Page object for the `nimble-table-header` component to provide consistent ways
+ * of querying and interacting with the component during tests.
+ */
+export class TableHeaderPageObject {
+    public constructor(private readonly tableElement: TableHeader) {}
+
+    public isSortAscendingIconVisible(): boolean {
+        return this.getSortAscendingIcon() !== null;
+    }
+
+    public isSortDescendingIconVisible(): boolean {
+        return this.getSortDescendingIcon() !== null;
+    }
+
+    public isGroupIndicatorIconVisible(): boolean {
+        return this.getGroupIndicatorIcon() !== null;
+    }
+
+    private getSortAscendingIcon(): HTMLElement | null {
+        return this.tableElement.shadowRoot!.querySelector(
+            `${iconArrowUpTag}.sort-indicator`
+        );
+    }
+
+    private getSortDescendingIcon(): HTMLElement | null {
+        return this.tableElement.shadowRoot!.querySelector(
+            `${iconArrowDownTag}.sort-indicator`
+        );
+    }
+
+    private getGroupIndicatorIcon(): HTMLElement | null {
+        return this.tableElement.shadowRoot!.querySelector(
+            '.grouped-indicator'
+        );
+    }
+}

packages/nimble-components/src/table/components/header/tests/table-header.spec.ts

@@ -1,38 +1,25 @@
 import { html } from '@microsoft/fast-element';
 import { TableHeader } from '..';
-import { iconArrowDownTag } from '../../../../icons/arrow-down';
-import { iconArrowUpTag } from '../../../../icons/arrow-up';
 import { waitForUpdatesAsync } from '../../../../testing/async-helpers';
 import { type Fixture, fixture } from '../../../../utilities/tests/fixture';
 import { TableColumnSortDirection } from '../../../types';
+import { TableHeaderPageObject } from './table-header-pageobject';
 
 async function setup(): Promise<Fixture<TableHeader>> {
     return fixture<TableHeader>(
         html`<nimble-table-header> </nimble-table-header>`
     );
 }
 
-function getSortIcons(element: TableHeader): {
-    ascendingIcon: HTMLElement | null,
-    descendingIcon: HTMLElement | null
-} {
-    return {
-        ascendingIcon: element.shadowRoot!.querySelector(
-            `${iconArrowUpTag}.sort-indicator`
-        ),
-        descendingIcon: element.shadowRoot!.querySelector(
-            `${iconArrowDownTag}.sort-indicator`
-        )
-    };
-}
-
 describe('TableHeader', () => {
     let element: TableHeader;
+    let pageObject: TableHeaderPageObject;
     let connect: () => Promise<void>;
     let disconnect: () => Promise<void>;
 
     beforeEach(async () => {
         ({ element, connect, disconnect } = await setup());
+        pageObject = new TableHeaderPageObject(element);
         await connect();
     });
 
@@ -55,9 +42,8 @@ describe('TableHeader', () => {
 
     it('has correct state when not sorted', () => {
         expect(element.hasAttribute('aria-sort')).toBeFalse();
-        const sortIcons = getSortIcons(element);
-        expect(sortIcons.ascendingIcon).toBeFalsy();
-        expect(sortIcons.descendingIcon).toBeFalsy();
+        expect(pageObject.isSortAscendingIconVisible()).toBeFalse();
+        expect(pageObject.isSortDescendingIconVisible()).toBeFalse();
     });
 
     // Firefox skipped, see: https://github.com/ni/nimble/issues/1075
@@ -67,9 +53,8 @@ describe('TableHeader', () => {
         await waitForUpdatesAsync();
 
         expect(element.getAttribute('aria-sort')).toEqual('ascending');
-        const sortIcons = getSortIcons(element);
-        expect(sortIcons.ascendingIcon).toBeTruthy();
-        expect(sortIcons.descendingIcon).toBeFalsy();
+        expect(pageObject.isSortAscendingIconVisible()).toBeTrue();
+        expect(pageObject.isSortDescendingIconVisible()).toBeFalse();
     });
 
     // Firefox skipped, see: https://github.com/ni/nimble/issues/1075
@@ -79,9 +64,8 @@ describe('TableHeader', () => {
         await waitForUpdatesAsync();
 
         expect(element.getAttribute('aria-sort')).toEqual('descending');
-        const sortIcons = getSortIcons(element);
-        expect(sortIcons.ascendingIcon).toBeFalsy();
-        expect(sortIcons.descendingIcon).toBeTruthy();
+        expect(pageObject.isSortAscendingIconVisible()).toBeFalse();
+        expect(pageObject.isSortDescendingIconVisible()).toBeTrue();
     });
 
     it('does not configure aria-sort if it is not the first sorted column', async () => {
@@ -90,8 +74,19 @@ describe('TableHeader', () => {
         await waitForUpdatesAsync();
 
         expect(element.hasAttribute('aria-sort')).toBeFalse();
-        const sortIcons = getSortIcons(element);
-        expect(sortIcons.ascendingIcon).toBeFalsy();
-        expect(sortIcons.descendingIcon).toBeTruthy();
+        expect(pageObject.isSortAscendingIconVisible()).toBeFalse();
+        expect(pageObject.isSortDescendingIconVisible()).toBeTrue();
+    });
+
+    it('displays grouping indicator icon when grouped', async () => {
+        element.isGrouped = true;
+        await waitForUpdatesAsync();
+
+        expect(pageObject.isGroupIndicatorIconVisible()).toBeTrue();
+    });
+
+    it('grouping indicator icon is not shown when not grouped', () => {
+        expect(element.isGrouped).toBeFalse();
+        expect(pageObject.isGroupIndicatorIconVisible()).toBeFalse();
     });
 });

packages/nimble-components/src/table/components/row/index.ts

@@ -106,7 +106,7 @@ export class TableRow<
                     columnConfig: {}
                 };
             }
-            const cellIndentLevel = i === 0 ? this.nestingLevel : 0;
+            const cellIndentLevel = i === 0 && this.nestingLevel > 0 ? this.nestingLevel - 1 : 0;
             return { column, cellState, cellIndentLevel };
         });
     }

packages/nimble-components/src/table/components/row/styles.ts

@@ -29,6 +29,11 @@ export const styles = css`
         padding-left: 0px;
     }
 
+    .row-front-spacer {
+        width: ${controlHeight};
+        flex: 0 0 auto;
+    }
+
     .cell-container {
         display: grid;
         width: 100%;

packages/nimble-components/src/table/components/row/template.ts

@@ -19,6 +19,9 @@ export const template = html<TableRow>`
                 </${checkboxTag}>
             </span>
         `)}
+        ${'' /* This is needed to help align the cell widths exactly with the column headers, due to the space reserved for
+                the collapse-all button in the header. */}
+        <span class="row-front-spacer"></span>
 
         <span ${ref('cellContainer')} class="cell-container">
             ${repeat(x => x.columnStates, html<ColumnState, TableRow>`

packages/nimble-components/src/table/index.ts

@@ -63,7 +63,7 @@ interface TableRowState<TData extends TableRecord = TableRecord> {
     isGrouped: boolean;
     groupRowValue?: unknown;
     isExpanded: boolean;
-    nestingLevel?: number;
+    nestingLevel: number;
     leafItemCount?: number;
     groupColumn?: TableColumn;
 }
@@ -155,6 +155,12 @@ export class Table<
     @observable
     public readonly selectionCheckbox?: Checkbox;
 
+    /**
+     * @internal
+     */
+    @observable
+    public showCollapseAll = false;
+
     /**
      * @internal
      */
@@ -394,6 +400,16 @@ export class Table<
         }
     }
 
+    /** @internal */
+    public handleCollapseAllGroupRows(): void {
+        this.collapsedRows.clear();
+        this.table
+            .getRowModel()
+            .flatRows.filter(row => row.getIsGrouped())
+            .forEach(row => this.collapsedRows.add(row.id));
+        this.table.toggleAllRowsExpanded(false);
+    }
+
     /** @internal */
     public handleGroupRowExpanded(rowIndex: number, event: Event): void {
         this.toggleGroupExpanded(rowIndex);
@@ -416,6 +432,10 @@ export class Table<
         if (this.updateTracker.updateColumnWidths) {
             this.updateRowGridColumns();
         }
+
+        if (this.updateTracker.updateGroupRows) {
+            this.showCollapseAll = this.getColumnsParticipatingInGrouping().length > 0;
+        }
     }
 
     public override get ariaMultiSelectable(): 'true' | 'false' | null {

packages/nimble-components/src/table/styles.ts

@@ -5,9 +5,11 @@ import {
     applicationBackgroundColor,
     bodyFont,
     bodyFontColor,
+    controlSlimHeight,
     fillHoverColor,
     fillHoverSelectedColor,
     fillSelectedColor,
+    smallPadding,
     standardPadding
 } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
@@ -63,6 +65,7 @@ export const styles = css`
         width: fit-content;
         min-width: 100%;
         left: var(--ni-private-table-scroll-x);
+        align-items: center;
     }
 
     .column-header-container {
@@ -71,6 +74,17 @@ export const styles = css`
         grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
     }
 
+    .collapse-all-button {
+        width: ${controlSlimHeight};
+        height: ${controlSlimHeight};
+        margin-left: calc(${smallPadding} * 2);
+        visibility: hidden;
+    }
+
+    .collapse-all-button.visible {
+        visibility: visible;
+    }
+
     .header-scrollbar-spacer {
         width: var(--ni-private-table-header-scrollbar-spacer-width);
     }

packages/nimble-components/src/table/template.ts

@@ -19,6 +19,9 @@ import {
     TableRowSelectionToggleEventDetail
 } from './types';
 import { tableGroupRowTag } from './components/group-row';
+import { buttonTag } from '../button';
+import { ButtonAppearance } from '../button/types';
+import { iconTriangleTwoLinesHorizontalTag } from '../icons/triangle-two-lines-horizontal';
 import { checkboxTag } from '../checkbox';
 
 // prettier-ignore
@@ -33,7 +36,8 @@ export const template = html<Table>`
             --ni-private-table-header-scrollbar-spacer-width: ${x => x.virtualizer.headerContainerMarginRight}px;
             --ni-private-table-scroll-height: ${x => x.virtualizer.allRowsHeight}px;
             --ni-private-table-row-container-top: ${x => x.virtualizer.rowContainerYOffset}px; 
-            --ni-private-table-row-grid-columns: ${x => x.rowGridColumns ?? ''}
+            --ni-private-table-row-grid-columns: ${x => x.rowGridColumns ?? ''};
+            --ni-private-collapse-button-visibility: ${x => (x.showCollapseAll ? 'visible' : 'hidden')};
             ">
             <div role="rowgroup" class="header-container">
                 <div class="header-row" role="row">
@@ -47,14 +51,24 @@ export const template = html<Table>`
                             </${checkboxTag}>
                         </span>
                     `)}
-
+                    <span role="gridcell">
+                        <${buttonTag}
+                            class="${x => `collapse-all-button ${(x.showCollapseAll ? 'visible' : '')}`}"
+                            content-hidden
+                            appearance="${ButtonAppearance.ghost}"
+                            @click="${x => x.handleCollapseAllGroupRows()}"
+                        >
+                            <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
+                        </${buttonTag}>
+                    </span>
                     <span class="column-header-container">
                         ${repeat(x => x.columns, html<TableColumn>`
                             ${when(x => !x.columnHidden, html<TableColumn, Table>`
                                 <${tableHeaderTag}
                                     class="header"
                                     sort-direction="${x => (typeof x.sortIndex === 'number' ? x.sortDirection : TableColumnSortDirection.none)}"
                                     ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
+                                    :isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
                                 >
                                     <slot name="${x => x.slot}"></slot>
                                 </${tableHeaderTag}>