Add token representing the height of the table with all rows visible

change/@ni-nimble-components-a5fd15e6-373b-4e3c-b562-fc2e440df26c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add attribute to the table to make its height automatically adjust to the number of rows",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -87,6 +87,9 @@ export class Table<
     @attr({ attribute: 'selection-mode' })
     public selectionMode: TableRowSelectionMode = TableRowSelectionMode.none;
 
+    @attr({ attribute: 'auto-height', mode: 'boolean' })
+    public autoHeight = false;
+
     /**
      * @internal
      */

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

@@ -10,7 +10,8 @@ import {
     mediumPadding,
     standardPadding,
     tableRowBorderColor,
-    borderHoverColor
+    borderHoverColor,
+    controlHeight
 } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';
@@ -25,10 +26,24 @@ export const styles = css`
 
     :host {
         height: 480px;
+        ${
+            /**
+             * Set a default maximum height for the table of 250 rows (including the header row) so
+             * that clients don't accidentally create a table that tries to render too many rows at once.
+             * If needed, the max-height can be overridden by the client, but setting a default ensures
+             * that the max-height is considered if a larger one is needed rather than being overlooked.
+             */ ''
+        }
+        max-height: calc(250 * ${controlHeight});
+        flex-direction: column;
         --ni-private-column-divider-width: 2px;
         --ni-private-column-divider-padding: 3px;
     }
 
+    :host([auto-height]) {
+        height: auto;
+    }
+
     :host(${focusVisible}) {
         ${
             /* The table can briefly be focused in some keyboard nav cases (e.g. regaining focus and we
@@ -51,6 +66,14 @@ export const styles = css`
         font: ${bodyFont};
         color: ${bodyFontColor};
         cursor: var(--ni-private-table-cursor-override);
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+
+    :host([auto-height]) .table-container {
+        flex-basis: calc(
+            var(--ni-private-table-scroll-height) + ${controlHeight}
+        );
     }
 
     .glass-overlay {

packages/storybook/src/nimble/table/table.stories.ts

@@ -78,6 +78,8 @@ interface TableArgs extends BaseTableArgs {
     selectionChange: undefined;
     columnConfigurationChange: undefined;
     rowExpandToggle: undefined;
+    autoHeight: boolean;
+    resizable: boolean;
 }
 
 const simpleData = [
@@ -272,6 +274,8 @@ export const table: StoryObj<TableArgs> = {
             id-field-name="id"
             data-unused="${x => x.updateData(x)}"
             parent-id-field-name="parentId"
+            ?auto-height="${x => x.autoHeight}"
+            style="${x => x.resizable && 'resize: both; overflow: hidden;'}"
         >
             <${tableColumnTextTag}
                 column-id="first-name-column"
@@ -482,6 +486,18 @@ export const table: StoryObj<TableArgs> = {
                 'Event emitted when the user expands or collapses a row in a table with hierarchy. This does not emit when group rows are expanded or collapsed.',
             control: false,
             table: { category: apiCategory.events }
+        },
+        autoHeight: {
+            name: 'auto-height',
+            description:
+                'When set to `true`, the table will automatically adjust its height to fit the number of rows in the table.',
+            table: { category: apiCategory.attributes }
+        },
+        resizable: {
+            name: 'resizable',
+            description:
+                'Not a property on the table -- temporarily added to demonstrate how the table behaves when `resize: both` is set on the table element.',
+            table: { category: apiCategory.attributes }
         }
     },
     args: {
@@ -491,6 +507,8 @@ export const table: StoryObj<TableArgs> = {
         validity: undefined,
         checkValidity: undefined,
         tableRef: undefined,
+        autoHeight: false,
+        resizable: false,
         updateData: x => {
             void (async () => {
                 // Safari workaround: the table element instance is made at this point