@ni/nimble-components 17.0.2 → 17.0.4

package/dist/all-components-bundle.js

@@ -15713,9 +15713,9 @@
     const prefix = 'ni-nimble';
     const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-    const template$g = html `<slot></slot>`;
+    const template$h = html `<slot></slot>`;
 
-    const styles$F = css `
+    const styles$G = css `
     :host {
         display: contents;
     }
@@ -15771,8 +15771,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$F,
-        template: template$g
+        styles: styles$G,
+        template: template$h
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -15931,7 +15931,7 @@
         }
     }
 
-    const styles$E = css `
+    const styles$F = css `
     ${display('inline')}
 
     :host {
@@ -16014,7 +16014,7 @@
 `;
 
     // prettier-ignore
-    const template$f = (context, definition) => html `
+    const template$g = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -16087,8 +16087,8 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$f,
-        styles: styles$E,
+        template: template$g,
+        styles: styles$F,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -16173,7 +16173,7 @@
         return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
     }
 
-    const styles$D = css `
+    const styles$E = css `
     ${display('inline-flex')}
 
     :host {
@@ -16454,8 +16454,8 @@
             }
         `));
 
-    const styles$C = css `
-    ${styles$D}
+    const styles$D = css `
+    ${styles$E}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -16463,7 +16463,7 @@
     }
 `;
 
-    const template$e = (context, definition) => html `
+    const template$f = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -16545,15 +16545,15 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$e,
-        styles: styles$C,
+        template: template$f,
+        styles: styles$D,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
 
-    const styles$B = css `
+    const styles$C = css `
     :host {
         contain: layout;
         display: block;
@@ -16577,13 +16577,13 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$B
+        styles: styles$C
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
         .register(nimbleAnchoredRegion());
 
-    const styles$A = css `
+    const styles$B = css `
     ${display('inline-block')}
 
     :host {
@@ -16624,7 +16624,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$A
+        styles: styles$B
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -17230,7 +17230,7 @@
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.033 14.026L4.9 10.866 6.277 9.53l1.744 1.81 4.562-4.507 1.307 1.363zm1.155-10.68l-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 styles$z = css `
+    const styles$A = css `
     ${display('inline-flex')}
 
     :host {
@@ -17309,15 +17309,15 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$z,
+        styles: styles$A,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
         .register(nimbleBreadcrumbItem());
 
-    const styles$y = css `
-    ${styles$D}
+    const styles$z = css `
+    ${styles$E}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -17363,7 +17363,7 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$y,
+        styles: styles$z,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17443,7 +17443,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$x = css `
+    const styles$y = css `
     ${display('inline-flex')}
 
     :host {
@@ -17602,14 +17602,14 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$x,
+        styles: styles$y,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-    const styles$w = css `
+    const styles$x = css `
     ${display('inline-flex')}
 
     :host {
@@ -17727,14 +17727,14 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$w,
+        styles: styles$x,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
 
-    const styles$v = css `
-    ${styles$D}
+    const styles$w = css `
+    ${styles$E}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -17760,7 +17760,7 @@
     }
 `;
 
-    const template$d = (context, definition) => html `
+    const template$e = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -17835,8 +17835,8 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$d,
-        styles: styles$v,
+        template: template$e,
+        styles: styles$w,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17849,13 +17849,13 @@
     </div>
 `;
 
-    const template$c = html `
+    const template$d = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$u = css `
+    const styles$v = css `
     ${display('inline-flex')}
 
     :host {
@@ -17908,8 +17908,8 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$c,
-            styles: styles$u,
+            template: template$d,
+            styles: styles$v,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -17943,7 +17943,7 @@
         block: 'block'
     };
 
-    const styles$t = css `
+    const styles$u = css `
     ${display('inline-flex')}
 
     :host {
@@ -18171,7 +18171,7 @@
             }
         `));
 
-    const styles$s = css `
+    const styles$t = css `
     .error-icon {
         display: none;
     }
@@ -18209,9 +18209,9 @@
     }
 `;
 
-    const styles$r = css `
+    const styles$s = css `
+    ${styles$u}
     ${styles$t}
-    ${styles$s}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -18447,7 +18447,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$r,
+        styles: styles$s,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -18491,7 +18491,7 @@
      */
     const UserDismissed = Symbol('user dismissed');
 
-    const styles$q = css `
+    const styles$r = css `
     ${display('grid')}
 
     dialog {
@@ -18607,7 +18607,7 @@
             }
         `));
 
-    const template$b = html `
+    const template$c = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -18733,13 +18733,13 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$b,
-        styles: styles$q,
+        template: template$c,
+        styles: styles$r,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-    const styles$p = css `
+    const styles$q = css `
     ${display('block')}
 
     :host {
@@ -18892,7 +18892,7 @@
             }
         `));
 
-    const template$a = html `
+    const template$b = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -19006,8 +19006,8 @@
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$a,
-        styles: styles$p
+        template: template$b,
+        styles: styles$q
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -20639,7 +20639,7 @@
     }
     registerIcon('icon-xmark-check', IconXmarkCheck);
 
-    const styles$o = css `
+    const styles$p = css `
     ${display('flex')}
 
     :host {
@@ -20719,11 +20719,11 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$o
+        styles: styles$p
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
 
-    const styles$n = css `
+    const styles$o = css `
     ${display('grid')}
 
     :host {
@@ -20778,11 +20778,11 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$n
+        styles: styles$o
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
-    const styles$m = css `
+    const styles$n = css `
     ${display('inline-block')}
 
     :host {
@@ -20801,7 +20801,7 @@
 `;
 
     // prettier-ignore
-    const template$9 = html `
+    const template$a = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -21009,15 +21009,15 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$9,
-        styles: styles$m,
+        template: template$a,
+        styles: styles$n,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
 
-    const styles$l = css `
+    const styles$m = css `
     ${display('grid')}
 
     :host {
@@ -21115,7 +21115,7 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$l,
+        styles: styles$m,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -21129,9 +21129,9 @@
         block: 'block'
     };
 
-    const styles$k = css `
+    const styles$l = css `
     ${display('inline-block')}
-    ${styles$s}
+    ${styles$t}
 
     :host {
         font: ${bodyFont};
@@ -21345,7 +21345,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$k,
+        styles: styles$l,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -21386,7 +21386,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-    const styles$j = css `
+    const styles$k = css `
     ${display('inline-flex')}
 
     :host {
@@ -21486,12 +21486,12 @@
         baseName: 'radio',
         baseClass: Radio$1,
         template: radioTemplate,
-        styles: styles$j,
+        styles: styles$k,
         checkedIndicator: circleFilled16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-    const styles$i = css `
+    const styles$j = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -21526,16 +21526,16 @@
         baseName: 'radio-group',
         baseClass: RadioGroup$1,
         template: radioGroupTemplate,
-        styles: styles$i,
+        styles: styles$j,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
 
-    const styles$h = css `
+    const styles$i = css `
+    ${styles$u}
     ${styles$t}
-    ${styles$s}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -21611,7 +21611,7 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$h,
+        styles: styles$i,
         indicator: arrowExpanderDown16X16.data,
         end: html `
         <${DesignSystem.tagFor(IconExclamationMark)}
@@ -21623,7 +21623,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-    const styles$g = css `
+    const styles$h = css `
     ${display('inline-flex')}
 
     :host {
@@ -21767,7 +21767,7 @@
             }
         `));
 
-    const template$8 = html `
+    const template$9 = html `
     <template role="progressbar">
         <div class="container">
             <div class="bit1"></div>
@@ -21784,12 +21784,12 @@
     }
     const nimbleSpinner = Spinner.compose({
         baseName: 'spinner',
-        template: template$8,
-        styles: styles$g
+        template: template$9,
+        styles: styles$h
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
 
-    const styles$f = css `
+    const styles$g = css `
     ${display('inline-flex')}
 
     :host {
@@ -21952,7 +21952,7 @@
         `));
 
     // prettier-ignore
-    const template$7 = html `
+    const template$8 = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -21996,12 +21996,12 @@
     const nimbleSwitch = Switch.compose({
         baseClass: Switch$1,
         baseName: 'switch',
-        template: template$7,
-        styles: styles$f
+        template: template$8,
+        styles: styles$g
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-    const styles$e = css `
+    const styles$f = css `
     ${display('inline-flex')}
 
     :host {
@@ -22106,11 +22106,11 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$e
+        styles: styles$f
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-    const styles$d = css `
+    const styles$e = css `
     ${display('block')}
 
     :host {
@@ -22130,7 +22130,7 @@
         baseName: 'tab-panel',
         baseClass: TabPanel$1,
         template: tabPanelTemplate,
-        styles: styles$d
+        styles: styles$e
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -25128,7 +25128,7 @@
         }
     }
 
-    const styles$c = css `
+    const styles$d = css `
     ${display('flex')}
 
     .table-container {
@@ -25148,28 +25148,62 @@
     .header-row {
         display: flex;
         flex-direction: row;
+        background: ${applicationBackgroundColor};
+        position: relative;
     }
 
     .header {
         flex: 1;
     }
-`;
 
-    const styles$b = css `
+    .row {
+        background: ${applicationBackgroundColor};
+        position: relative;
+    }
+
+    .row::before {
+        content: '';
+        width: 100%;
+        height: 100%;
+        position: absolute;
+    }
+
+    .row:hover::before {
+        background: ${fillHoverColor};
+    }
+`.withBehaviors(themeBehavior(Theme.color, css `
+            .header-row::before {
+                content: '';
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                background: ${fillHoverColor};
+            }
+
+            .row::before {
+                background: ${fillHoverColor};
+            }
+
+            .row:hover::before {
+                background: ${hexToRgbaCssColor(White, 0.15)};
+            }
+        `));
+
+    const styles$c = css `
     ${display('flex')}
 
     :host {
         height: ${controlHeight};
         align-items: center;
-        background: ${applicationBackgroundColor};
         padding: 0px calc(${standardPadding} / 2);
         font: ${tableHeaderFont};
         color: ${tableHeaderFontColor};
+        text-transform: uppercase;
     }
 `;
 
     // prettier-ignore
-    const template$6 = html `
+    const template$7 = html `
     <template role="columnheader">
         <slot></slot>
     </template>
@@ -25183,42 +25217,42 @@
     }
     const nimbleTableHeader = TableHeader.compose({
         baseName: 'table-header',
-        template: template$6,
-        styles: styles$b
+        template: template$7,
+        styles: styles$c
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
 
-    const styles$a = css `
-    ${display('flex')}
+    const styles$b = css `
+    ${display('grid')}
 
     :host {
         height: ${controlHeight};
-        background: ${applicationBackgroundColor};
         border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
-    }
-
-    .cell {
-        flex: 1;
-    }
-
-    :host(:hover) .cell {
-        background: ${fillHoverColor};
+        grid-auto-flow: column;
+        grid-auto-columns: 1fr;
     }
 `;
 
-    const styles$9 = css `
-    ${display('flex')}
+    const styles$a = css `
+    ${display('grid')}
 
     :host {
         padding: 0px calc(${standardPadding} / 2);
+        align-self: center;
+        height: 100%;
+    }
+
+    .cell-content-container {
+        overflow: hidden;
+        display: flex;
         align-items: center;
     }
 `;
 
     // prettier-ignore
-    const template$5 = html `
+    const template$6 = html `
     <template role="cell">
-        ${x => x.data}
+        <div ${ref('cellContentContainer')} class="cell-content-container"></div>
     </template>
 `;
 
@@ -25227,24 +25261,56 @@
      * @internal
      */
     class TableCell extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            this.customCellView = undefined;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.customCellView = this.cellTemplate?.render(this.cellState, this.cellContentContainer);
+        }
+        cellStateChanged() {
+            this.customCellView?.bind(this.cellState, defaultExecutionContext);
+        }
+        cellTemplateChanged() {
+            if (this.isConnected) {
+                this.customCellView = this.cellTemplate?.render(this.cellState, this.cellContentContainer);
+            }
+        }
+        cellStylesChanged(prev, next) {
+            if (prev) {
+                this.$fastController.removeStyles(prev);
+            }
+            if (next) {
+                this.$fastController.addStyles(next);
+            }
+        }
     }
     __decorate$1([
         observable
-    ], TableCell.prototype, "data", void 0);
+    ], TableCell.prototype, "cellState", void 0);
+    __decorate$1([
+        observable
+    ], TableCell.prototype, "cellTemplate", void 0);
+    __decorate$1([
+        observable
+    ], TableCell.prototype, "cellStyles", void 0);
     const nimbleTableCell = TableCell.compose({
         baseName: 'table-cell',
-        template: template$5,
-        styles: styles$9
+        template: template$6,
+        styles: styles$a
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
 
     // prettier-ignore
-    const template$4 = html `
+    const template$5 = html `
     <template role="row">
         ${repeat(x => x.columns, html `
             <${DesignSystem.tagFor(TableCell)}
                 class="cell"
-                :data="${(x, c) => c.parent.getCellValue(x)}"
+                :cellTemplate="${x => x.cellTemplate}"
+                :cellStyles="${x => x.cellStyles}"
+                :cellState="${(x, c) => c.parent.getCellState(x)}"
             >
             </${DesignSystem.tagFor(TableCell)}>
         `)}
@@ -25258,50 +25324,81 @@
     class TableRow extends FoundationElement {
         constructor() {
             super(...arguments);
-            // TODO: Temporarily assume the set of columns will be an array of strings.
-            // Eventually, this will be an array of column definitions.
             this.columns = [];
         }
-        getCellValue(column) {
-            return this.data ? this.data[column] : undefined;
+        getCellState(column) {
+            const fieldNames = column.getDataRecordFieldNames();
+            if (this.hasValidFieldNames(fieldNames) && this.dataRecord) {
+                const cellDataValues = fieldNames.map(field => this.dataRecord[field]);
+                const cellRecord = Object.fromEntries(column.cellRecordFieldNames.map((k, i) => [
+                    k,
+                    cellDataValues[i]
+                ]));
+                const columnConfig = column.getColumnConfig?.() ?? {};
+                const cellState = {
+                    cellRecord,
+                    columnConfig
+                };
+                return cellState;
+            }
+            return { cellRecord: {}, columnConfig: {} };
+        }
+        hasValidFieldNames(keys) {
+            return keys.every(key => key !== undefined);
         }
     }
     __decorate$1([
         observable
-    ], TableRow.prototype, "data", void 0);
+    ], TableRow.prototype, "dataRecord", void 0);
     __decorate$1([
         observable
     ], TableRow.prototype, "columns", void 0);
     const nimbleTableRow = TableRow.compose({
         baseName: 'table-row',
-        template: template$4,
-        styles: styles$a
+        template: template$5,
+        styles: styles$b
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
 
+    /**
+     * The base class for table columns
+     */
+    class TableColumn extends FoundationElement {
+    }
+
+    const isTableColumn = () => {
+        const filter = (value, _, __) => {
+            return value instanceof TableColumn;
+        };
+        return filter;
+    };
     // prettier-ignore
-    const template$3 = html `
+    const template$4 = html `
     <template role="table">
         <div class="table-container">
             <div role="rowgroup" class="header-container">
                 <div class="header-row" role="row">
-                    ${repeat(x => x.columnHeaders, html `
+                    ${repeat(x => x.columns, html `
                         <${DesignSystem.tagFor(TableHeader)} class="header">
-                            ${x => x}
+                            ${x => x.textContent}
                         </${DesignSystem.tagFor(TableHeader)}>
                     `)}
                 </div>
             </div>
             <div class="table-viewport" role="rowgroup">
+            ${when(x => x.columns.length > 0, html `
                 ${repeat(x => x.tableData, html `
                     <${DesignSystem.tagFor(TableRow)}
-                        :data="${x => x.data}"
+                        class="row"
+                        :dataRecord="${x => x.record}"
                         :columns="${(_, c) => c.parent.columns}"
                     >
                     </${DesignSystem.tagFor(TableRow)}>
                 `)}
+            `)}
             </div>
         </div>
+        <slot ${slotted({ property: 'columns', filter: isTableColumn() })}></slot>
     </template>
 `;
 
@@ -25316,11 +25413,7 @@
              * @internal
              */
             this.tableData = [];
-            // TODO: Temporarily expose the columns as a string array. This will ultimately be
-            // column definitions provided by slotted elements.
             this.columns = [];
-            // TODO: Temporarily expose the column headers as a string array.
-            this.columnHeaders = [];
             this.tableInitialized = false;
             this.tableValidator = new TableValidator();
             this.update = (state) => {
@@ -25387,7 +25480,7 @@
         refreshRows() {
             const rows = this.table.getRowModel().rows;
             this.tableData = rows.map(row => {
-                const rowState = { data: row.original };
+                const rowState = { record: row.original };
                 return rowState;
             });
         }
@@ -25396,8 +25489,8 @@
             this.update(this.table.initialState);
             this.refreshRows();
         }
-        // Temporarily auto-detect the keys in TData to make columns.
-        // TODO: Remove this logic when another way to specify columns is provided.
+        // Generate columns for TanStack that correspond to all the keys in TData because all operations,
+        // such as grouping and sorting, will be performed on the data's records, not the values rendered within a cell.
         generateColumns() {
             if (this.data.length === 0) {
                 return;
@@ -25413,8 +25506,6 @@
                 return columnDef;
             });
             this.updateTableOptions({ columns: generatedColumns });
-            this.columnHeaders = generatedColumns.map(x => x.header);
-            this.columns = this.columnHeaders;
         }
     }
     __decorate$1([
@@ -25429,16 +25520,81 @@
     __decorate$1([
         observable
     ], Table.prototype, "columns", void 0);
-    __decorate$1([
-        observable
-    ], Table.prototype, "columnHeaders", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
-        template: template$3,
-        styles: styles$c
+        template: template$4,
+        styles: styles$d
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
+    const styles$9 = css `
+    :host {
+        display: none;
+    }
+`;
+
+    const template$3 = html `
+    <template>
+        <slot></slot>
+    </template>
+`;
+
+    const cellStyles = css `
+    span {
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .placeholder {
+        color: ${controlLabelFontColor};
+    }
+`;
+
+    const cellTemplate = html `
+    <span
+        class="${x => (typeof x.cellRecord.value === 'string' ? '' : 'placeholder')}"
+    >
+        ${x => (typeof x.cellRecord.value === 'string'
+    ? x.cellRecord.value
+    : x.columnConfig.placeholder)}
+    </span>
+`;
+
+    /**
+     * The table column for displaying strings.
+     */
+    class TableColumnText extends TableColumn {
+        constructor() {
+            super(...arguments);
+            this.cellRecordFieldNames = ['value'];
+            this.cellStyles = cellStyles;
+            this.cellTemplate = cellTemplate;
+        }
+        getColumnConfig() {
+            return { placeholder: this.placeholder ?? '' };
+        }
+        getDataRecordFieldNames() {
+            return [this.fieldName];
+        }
+    }
+    __decorate$1([
+        attr({ attribute: 'field-name' })
+    ], TableColumnText.prototype, "fieldName", void 0);
+    __decorate$1([
+        attr
+    ], TableColumnText.prototype, "placeholder", void 0);
+    const nimbleTableColumnText = TableColumnText.compose({
+        baseName: 'table-column-text',
+        template: template$3,
+        styles: styles$9
+    });
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(nimbleTableColumnText());
+
     const styles$8 = css `
     ${display('grid')}
 
@@ -25679,7 +25835,7 @@
 
     const styles$5 = css `
     ${display('inline-block')}
-    ${styles$s}
+    ${styles$t}
 
     :host {
         font: ${bodyFont};