@ni/nimble-components 18.0.1 → 18.0.3

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

@@ -6,6 +6,10 @@ declare global {
         'nimble-table-row': TableRow;
     }
 }
+export interface ColumnState {
+    column: TableColumn;
+    cellState: TableCellState;
+}
 /**
  * A styled row that is used within the nimble-table.
  * @internal
@@ -14,6 +18,6 @@ export declare class TableRow<TDataRecord extends TableDataRecord = TableDataRec
     recordId?: string;
     dataRecord?: TDataRecord;
     columns: TableColumn[];
-    getCellState(column: TableColumn): TableCellState;
+    get columnStates(): ColumnState[];
     private hasValidFieldNames;
 }

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { attr, observable } from '@microsoft/fast-element';
+import { attr, observable, volatile } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
 import { styles } from './styles';
 import { template } from './template';
@@ -12,22 +12,27 @@ export class TableRow extends FoundationElement {
         super(...arguments);
         this.columns = [];
     }
-    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: {} };
+    get columnStates() {
+        return this.columns.map(column => {
+            const fieldNames = column.getDataRecordFieldNames();
+            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) => [
+                    k,
+                    cellDataValues[i]
+                ]));
+                const columnConfig = column.getColumnConfig?.() ?? {};
+                cellState = {
+                    cellRecord,
+                    columnConfig
+                };
+            }
+            else {
+                cellState = { cellRecord: {}, columnConfig: {} };
+            }
+            return { column, cellState };
+        });
     }
     hasValidFieldNames(keys) {
         return keys.every(key => key !== undefined);
@@ -42,6 +47,9 @@ __decorate([
 __decorate([
     observable
 ], TableRow.prototype, "columns", void 0);
+__decorate([
+    volatile
+], TableRow.prototype, "columnStates", null);
 const nimbleTableRow = TableRow.compose({
     baseName: 'table-row',
     template,

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":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,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;AActC;;;GAGG;AACH,MAAM,OAAO,QAEX,SAAQ,iBAAiB;IAF3B;;QAUW,YAAO,GAAkB,EAAE,CAAC;IA8BvC,CAAC;IA5BU,YAAY,CAAC,MAAmB;QACnC,MAAM,UAAU,GAAG,MAAM,CAAC,uBAAuB,EAAE,CAAC;QACpD,IAAI,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE;YACxD,MAAM,cAAc,GAAG,UAAU,CAAC,GAAG,CACjC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAW,CAAC,KAAK,CAAC,CACnC,CAAC;YACF,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CACjC,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;gBACtC,CAAC;gBACD,cAAc,CAAC,CAAC,CAAC;aACpB,CAAC,CACL,CAAC;YACF,MAAM,YAAY,GAAG,MAAM,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,CAAC;YACtD,MAAM,SAAS,GAAmB;gBAC9B,UAAU;gBACV,YAAY;aACf,CAAC;YACF,OAAO,SAAS,CAAC;SACpB;QAED,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;IAChD,CAAC;IAEO,kBAAkB,CACtB,IAAoC;QAEpC,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC;IAChD,CAAC;CACJ;AApCG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;0CACR;AAGzB;IADC,UAAU;4CACqB;AAGhC;IADC,UAAU;yCACwB;AAgCvC,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"}
+{"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;AAmBtC;;;GAGG;AACH,MAAM,OAAO,QAEX,SAAQ,iBAAiB;IAF3B;;QAUW,YAAO,GAAkB,EAAE,CAAC;IAmCvC,CAAC;IAhCG,IAAW,YAAY;QACnB,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAC7B,MAAM,UAAU,GAAG,MAAM,CAAC,uBAAuB,EAAE,CAAC;YACpD,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,eAAe,EAAE,EAAE,IAAI,EAAE,CAAC;gBACtD,SAAS,GAAG;oBACR,UAAU;oBACV,YAAY;iBACf,CAAC;aACL;iBAAM;gBACH,SAAS,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;aACpD;YAED,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;QACjC,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,kBAAkB,CACtB,IAAoC;QAEpC,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC;IAChD,CAAC;CACJ;AAzCG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;0CACR;AAGzB;IADC,UAAU;4CACqB;AAGhC;IADC,UAAU;yCACwB;AAGnC;IADC,QAAQ;4CA0BR;AASL,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"}

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

@@ -4,12 +4,12 @@ import { TableCell } from '../cell';
 // prettier-ignore
 export const template = html `
     <template role="row">
-        ${repeat(x => x.columns, html `
+        ${repeat(x => x.columnStates, html `
             <${DesignSystem.tagFor(TableCell)}
                 class="cell"
-                :cellTemplate="${x => x.cellTemplate}"
-                :cellStyles="${x => x.cellStyles}"
-                :cellState="${(x, c) => c.parent.getCellState(x)}"
+                :cellTemplate="${x => x.column.cellTemplate}"
+                :cellStyles="${x => x.column.cellStyles}"
+                :cellState="${x => x.cellState}"
             >
             </${DesignSystem.tagFor(TableCell)}>
         `)}

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,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;UAE5B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,CAAuB;eAC7C,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC;;iCAEZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;+BACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;8BAClB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;;gBAEhD,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC;SACrC,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,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;UAE5B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,IAAI,CAAuB;eAClD,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC;;iCAEZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY;+BAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU;8BACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;;gBAE9B,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC;SACrC,CAAC;;CAET,CAAC"}

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

@@ -1,6 +1,7 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { TableColumn } from '../table-column/base';
 import type { TableRecord, TableRowState, TableValidity } from './types';
+import { Virtualizer } from './models/virtualizer';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-table': Table;
@@ -11,24 +12,36 @@ declare global {
  */
 export declare class Table<TData extends TableRecord = TableRecord> extends FoundationElement {
     idFieldName?: string | null;
-    data: TData[];
     /**
      * @internal
      */
     tableData: TableRowState<TData>[];
     readonly columns: TableColumn[];
+    /**
+     * @internal
+     */
+    canRenderRows: boolean;
     get validity(): TableValidity;
+    /**
+     * @internal
+     */
+    readonly viewport: HTMLElement;
+    /**
+     * @internal
+     */
+    readonly virtualizer: Virtualizer<TData>;
     private readonly table;
     private options;
-    private readonly tableInitialized;
     private readonly tableValidator;
     constructor();
+    setData(newData: readonly TData[]): void;
     idFieldNameChanged(_prev: string | undefined, _next: string | undefined): void;
-    dataChanged(prev: TData[] | undefined, next: TData[] | undefined): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     checkValidity(): boolean;
-    private trySetData;
+    private setTableData;
     private refreshRows;
     private updateTableOptions;
     private readonly update;
-    private generateColumns;
+    private generateTanStackColumns;
 }

package/dist/esm/table/index.js

@@ -5,19 +5,22 @@ import { createTable as tanStackCreateTable, getCoreRowModel as tanStackGetCoreR
 import { TableValidator } from './models/table-validator';
 import { styles } from './styles';
 import { template } from './template';
+import { Virtualizer } from './models/virtualizer';
 /**
  * A nimble-styled table.
  */
 export class Table extends FoundationElement {
     constructor() {
         super();
-        this.data = [];
         /**
          * @internal
          */
         this.tableData = [];
         this.columns = [];
-        this.tableInitialized = false;
+        /**
+         * @internal
+         */
+        this.canRenderRows = true;
         this.tableValidator = new TableValidator();
         this.update = (state) => {
             this.table.setOptions(prev => ({
@@ -42,35 +45,41 @@ export class Table extends FoundationElement {
             autoResetAll: false
         };
         this.table = tanStackCreateTable(this.options);
-        this.tableInitialized = true;
+        this.virtualizer = new Virtualizer(this);
     }
     get validity() {
         return this.tableValidator.getValidity();
     }
+    setData(newData) {
+        this.generateTanStackColumns(newData);
+        this.setTableData(newData);
+    }
     idFieldNameChanged(_prev, _next) {
         // Force TanStack to detect a data update because a row's ID is only
         // generated when creating a new row model.
-        this.trySetData([...this.data]);
+        this.setTableData(this.table.options.data);
     }
-    dataChanged(prev, next) {
-        if ((!prev || prev.length === 0) && next && next.length > 0) {
-            this.generateColumns();
-        }
-        // Ignore any updates that occur prior to the TanStack table being initialized.
-        if (this.tableInitialized) {
-            this.trySetData(this.data);
-        }
+    connectedCallback() {
+        super.connectedCallback();
+        this.virtualizer.connectedCallback();
+    }
+    disconnectedCallback() {
+        this.virtualizer.disconnectedCallback();
     }
     checkValidity() {
         return this.tableValidator.isValid();
     }
-    trySetData(newData) {
-        const areIdsValid = this.tableValidator.validateRecordIds(newData, this.idFieldName);
+    setTableData(newData) {
+        const data = newData.map(record => {
+            return { ...record };
+        });
+        this.tableValidator.validateRecordIds(data, this.idFieldName);
+        this.canRenderRows = this.checkValidity();
         const getRowIdFunction = this.idFieldName === null || this.idFieldName === undefined
             ? undefined
             : (record) => record[this.idFieldName];
         this.updateTableOptions({
-            data: areIdsValid ? newData : [],
+            data,
             getRowId: getRowIdFunction
         });
     }
@@ -83,6 +92,7 @@ export class Table extends FoundationElement {
             };
             return rowState;
         });
+        this.virtualizer.dataChanged();
     }
     updateTableOptions(updatedOptions) {
         this.options = { ...this.options, ...updatedOptions };
@@ -91,11 +101,11 @@ export class Table extends FoundationElement {
     }
     // 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) {
+    generateTanStackColumns(data) {
+        if (data.length === 0) {
             return;
         }
-        const firstItem = this.data[0];
+        const firstItem = data[0];
         const keys = Object.keys(firstItem);
         const generatedColumns = keys.map(key => {
             const columnDef = {
@@ -111,15 +121,15 @@ export class Table extends FoundationElement {
 __decorate([
     attr({ attribute: 'id-field-name' })
 ], Table.prototype, "idFieldName", void 0);
-__decorate([
-    observable
-], Table.prototype, "data", void 0);
 __decorate([
     observable
 ], Table.prototype, "tableData", void 0);
 __decorate([
     observable
 ], Table.prototype, "columns", void 0);
+__decorate([
+    observable
+], Table.prototype, "canRenderRows", void 0);
 const nimbleTable = Table.compose({
     baseName: 'table',
     template,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/table/models/virtualizer.d.ts

@@ -0,0 +1,24 @@
+import { VirtualItem } from '@tanstack/virtual-core';
+import type { Table } from '..';
+import type { TableRecord } from '../types';
+/**
+ * Helper class for the nimble-table for row virtualization.
+ *
+ * @internal
+ */
+export declare class Virtualizer<TData extends TableRecord = TableRecord> {
+    visibleItems: VirtualItem[];
+    allRowsHeight: number;
+    headerContainerMarginRight: number;
+    rowContainerYOffset: number;
+    private readonly table;
+    private readonly viewportResizeObserver;
+    private virtualizer?;
+    constructor(table: Table<TData>);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    dataChanged(): void;
+    private updateVirtualizer;
+    private createVirtualizerOptions;
+    private handleVirtualizerChange;
+}

package/dist/esm/table/models/virtualizer.js

@@ -0,0 +1,98 @@
+import { __decorate } from "tslib";
+import { observable } from '@microsoft/fast-element';
+import { Virtualizer as TanStackVirtualizer, elementScroll, observeElementOffset, observeElementRect } from '@tanstack/virtual-core';
+import { controlHeight } from '../../theme-provider/design-tokens';
+/**
+ * Helper class for the nimble-table for row virtualization.
+ *
+ * @internal
+ */
+export class Virtualizer {
+    constructor(table) {
+        this.visibleItems = [];
+        this.allRowsHeight = 0;
+        this.headerContainerMarginRight = 0;
+        this.rowContainerYOffset = 0;
+        this.table = table;
+        this.viewportResizeObserver = new ResizeObserver(entries => {
+            const borderBoxSize = entries[0]?.borderBoxSize[0];
+            if (borderBoxSize) {
+                // If we have enough rows that a vertical scrollbar is shown, we need to offset the header widths
+                // by the same margin so the column headers align with the corresponding rendered cells
+                const viewportBoundingWidth = borderBoxSize.inlineSize;
+                this.headerContainerMarginRight = viewportBoundingWidth - this.table.viewport.scrollWidth;
+            }
+        });
+    }
+    connectedCallback() {
+        this.viewportResizeObserver.observe(this.table.viewport);
+        this.updateVirtualizer();
+    }
+    disconnectedCallback() {
+        this.viewportResizeObserver.disconnect();
+    }
+    dataChanged() {
+        if (this.table.$fastController.isConnected) {
+            this.updateVirtualizer();
+        }
+    }
+    updateVirtualizer() {
+        const options = this.createVirtualizerOptions();
+        if (this.virtualizer) {
+            this.virtualizer.setOptions(options);
+        }
+        else {
+            this.virtualizer = new TanStackVirtualizer(options);
+        }
+        this.virtualizer._willUpdate();
+        this.handleVirtualizerChange();
+    }
+    createVirtualizerOptions() {
+        const rowHeight = parseFloat(controlHeight.getValueFor(this.table));
+        return {
+            count: this.table.tableData.length,
+            getScrollElement: () => {
+                return this.table.viewport;
+            },
+            estimateSize: (_) => rowHeight,
+            enableSmoothScroll: true,
+            overscan: 3,
+            scrollingDelay: 5,
+            scrollToFn: elementScroll,
+            observeElementOffset,
+            observeElementRect,
+            onChange: () => this.handleVirtualizerChange()
+        };
+    }
+    handleVirtualizerChange() {
+        const virtualizer = this.virtualizer;
+        this.visibleItems = virtualizer.getVirtualItems();
+        this.allRowsHeight = virtualizer.getTotalSize();
+        // We're using a separate div ('table-scroll') to represent the full height of all rows, and
+        // the row container's height is only big enough to hold the virtualized rows. So we don't
+        // use the TanStackVirtual-provided 'start' offset (which is in terms of the full height)
+        // to translate every individual row, we just translate the row container.
+        let rowContainerYOffset = 0;
+        if (this.visibleItems.length > 0) {
+            const firstItem = this.visibleItems[0];
+            const lastItem = this.visibleItems[this.visibleItems.length - 1];
+            if (lastItem.end < this.allRowsHeight) {
+                rowContainerYOffset = firstItem.start - virtualizer.scrollOffset;
+            }
+        }
+        this.rowContainerYOffset = rowContainerYOffset;
+    }
+}
+__decorate([
+    observable
+], Virtualizer.prototype, "visibleItems", void 0);
+__decorate([
+    observable
+], Virtualizer.prototype, "allRowsHeight", void 0);
+__decorate([
+    observable
+], Virtualizer.prototype, "headerContainerMarginRight", void 0);
+__decorate([
+    observable
+], Virtualizer.prototype, "rowContainerYOffset", void 0);
+//# sourceMappingURL=virtualizer.js.map

package/dist/esm/table/models/virtualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtualizer.js","sourceRoot":"","sources":["../../../../src/table/models/virtualizer.ts"],"names":[],"mappings":"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"}

package/dist/esm/table/styles.js

@@ -8,13 +8,37 @@ import { themeBehavior } from '../utilities/style/theme';
 export const styles = css `
     ${display('flex')}
 
+    :host {
+        height: 480px;
+    }
+
     .table-container {
         display: flex;
         flex-direction: column;
         width: 100%;
         font: ${bodyFont};
         color: ${bodyFontColor};
-        overflow: auto;
+    }
+
+    .table-viewport {
+        overflow-y: auto;
+        display: block;
+        height: 100%;
+        position: relative;
+    }
+
+    .table-scroll {
+        pointer-events: none;
+        position: absolute;
+        top: 0px;
+        width: 100%;
+    }
+
+    .table-row-container {
+        width: 100%;
+        position: sticky;
+        overflow: hidden;
+        top: 0px;
     }
 
     .header-container {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,cAAc,EACjB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;gBAML,QAAQ;iBACP,aAAa;;;;;;;;;;;;sBAYR,0BAA0B;;;;;;;;;sBAS1B,0BAA0B;;;;;;;;;;;;sBAY1B,cAAc;;CAEnC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;;8BAMmB,cAAc;;;;8BAId,cAAc;;;;8BAId,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,cAAc,EACjB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;gBAUL,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAgCR,0BAA0B;;;;;;;;;sBAS1B,0BAA0B;;;;;;;;;;;;sBAY1B,cAAc;;CAEnC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;;8BAMmB,cAAc;;;;8BAId,cAAc;;;;8BAId,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC"}

package/dist/esm/table/template.js

@@ -1,4 +1,4 @@
-import { html, repeat, slotted, when } from '@microsoft/fast-element';
+import { html, ref, repeat, slotted, when } from '@microsoft/fast-element';
 import { DesignSystem } from '@microsoft/fast-foundation';
 import { TableHeader } from './components/header';
 import { TableRow } from './components/row';
@@ -13,7 +13,7 @@ const isTableColumn = () => {
 export const template = html `
     <template role="table">
         <div class="table-container">
-            <div role="rowgroup" class="header-container">
+            <div role="rowgroup" class="header-container" style="margin-right: ${x => x.virtualizer.headerContainerMarginRight}px;">
                 <div class="header-row" role="row">
                     ${repeat(x => x.columns, html `
                         <${DesignSystem.tagFor(TableHeader)} class="header">
@@ -22,18 +22,22 @@ export const template = html `
                     `)}
                 </div>
             </div>
-            <div class="table-viewport" role="rowgroup">
-            ${when(x => x.columns.length > 0, html `
-                ${repeat(x => x.tableData, html `
-                    <${DesignSystem.tagFor(TableRow)}
-                        class="row"
-                        record-id="${x => x.id}"
-                        :dataRecord="${x => x.record}"
-                        :columns="${(_, c) => c.parent.columns}"
-                    >
-                    </${DesignSystem.tagFor(TableRow)}>
-                `)}
-            `)}
+            <div class="table-viewport" ${ref('viewport')}>
+                <div class="table-scroll" style="height: ${x => x.virtualizer.allRowsHeight}px;"></div>
+                <div class="table-row-container" role="rowgroup" style="transform: ${x => (x.virtualizer.rowContainerYOffset === 0 ? 'none' : `translateY(${x.virtualizer.rowContainerYOffset}px)`)};">
+                    ${when(x => x.columns.length > 0 && x.canRenderRows, html `
+                        ${repeat(x => x.virtualizer.visibleItems, html `
+                            <${DesignSystem.tagFor(TableRow)}
+                                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}"
+                                style="height: ${x => x.size}px;"
+                            >
+                            </${DesignSystem.tagFor(TableRow)}>
+                        `)}
+                    `)}
+                </div>
             </div>
         </div>
         <slot ${slotted({ property: 'columns', filter: isTableColumn() })}></slot>

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/table/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,IAAI,EACJ,MAAM,EACN,OAAO,EACP,IAAI,EACP,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,aAAa,GAAG,GAAmB,EAAE;IACvC,MAAM,MAAM,GAAmB,CAC3B,KAAW,EACX,CAAS,EACT,EAAU,EACH,EAAE;QACT,OAAO,KAAK,YAAY,WAAW,CAAC;IACxC,CAAC,CAAC;IACF,OAAO,MAAM,CAAC;AAClB,CAAC,CAAC;AAEF,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAO;;;;;sBAKb,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,CAAa;2BACnC,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC;8BAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;4BACpB,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC;qBACvC,CAAC;;;;cAIR,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAO;kBACvC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAe;uBACvC,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC;;qCAEf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;uCACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;oCAChB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAE,CAAC,CAAC,MAAgB,CAAC,OAAO;;wBAEjD,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC;iBACpC,CAAC;aACL,CAAC;;;gBAGE,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,CAAC;;CAExE,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/table/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,IAAI,EACJ,GAAG,EACH,MAAM,EACN,OAAO,EACP,IAAI,EACP,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,aAAa,GAAG,GAAmB,EAAE;IACvC,MAAM,MAAM,GAAmB,CAC3B,KAAW,EACX,CAAS,EACT,EAAU,EACH,EAAE;QACT,OAAO,KAAK,YAAY,WAAW,CAAC;IACxC,CAAC,CAAC;IACF,OAAO,MAAM,CAAC;AAClB,CAAC,CAAC;AAEF,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAO;;;iFAG8C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,0BAA0B;;sBAExG,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,CAAa;2BACnC,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC;8BAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;4BACpB,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC;qBACvC,CAAC;;;0CAGoB,GAAG,CAAC,UAAU,CAAC;2DACE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,aAAa;qFACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,mBAAmB,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,mBAAmB,KAAK,CAAC;sBAC7K,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,aAAa,EAAE,IAAI,CAAO;0BAC1D,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,EAAE,IAAI,CAAoB;+BAC3D,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC;;6CAEf,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;+CACvC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM;4CAChD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO;iDACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;gCAE5B,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC;yBACpC,CAAC;qBACL,CAAC;;;;gBAIN,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,CAAC;;CAExE,CAAC"}

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

@@ -7,7 +7,7 @@ export declare type TableFieldName = string;
  * TableFieldValue describes the type associated with values within
  * a table's records.
  */
-export declare type TableFieldValue = string | number | boolean | Date | null | undefined;
+export declare type TableFieldValue = string | number | boolean | null | undefined;
 /**
  * TableRecord describes the data structure that backs a single row in a table.
  * It is made up of fields, which are key/value pairs that have a key of type

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "18.0.1",
+  "version": "18.0.3",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
@@ -52,6 +52,7 @@
     "@microsoft/fast-web-utilities": "^5.4.1",
     "@ni/nimble-tokens": "^4.3.2",
     "@tanstack/table-core": "^8.7.0",
+    "@tanstack/virtual-core": "^3.0.0-beta.34",
     "@types/d3": "^7.4.0",
     "@types/d3-scale": "^4.0.2",
     "@types/d3-zoom": "^3.0.0",