@ni/nimble-components 18.0.1 → 18.0.3

package/dist/all-components-bundle.js

@@ -22532,7 +22532,7 @@
       recurse(arr);
       return flat;
     }
-    function memo(getDeps, fn, opts) {
+    function memo$1(getDeps, fn, opts) {
       let deps = [];
       let result;
       return () => {
@@ -22611,7 +22611,7 @@
         depth,
         columnDef: resolvedColumnDef,
         columns: [],
-        getFlatColumns: memo(() => [true], () => {
+        getFlatColumns: memo$1(() => [true], () => {
           var _column$columns;
           return [column, ...((_column$columns = column.columns) == null ? void 0 : _column$columns.flatMap(d => d.getFlatColumns()))];
         }, {
@@ -22621,7 +22621,7 @@
             return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugColumns;
           }
         }),
-        getLeafColumns: memo(() => [table._getOrderColumnsFn()], orderColumns => {
+        getLeafColumns: memo$1(() => [table._getOrderColumnsFn()], orderColumns => {
           var _column$columns2;
           if ((_column$columns2 = column.columns) != null && _column$columns2.length) {
             let leafColumns = column.columns.flatMap(column => column.getLeafColumns());
@@ -22687,7 +22687,7 @@
         return {
           // Header Groups
 
-          getHeaderGroups: memo(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allColumns, leafColumns, left, right) => {
+          getHeaderGroups: memo$1(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allColumns, leafColumns, left, right) => {
             var _left$map$filter, _right$map$filter;
             const leftColumns = (_left$map$filter = left == null ? void 0 : left.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _left$map$filter : [];
             const rightColumns = (_right$map$filter = right == null ? void 0 : right.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _right$map$filter : [];
@@ -22701,7 +22701,7 @@
               return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugHeaders;
             }
           }),
-          getCenterHeaderGroups: memo(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allColumns, leafColumns, left, right) => {
+          getCenterHeaderGroups: memo$1(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allColumns, leafColumns, left, right) => {
             leafColumns = leafColumns.filter(column => !(left != null && left.includes(column.id)) && !(right != null && right.includes(column.id)));
             return buildHeaderGroups(allColumns, leafColumns, table, 'center');
           }, {
@@ -22711,7 +22711,7 @@
               return (_table$options$debugA2 = table.options.debugAll) != null ? _table$options$debugA2 : table.options.debugHeaders;
             }
           }),
-          getLeftHeaderGroups: memo(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.left], (allColumns, leafColumns, left) => {
+          getLeftHeaderGroups: memo$1(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.left], (allColumns, leafColumns, left) => {
             var _left$map$filter2;
             const orderedLeafColumns = (_left$map$filter2 = left == null ? void 0 : left.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _left$map$filter2 : [];
             return buildHeaderGroups(allColumns, orderedLeafColumns, table, 'left');
@@ -22722,7 +22722,7 @@
               return (_table$options$debugA3 = table.options.debugAll) != null ? _table$options$debugA3 : table.options.debugHeaders;
             }
           }),
-          getRightHeaderGroups: memo(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.right], (allColumns, leafColumns, right) => {
+          getRightHeaderGroups: memo$1(() => [table.getAllColumns(), table.getVisibleLeafColumns(), table.getState().columnPinning.right], (allColumns, leafColumns, right) => {
             var _right$map$filter2;
             const orderedLeafColumns = (_right$map$filter2 = right == null ? void 0 : right.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _right$map$filter2 : [];
             return buildHeaderGroups(allColumns, orderedLeafColumns, table, 'right');
@@ -22735,7 +22735,7 @@
           }),
           // Footer Groups
 
-          getFooterGroups: memo(() => [table.getHeaderGroups()], headerGroups => {
+          getFooterGroups: memo$1(() => [table.getHeaderGroups()], headerGroups => {
             return [...headerGroups].reverse();
           }, {
             key: 'getFooterGroups',
@@ -22744,7 +22744,7 @@
               return (_table$options$debugA5 = table.options.debugAll) != null ? _table$options$debugA5 : table.options.debugHeaders;
             }
           }),
-          getLeftFooterGroups: memo(() => [table.getLeftHeaderGroups()], headerGroups => {
+          getLeftFooterGroups: memo$1(() => [table.getLeftHeaderGroups()], headerGroups => {
             return [...headerGroups].reverse();
           }, {
             key: 'getLeftFooterGroups',
@@ -22753,7 +22753,7 @@
               return (_table$options$debugA6 = table.options.debugAll) != null ? _table$options$debugA6 : table.options.debugHeaders;
             }
           }),
-          getCenterFooterGroups: memo(() => [table.getCenterHeaderGroups()], headerGroups => {
+          getCenterFooterGroups: memo$1(() => [table.getCenterHeaderGroups()], headerGroups => {
             return [...headerGroups].reverse();
           }, {
             key: 'getCenterFooterGroups',
@@ -22762,7 +22762,7 @@
               return (_table$options$debugA7 = table.options.debugAll) != null ? _table$options$debugA7 : table.options.debugHeaders;
             }
           }),
-          getRightFooterGroups: memo(() => [table.getRightHeaderGroups()], headerGroups => {
+          getRightFooterGroups: memo$1(() => [table.getRightHeaderGroups()], headerGroups => {
             return [...headerGroups].reverse();
           }, {
             key: 'getRightFooterGroups',
@@ -22773,7 +22773,7 @@
           }),
           // Flat Headers
 
-          getFlatHeaders: memo(() => [table.getHeaderGroups()], headerGroups => {
+          getFlatHeaders: memo$1(() => [table.getHeaderGroups()], headerGroups => {
             return headerGroups.map(headerGroup => {
               return headerGroup.headers;
             }).flat();
@@ -22784,7 +22784,7 @@
               return (_table$options$debugA9 = table.options.debugAll) != null ? _table$options$debugA9 : table.options.debugHeaders;
             }
           }),
-          getLeftFlatHeaders: memo(() => [table.getLeftHeaderGroups()], left => {
+          getLeftFlatHeaders: memo$1(() => [table.getLeftHeaderGroups()], left => {
             return left.map(headerGroup => {
               return headerGroup.headers;
             }).flat();
@@ -22795,7 +22795,7 @@
               return (_table$options$debugA10 = table.options.debugAll) != null ? _table$options$debugA10 : table.options.debugHeaders;
             }
           }),
-          getCenterFlatHeaders: memo(() => [table.getCenterHeaderGroups()], left => {
+          getCenterFlatHeaders: memo$1(() => [table.getCenterHeaderGroups()], left => {
             return left.map(headerGroup => {
               return headerGroup.headers;
             }).flat();
@@ -22806,7 +22806,7 @@
               return (_table$options$debugA11 = table.options.debugAll) != null ? _table$options$debugA11 : table.options.debugHeaders;
             }
           }),
-          getRightFlatHeaders: memo(() => [table.getRightHeaderGroups()], left => {
+          getRightFlatHeaders: memo$1(() => [table.getRightHeaderGroups()], left => {
             return left.map(headerGroup => {
               return headerGroup.headers;
             }).flat();
@@ -22819,7 +22819,7 @@
           }),
           // Leaf Headers
 
-          getCenterLeafHeaders: memo(() => [table.getCenterFlatHeaders()], flatHeaders => {
+          getCenterLeafHeaders: memo$1(() => [table.getCenterFlatHeaders()], flatHeaders => {
             return flatHeaders.filter(header => {
               var _header$subHeaders;
               return !((_header$subHeaders = header.subHeaders) != null && _header$subHeaders.length);
@@ -22831,7 +22831,7 @@
               return (_table$options$debugA13 = table.options.debugAll) != null ? _table$options$debugA13 : table.options.debugHeaders;
             }
           }),
-          getLeftLeafHeaders: memo(() => [table.getLeftFlatHeaders()], flatHeaders => {
+          getLeftLeafHeaders: memo$1(() => [table.getLeftFlatHeaders()], flatHeaders => {
             return flatHeaders.filter(header => {
               var _header$subHeaders2;
               return !((_header$subHeaders2 = header.subHeaders) != null && _header$subHeaders2.length);
@@ -22843,7 +22843,7 @@
               return (_table$options$debugA14 = table.options.debugAll) != null ? _table$options$debugA14 : table.options.debugHeaders;
             }
           }),
-          getRightLeafHeaders: memo(() => [table.getRightFlatHeaders()], flatHeaders => {
+          getRightLeafHeaders: memo$1(() => [table.getRightFlatHeaders()], flatHeaders => {
             return flatHeaders.filter(header => {
               var _header$subHeaders3;
               return !((_header$subHeaders3 = header.subHeaders) != null && _header$subHeaders3.length);
@@ -22855,7 +22855,7 @@
               return (_table$options$debugA15 = table.options.debugAll) != null ? _table$options$debugA15 : table.options.debugHeaders;
             }
           }),
-          getLeafHeaders: memo(() => [table.getLeftHeaderGroups(), table.getCenterHeaderGroups(), table.getRightHeaderGroups()], (left, center, right) => {
+          getLeafHeaders: memo$1(() => [table.getLeftHeaderGroups(), table.getCenterHeaderGroups(), table.getRightHeaderGroups()], (left, center, right) => {
             var _left$0$headers, _left$, _center$0$headers, _center$, _right$0$headers, _right$;
             return [...((_left$0$headers = (_left$ = left[0]) == null ? void 0 : _left$.headers) != null ? _left$0$headers : []), ...((_center$0$headers = (_center$ = center[0]) == null ? void 0 : _center$.headers) != null ? _center$0$headers : []), ...((_right$0$headers = (_right$ = right[0]) == null ? void 0 : _right$.headers) != null ? _right$0$headers : [])].map(header => {
               return header.getLeafHeaders();
@@ -23935,7 +23935,7 @@
             var _table$initialState$c;
             table.setColumnOrder(defaultState ? [] : (_table$initialState$c = table.initialState.columnOrder) != null ? _table$initialState$c : []);
           },
-          _getOrderColumnsFn: memo(() => [table.getState().columnOrder, table.getState().grouping, table.options.groupedColumnMode], (columnOrder, grouping, groupedColumnMode) => columns => {
+          _getOrderColumnsFn: memo$1(() => [table.getState().columnOrder, table.getState().grouping, table.options.groupedColumnMode], (columnOrder, grouping, groupedColumnMode) => columns => {
             // Sort grouped columns to the start of the column list
             // before the headers are built
             let orderedColumns = [];
@@ -24069,7 +24069,7 @@
               pageCount: newPageCount
             };
           }),
-          getPageOptions: memo(() => [table.getPageCount()], pageCount => {
+          getPageOptions: memo$1(() => [table.getPageCount()], pageCount => {
             let pageOptions = [];
             if (pageCount && pageCount > 0) {
               pageOptions = [...new Array(pageCount)].fill(null).map((_, i) => i);
@@ -24192,7 +24192,7 @@
       },
       createRow: (row, table) => {
         return {
-          getCenterVisibleCells: memo(() => [row._getAllVisibleCells(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allCells, left, right) => {
+          getCenterVisibleCells: memo$1(() => [row._getAllVisibleCells(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allCells, left, right) => {
             const leftAndRight = [...(left != null ? left : []), ...(right != null ? right : [])];
             return allCells.filter(d => !leftAndRight.includes(d.column.id));
           }, {
@@ -24202,7 +24202,7 @@
               return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugRows;
             }
           }),
-          getLeftVisibleCells: memo(() => [row._getAllVisibleCells(), table.getState().columnPinning.left,,], (allCells, left) => {
+          getLeftVisibleCells: memo$1(() => [row._getAllVisibleCells(), table.getState().columnPinning.left,,], (allCells, left) => {
             const cells = (left != null ? left : []).map(columnId => allCells.find(cell => cell.column.id === columnId)).filter(Boolean).map(d => ({
               ...d,
               position: 'left'
@@ -24215,7 +24215,7 @@
               return (_table$options$debugA2 = table.options.debugAll) != null ? _table$options$debugA2 : table.options.debugRows;
             }
           }),
-          getRightVisibleCells: memo(() => [row._getAllVisibleCells(), table.getState().columnPinning.right], (allCells, right) => {
+          getRightVisibleCells: memo$1(() => [row._getAllVisibleCells(), table.getState().columnPinning.right], (allCells, right) => {
             const cells = (right != null ? right : []).map(columnId => allCells.find(cell => cell.column.id === columnId)).filter(Boolean).map(d => ({
               ...d,
               position: 'right'
@@ -24246,7 +24246,7 @@
             }
             return Boolean((_pinningState$positio = pinningState[position]) == null ? void 0 : _pinningState$positio.length);
           },
-          getLeftLeafColumns: memo(() => [table.getAllLeafColumns(), table.getState().columnPinning.left], (allColumns, left) => {
+          getLeftLeafColumns: memo$1(() => [table.getAllLeafColumns(), table.getState().columnPinning.left], (allColumns, left) => {
             return (left != null ? left : []).map(columnId => allColumns.find(column => column.id === columnId)).filter(Boolean);
           }, {
             key: 'getLeftLeafColumns',
@@ -24255,7 +24255,7 @@
               return (_table$options$debugA4 = table.options.debugAll) != null ? _table$options$debugA4 : table.options.debugColumns;
             }
           }),
-          getRightLeafColumns: memo(() => [table.getAllLeafColumns(), table.getState().columnPinning.right], (allColumns, right) => {
+          getRightLeafColumns: memo$1(() => [table.getAllLeafColumns(), table.getState().columnPinning.right], (allColumns, right) => {
             return (right != null ? right : []).map(columnId => allColumns.find(column => column.id === columnId)).filter(Boolean);
           }, {
             key: 'getRightLeafColumns',
@@ -24264,7 +24264,7 @@
               return (_table$options$debugA5 = table.options.debugAll) != null ? _table$options$debugA5 : table.options.debugColumns;
             }
           }),
-          getCenterLeafColumns: memo(() => [table.getAllLeafColumns(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allColumns, left, right) => {
+          getCenterLeafColumns: memo$1(() => [table.getAllLeafColumns(), table.getState().columnPinning.left, table.getState().columnPinning.right], (allColumns, left, right) => {
             const leftAndRight = [...(left != null ? left : []), ...(right != null ? right : [])];
             return allColumns.filter(d => !leftAndRight.includes(d.id));
           }, {
@@ -24400,7 +24400,7 @@
           //   table.setRowSelection(selectedRowIds)
           // },
           getPreSelectedRowModel: () => table.getCoreRowModel(),
-          getSelectedRowModel: memo(() => [table.getState().rowSelection, table.getCoreRowModel()], (rowSelection, rowModel) => {
+          getSelectedRowModel: memo$1(() => [table.getState().rowSelection, table.getCoreRowModel()], (rowSelection, rowModel) => {
             if (!Object.keys(rowSelection).length) {
               return {
                 rows: [],
@@ -24416,7 +24416,7 @@
               return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugTable;
             }
           }),
-          getFilteredSelectedRowModel: memo(() => [table.getState().rowSelection, table.getFilteredRowModel()], (rowSelection, rowModel) => {
+          getFilteredSelectedRowModel: memo$1(() => [table.getState().rowSelection, table.getFilteredRowModel()], (rowSelection, rowModel) => {
             if (!Object.keys(rowSelection).length) {
               return {
                 rows: [],
@@ -24432,7 +24432,7 @@
               return (_table$options$debugA2 = table.options.debugAll) != null ? _table$options$debugA2 : table.options.debugTable;
             }
           }),
-          getGroupedSelectedRowModel: memo(() => [table.getState().rowSelection, table.getSortedRowModel()], (rowSelection, rowModel) => {
+          getGroupedSelectedRowModel: memo$1(() => [table.getState().rowSelection, table.getSortedRowModel()], (rowSelection, rowModel) => {
             if (!Object.keys(rowSelection).length) {
               return {
                 rows: [],
@@ -25014,7 +25014,7 @@
       },
       createRow: (row, table) => {
         return {
-          _getAllVisibleCells: memo(() => [row.getAllCells(), table.getState().columnVisibility], cells => {
+          _getAllVisibleCells: memo$1(() => [row.getAllCells(), table.getState().columnVisibility], cells => {
             return cells.filter(cell => cell.column.getIsVisible());
           }, {
             key: "development" === 'production' ,
@@ -25023,7 +25023,7 @@
               return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugRows;
             }
           }),
-          getVisibleCells: memo(() => [row.getLeftVisibleCells(), row.getCenterVisibleCells(), row.getRightVisibleCells()], (left, center, right) => [...left, ...center, ...right], {
+          getVisibleCells: memo$1(() => [row.getLeftVisibleCells(), row.getCenterVisibleCells(), row.getRightVisibleCells()], (left, center, right) => [...left, ...center, ...right], {
             key: 'row.getVisibleCells',
             debug: () => {
               var _table$options$debugA2;
@@ -25034,7 +25034,7 @@
       },
       createTable: table => {
         const makeVisibleColumnsMethod = (key, getColumns) => {
-          return memo(() => [getColumns(), getColumns().filter(d => d.getIsVisible()).map(d => d.id).join('_')], columns => {
+          return memo$1(() => [getColumns(), getColumns().filter(d => d.getIsVisible()).map(d => d.id).join('_')], columns => {
             return columns.filter(d => d.getIsVisible == null ? void 0 : d.getIsVisible());
           }, {
             key,
@@ -25172,7 +25172,7 @@
           }
           return row;
         },
-        _getDefaultColumnDef: memo(() => [table.options.defaultColumn], defaultColumn => {
+        _getDefaultColumnDef: memo$1(() => [table.options.defaultColumn], defaultColumn => {
           var _defaultColumn;
           defaultColumn = (_defaultColumn = defaultColumn) != null ? _defaultColumn : {};
           return {
@@ -25204,7 +25204,7 @@
           key: 'getDefaultColumnDef'
         }),
         _getColumnDefs: () => table.options.columns,
-        getAllColumns: memo(() => [table._getColumnDefs()], columnDefs => {
+        getAllColumns: memo$1(() => [table._getColumnDefs()], columnDefs => {
           const recurseColumns = function (columnDefs, parent, depth) {
             if (depth === void 0) {
               depth = 0;
@@ -25224,7 +25224,7 @@
             return (_table$options$debugA2 = table.options.debugAll) != null ? _table$options$debugA2 : table.options.debugColumns;
           }
         }),
-        getAllFlatColumns: memo(() => [table.getAllColumns()], allColumns => {
+        getAllFlatColumns: memo$1(() => [table.getAllColumns()], allColumns => {
           return allColumns.flatMap(column => {
             return column.getFlatColumns();
           });
@@ -25235,7 +25235,7 @@
             return (_table$options$debugA3 = table.options.debugAll) != null ? _table$options$debugA3 : table.options.debugColumns;
           }
         }),
-        _getAllFlatColumnsById: memo(() => [table.getAllFlatColumns()], flatColumns => {
+        _getAllFlatColumnsById: memo$1(() => [table.getAllFlatColumns()], flatColumns => {
           return flatColumns.reduce((acc, column) => {
             acc[column.id] = column;
             return acc;
@@ -25247,7 +25247,7 @@
             return (_table$options$debugA4 = table.options.debugAll) != null ? _table$options$debugA4 : table.options.debugColumns;
           }
         }),
-        getAllLeafColumns: memo(() => [table.getAllColumns(), table._getOrderColumnsFn()], (allColumns, orderColumns) => {
+        getAllLeafColumns: memo$1(() => [table.getAllColumns(), table._getOrderColumnsFn()], (allColumns, orderColumns) => {
           let leafColumns = allColumns.flatMap(column => column.getLeafColumns());
           return orderColumns(leafColumns);
         }, {
@@ -25286,7 +25286,7 @@
         column,
         getValue: () => row.getValue(columnId),
         renderValue: getRenderValue,
-        getContext: memo(() => [table, column, row, cell], (table, column, row, cell) => ({
+        getContext: memo$1(() => [table, column, row, cell], (table, column, row, cell) => ({
           table,
           column,
           row,
@@ -25344,7 +25344,7 @@
         },
         subRows: subRows != null ? subRows : [],
         getLeafRows: () => flattenBy(row.subRows, d => d.subRows),
-        getAllCells: memo(() => [table.getAllLeafColumns()], leafColumns => {
+        getAllCells: memo$1(() => [table.getAllLeafColumns()], leafColumns => {
           return leafColumns.map(column => {
             return createCell(table, row, column, column.id);
           });
@@ -25355,7 +25355,7 @@
             return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugRows;
           }
         }),
-        _getAllCellsByColumnId: memo(() => [row.getAllCells()], allCells => {
+        _getAllCellsByColumnId: memo$1(() => [row.getAllCells()], allCells => {
           return allCells.reduce((acc, cell) => {
             acc[cell.column.id] = cell;
             return acc;
@@ -25376,7 +25376,7 @@
     };
 
     function getCoreRowModel() {
-      return table => memo(() => [table.options.data], data => {
+      return table => memo$1(() => [table.options.data], data => {
         const rowModel = {
           rows: [],
           flatRows: [],
@@ -25485,13 +25485,37 @@
     const styles$d = 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 {
@@ -25659,12 +25683,12 @@
     // prettier-ignore
     const template$5 = 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)}>
         `)}
@@ -25680,22 +25704,27 @@
             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);
@@ -25710,6 +25739,9 @@
     __decorate$1([
         observable
     ], TableRow.prototype, "columns", void 0);
+    __decorate$1([
+        volatile
+    ], TableRow.prototype, "columnStates", null);
     const nimbleTableRow = TableRow.compose({
         baseName: 'table-row',
         template: template$5,
@@ -25733,7 +25765,7 @@
     const template$4 = 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">
@@ -25742,37 +25774,708 @@
                     `)}
                 </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>
     </template>
 `;
 
+    /**
+     * virtual-core
+     *
+     * Copyright (c) TanStack
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE.md file in the root directory of this source tree.
+     *
+     * @license MIT
+     */
+    function _extends() {
+      _extends = Object.assign ? Object.assign.bind() : function (target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i];
+          for (var key in source) {
+            if (Object.prototype.hasOwnProperty.call(source, key)) {
+              target[key] = source[key];
+            }
+          }
+        }
+        return target;
+      };
+      return _extends.apply(this, arguments);
+    }
+
+    /**
+     * virtual-core
+     *
+     * Copyright (c) TanStack
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE.md file in the root directory of this source tree.
+     *
+     * @license MIT
+     */
+    function memo(getDeps, fn, opts) {
+      var deps = [];
+      var result;
+      return function () {
+        var depTime;
+        if (opts.key && opts.debug != null && opts.debug()) depTime = Date.now();
+        var newDeps = getDeps();
+        var depsChanged = newDeps.length !== deps.length || newDeps.some(function (dep, index) {
+          return deps[index] !== dep;
+        });
+        if (!depsChanged) {
+          return result;
+        }
+        deps = newDeps;
+        var resultTime;
+        if (opts.key && opts.debug != null && opts.debug()) resultTime = Date.now();
+        result = fn.apply(void 0, newDeps);
+        opts == null ? void 0 : opts.onChange == null ? void 0 : opts.onChange(result);
+        if (opts.key && opts.debug != null && opts.debug()) {
+          var depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
+          var resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
+          var resultFpsPercentage = resultEndTime / 16;
+          var pad = function pad(str, num) {
+            str = String(str);
+            while (str.length < num) {
+              str = ' ' + str;
+            }
+            return str;
+          };
+          console.info("%c\u23F1 " + pad(resultEndTime, 5) + " /" + pad(depEndTime, 5) + " ms", "\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl(" + Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120)) + "deg 100% 31%);", opts == null ? void 0 : opts.key);
+        }
+        return result;
+      };
+    }
+
+    /**
+     * virtual-core
+     *
+     * Copyright (c) TanStack
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE.md file in the root directory of this source tree.
+     *
+     * @license MIT
+     */
+
+    //
+
+    //
+
+    var defaultKeyExtractor = function defaultKeyExtractor(index) {
+      return index;
+    };
+    var defaultRangeExtractor = function defaultRangeExtractor(range) {
+      var start = Math.max(range.startIndex - range.overscan, 0);
+      var end = Math.min(range.endIndex + range.overscan, range.count - 1);
+      var arr = [];
+      for (var _i = start; _i <= end; _i++) {
+        arr.push(_i);
+      }
+      return arr;
+    };
+    var observeElementRect = function observeElementRect(instance, cb) {
+      var observer = new ResizeObserver(function (entries) {
+        var _entries$, _entries$2;
+        cb({
+          width: (_entries$ = entries[0]) == null ? void 0 : _entries$.contentRect.width,
+          height: (_entries$2 = entries[0]) == null ? void 0 : _entries$2.contentRect.height
+        });
+      });
+      if (!instance.scrollElement) {
+        return;
+      }
+      cb(instance.scrollElement.getBoundingClientRect());
+      observer.observe(instance.scrollElement);
+      return function () {
+        observer.unobserve(instance.scrollElement);
+      };
+    };
+    var scrollProps = {
+      element: ['scrollLeft', 'scrollTop'],
+      window: ['scrollX', 'scrollY']
+    };
+    var createOffsetObserver = function createOffsetObserver(mode) {
+      return function (instance, cb) {
+        if (!instance.scrollElement) {
+          return;
+        }
+        var propX = scrollProps[mode][0];
+        var propY = scrollProps[mode][1];
+        var prevX = instance.scrollElement[propX];
+        var prevY = instance.scrollElement[propY];
+        var scroll = function scroll() {
+          var offset = instance.scrollElement[instance.options.horizontal ? propX : propY];
+          cb(offset);
+        };
+        scroll();
+        var onScroll = function onScroll(e) {
+          var target = e.currentTarget;
+          var scrollX = target[propX];
+          var scrollY = target[propY];
+          if (instance.options.horizontal ? prevX - scrollX : prevY - scrollY) {
+            scroll();
+          }
+          prevX = scrollX;
+          prevY = scrollY;
+        };
+        instance.scrollElement.addEventListener('scroll', onScroll, {
+          capture: false,
+          passive: true
+        });
+        return function () {
+          instance.scrollElement.removeEventListener('scroll', onScroll);
+        };
+      };
+    };
+    var observeElementOffset = createOffsetObserver('element');
+    var measureElement = function measureElement(element, instance) {
+      return Math.round(element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height']);
+    };
+    var elementScroll = function elementScroll(offset, _ref2, instance) {
+      var _instance$scrollEleme3, _instance$scrollEleme4;
+      var _ref2$adjustments = _ref2.adjustments,
+        adjustments = _ref2$adjustments === void 0 ? 0 : _ref2$adjustments,
+        behavior = _ref2.behavior;
+      var toOffset = offset + adjustments;
+      (_instance$scrollEleme3 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme3.scrollTo == null ? void 0 : _instance$scrollEleme3.scrollTo((_instance$scrollEleme4 = {}, _instance$scrollEleme4[instance.options.horizontal ? 'left' : 'top'] = toOffset, _instance$scrollEleme4.behavior = behavior, _instance$scrollEleme4));
+    };
+    var Virtualizer$1 = function Virtualizer(_opts) {
+      var _this = this;
+      this.unsubs = [];
+      this.scrollElement = null;
+      this.isScrolling = false;
+      this.isScrollingTimeoutId = null;
+      this.measurementsCache = [];
+      this.itemSizeCache = {};
+      this.pendingMeasuredCacheIndexes = [];
+      this.scrollDirection = null;
+      this.scrollAdjustments = 0;
+      this.measureElementCache = {};
+      this.pendingScrollToIndexCallback = null;
+      this.getResizeObserver = function () {
+        var _ro = null;
+        return function () {
+          if (_ro) {
+            return _ro;
+          } else if (typeof ResizeObserver !== 'undefined') {
+            return _ro = new ResizeObserver(function (entries) {
+              entries.forEach(function (entry) {
+                _this._measureElement(entry.target, false);
+              });
+            });
+          } else {
+            return null;
+          }
+        };
+      }();
+      this.range = {
+        startIndex: 0,
+        endIndex: 0
+      };
+      this.setOptions = function (opts) {
+        Object.entries(opts).forEach(function (_ref3) {
+          var key = _ref3[0],
+            value = _ref3[1];
+          if (typeof value === 'undefined') delete opts[key];
+        });
+        _this.options = _extends({
+          debug: false,
+          initialOffset: 0,
+          overscan: 1,
+          paddingStart: 0,
+          paddingEnd: 0,
+          scrollPaddingStart: 0,
+          scrollPaddingEnd: 0,
+          horizontal: false,
+          getItemKey: defaultKeyExtractor,
+          rangeExtractor: defaultRangeExtractor,
+          onChange: function onChange() {},
+          measureElement: measureElement,
+          initialRect: {
+            width: 0,
+            height: 0
+          },
+          scrollMargin: 0,
+          scrollingDelay: 150,
+          indexAttribute: 'data-index',
+          initialMeasurementsCache: []
+        }, opts);
+      };
+      this.notify = function () {
+        _this.options.onChange == null ? void 0 : _this.options.onChange(_this);
+      };
+      this.cleanup = function () {
+        _this.unsubs.filter(Boolean).forEach(function (d) {
+          return d();
+        });
+        _this.unsubs = [];
+        _this.scrollElement = null;
+      };
+      this._didMount = function () {
+        var ro = _this.getResizeObserver();
+        Object.values(_this.measureElementCache).forEach(function (node) {
+          return ro == null ? void 0 : ro.observe(node);
+        });
+        return function () {
+          ro == null ? void 0 : ro.disconnect();
+          _this.cleanup();
+        };
+      };
+      this._willUpdate = function () {
+        _this.pendingScrollToIndexCallback == null ? void 0 : _this.pendingScrollToIndexCallback();
+        var scrollElement = _this.options.getScrollElement();
+        if (_this.scrollElement !== scrollElement) {
+          _this.cleanup();
+          _this.scrollElement = scrollElement;
+          _this._scrollToOffset(_this.scrollOffset, {
+            adjustments: undefined,
+            behavior: undefined
+          });
+          _this.unsubs.push(_this.options.observeElementRect(_this, function (rect) {
+            _this.scrollRect = rect;
+            _this.calculateRange();
+          }));
+          _this.unsubs.push(_this.options.observeElementOffset(_this, function (offset) {
+            _this.scrollAdjustments = 0;
+            if (_this.scrollOffset === offset) {
+              return;
+            }
+            if (_this.isScrollingTimeoutId !== null) {
+              clearTimeout(_this.isScrollingTimeoutId);
+              _this.isScrollingTimeoutId = null;
+            }
+            var onIsScrollingChange = function onIsScrollingChange(isScrolling) {
+              if (_this.isScrolling !== isScrolling) {
+                _this.isScrolling = isScrolling;
+                _this.notify();
+              }
+            };
+            _this.scrollDirection = _this.scrollOffset < offset ? 'forward' : 'backward';
+            _this.scrollOffset = offset;
+            _this.calculateRange();
+            onIsScrollingChange(true);
+            _this.isScrollingTimeoutId = setTimeout(function () {
+              _this.isScrollingTimeoutId = null;
+              _this.scrollDirection = null;
+              onIsScrollingChange(false);
+            }, _this.options.scrollingDelay);
+          }));
+        } else if (!_this.isScrolling) {
+          _this.calculateRange();
+        }
+      };
+      this.getSize = function () {
+        return _this.scrollRect[_this.options.horizontal ? 'width' : 'height'];
+      };
+      this.getMeasurements = memo(function () {
+        return [_this.options.count, _this.options.paddingStart, _this.options.scrollMargin, _this.options.getItemKey, _this.itemSizeCache];
+      }, function (count, paddingStart, scrollMargin, getItemKey, itemSizeCache) {
+        var min = _this.pendingMeasuredCacheIndexes.length > 0 ? Math.min.apply(Math, _this.pendingMeasuredCacheIndexes) : 0;
+        _this.pendingMeasuredCacheIndexes = [];
+        var measurements = _this.measurementsCache.slice(0, min);
+        for (var _i2 = min; _i2 < count; _i2++) {
+          var key = getItemKey(_i2);
+          var measuredSize = itemSizeCache[key];
+          var start = measurements[_i2 - 1] ? measurements[_i2 - 1].end : paddingStart + scrollMargin;
+          var size = typeof measuredSize === 'number' ? measuredSize : _this.options.estimateSize(_i2);
+          var end = start + size;
+          measurements[_i2] = {
+            index: _i2,
+            start: start,
+            size: size,
+            end: end,
+            key: key
+          };
+        }
+        _this.measurementsCache = measurements;
+        return measurements;
+      }, {
+        key: 'getMeasurements',
+        debug: function debug() {
+          return _this.options.debug;
+        }
+      });
+      this.calculateRange = memo(function () {
+        return [_this.getMeasurements(), _this.getSize(), _this.scrollOffset];
+      }, function (measurements, outerSize, scrollOffset) {
+        var range = calculateRange({
+          measurements: measurements,
+          outerSize: outerSize,
+          scrollOffset: scrollOffset
+        });
+        if (range.startIndex !== _this.range.startIndex || range.endIndex !== _this.range.endIndex) {
+          _this.range = range;
+          _this.notify();
+        }
+        return _this.range;
+      }, {
+        key: 'calculateRange',
+        debug: function debug() {
+          return _this.options.debug;
+        }
+      });
+      this.getIndexes = memo(function () {
+        return [_this.options.rangeExtractor, _this.range, _this.options.overscan, _this.options.count];
+      }, function (rangeExtractor, range, overscan, count) {
+        return rangeExtractor(_extends({}, range, {
+          overscan: overscan,
+          count: count
+        }));
+      }, {
+        key: 'getIndexes',
+        debug: function debug() {
+          return _this.options.debug;
+        }
+      });
+      this.indexFromElement = function (node) {
+        var attributeName = _this.options.indexAttribute;
+        var indexStr = node.getAttribute(attributeName);
+        if (!indexStr) {
+          console.warn("Missing attribute name '" + attributeName + "={index}' on measured element.");
+          return -1;
+        }
+        return parseInt(indexStr, 10);
+      };
+      this._measureElement = function (node, _sync) {
+        var _this$itemSizeCache$i;
+        var index = _this.indexFromElement(node);
+        var item = _this.measurementsCache[index];
+        if (!item) {
+          return;
+        }
+        var prevNode = _this.measureElementCache[item.key];
+        var ro = _this.getResizeObserver();
+        if (!node.isConnected) {
+          if (prevNode) {
+            ro == null ? void 0 : ro.unobserve(prevNode);
+            delete _this.measureElementCache[item.key];
+          }
+          return;
+        }
+        if (!prevNode || prevNode !== node) {
+          if (prevNode) {
+            ro == null ? void 0 : ro.unobserve(prevNode);
+          }
+          _this.measureElementCache[item.key] = node;
+          ro == null ? void 0 : ro.observe(node);
+        }
+        var measuredItemSize = _this.options.measureElement(node, _this);
+        var itemSize = (_this$itemSizeCache$i = _this.itemSizeCache[item.key]) != null ? _this$itemSizeCache$i : item.size;
+        var delta = measuredItemSize - itemSize;
+        if (delta !== 0) {
+          var _extends2;
+          if (item.start < _this.scrollOffset && _this.isScrolling && _this.scrollDirection === 'backward') {
+            if (_this.options.debug) {
+              console.info('correction', delta);
+            }
+            _this._scrollToOffset(_this.scrollOffset, {
+              adjustments: _this.scrollAdjustments += delta,
+              behavior: undefined
+            });
+          }
+          _this.pendingMeasuredCacheIndexes.push(index);
+          _this.itemSizeCache = _extends({}, _this.itemSizeCache, (_extends2 = {}, _extends2[item.key] = measuredItemSize, _extends2));
+          _this.notify();
+        }
+      };
+      this.measureElement = function (node) {
+        if (!node) {
+          return;
+        }
+        _this._measureElement(node, true);
+      };
+      this.getVirtualItems = memo(function () {
+        return [_this.getIndexes(), _this.getMeasurements()];
+      }, function (indexes, measurements) {
+        var virtualItems = [];
+        for (var k = 0, len = indexes.length; k < len; k++) {
+          var _i3 = indexes[k];
+          var measurement = measurements[_i3];
+          virtualItems.push(measurement);
+        }
+        return virtualItems;
+      }, {
+        key: 'getIndexes',
+        debug: function debug() {
+          return _this.options.debug;
+        }
+      });
+      this.getOffsetForAlignment = function (toOffset, align) {
+        var offset = _this.scrollOffset;
+        var size = _this.getSize();
+        if (align === 'auto') {
+          if (toOffset <= offset) {
+            align = 'start';
+          } else if (toOffset >= offset + size) {
+            align = 'end';
+          } else {
+            align = 'start';
+          }
+        }
+        if (align === 'start') {
+          return toOffset;
+        } else if (align === 'end') {
+          return toOffset - size;
+        } else if (align === 'center') {
+          return toOffset - size / 2;
+        }
+        return toOffset;
+      };
+      this.scrollToOffset = function (toOffset, _temp) {
+        var _ref4 = _temp === void 0 ? {} : _temp,
+          _ref4$align = _ref4.align,
+          align = _ref4$align === void 0 ? 'start' : _ref4$align,
+          behavior = _ref4.behavior;
+        var options = {
+          adjustments: undefined,
+          behavior: behavior,
+          sync: false
+        };
+        _this._scrollToOffset(_this.getOffsetForAlignment(toOffset, align), options);
+      };
+      this.scrollToIndex = function (index, _temp2) {
+        var _ref5 = _temp2 === void 0 ? {} : _temp2,
+          _ref5$align = _ref5.align,
+          align = _ref5$align === void 0 ? 'auto' : _ref5$align,
+          behavior = _ref5.behavior;
+        _this.pendingScrollToIndexCallback = null;
+        var offset = _this.scrollOffset;
+        var size = _this.getSize();
+        var count = _this.options.count;
+        var measurements = _this.getMeasurements();
+        var measurement = measurements[Math.max(0, Math.min(index, count - 1))];
+        if (!measurement) {
+          throw new Error("VirtualItem not found for index = " + index);
+        }
+        if (align === 'auto') {
+          if (measurement.end >= offset + size - _this.options.scrollPaddingEnd) {
+            align = 'end';
+          } else if (measurement.start <= offset + _this.options.scrollPaddingStart) {
+            align = 'start';
+          } else {
+            return;
+          }
+        }
+        var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(measurement) {
+          var toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
+          return _this.getOffsetForAlignment(toOffset, align);
+        };
+        var toOffset = getOffsetForIndexAndAlignment(measurement);
+        if (Math.round(toOffset) === Math.round(offset)) {
+          return;
+        }
+        var options = {
+          adjustments: undefined,
+          behavior: behavior
+        };
+        _this._scrollToOffset(toOffset, options);
+        var isDynamic = Object.keys(_this.measureElementCache).length > 0;
+        if (isDynamic) {
+          _this.pendingScrollToIndexCallback = function () {
+            _this.scrollToIndex(index, {
+              align: align,
+              behavior: behavior
+            });
+          };
+        }
+      };
+      this.scrollBy = function (adjustments, options) {
+        _this._scrollToOffset(_this.scrollOffset, {
+          adjustments: adjustments,
+          behavior: options == null ? void 0 : options.behavior
+        });
+      };
+      this.getTotalSize = function () {
+        var _this$getMeasurements;
+        return (((_this$getMeasurements = _this.getMeasurements()[_this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || _this.options.paddingStart) - _this.options.scrollMargin + _this.options.paddingEnd;
+      };
+      this._scrollToOffset = function (offset, _ref6) {
+        var adjustments = _ref6.adjustments,
+          behavior = _ref6.behavior;
+        _this.options.scrollToFn(offset, {
+          behavior: behavior,
+          adjustments: adjustments
+        }, _this);
+      };
+      this.measure = function () {
+        _this.itemSizeCache = {};
+        _this.notify();
+      };
+      this.setOptions(_opts);
+      this.scrollRect = this.options.initialRect;
+      this.scrollOffset = this.options.initialOffset;
+      this.measurementsCache = this.options.initialMeasurementsCache;
+      this.measurementsCache.forEach(function (item) {
+        _this.itemSizeCache[item.key] = item.size;
+      });
+      this.calculateRange();
+    };
+    var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
+      while (low <= high) {
+        var middle = (low + high) / 2 | 0;
+        var currentValue = getCurrentValue(middle);
+        if (currentValue < value) {
+          low = middle + 1;
+        } else if (currentValue > value) {
+          high = middle - 1;
+        } else {
+          return middle;
+        }
+      }
+      if (low > 0) {
+        return low - 1;
+      } else {
+        return 0;
+      }
+    };
+    function calculateRange(_ref7) {
+      var measurements = _ref7.measurements,
+        outerSize = _ref7.outerSize,
+        scrollOffset = _ref7.scrollOffset;
+      var count = measurements.length - 1;
+      var getOffset = function getOffset(index) {
+        return measurements[index].start;
+      };
+      var startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
+      var endIndex = startIndex;
+      while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
+        endIndex++;
+      }
+      return {
+        startIndex: startIndex,
+        endIndex: endIndex
+      };
+    }
+
+    /**
+     * Helper class for the nimble-table for row virtualization.
+     *
+     * @internal
+     */
+    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 Virtualizer$1(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$1([
+        observable
+    ], Virtualizer.prototype, "visibleItems", void 0);
+    __decorate$1([
+        observable
+    ], Virtualizer.prototype, "allRowsHeight", void 0);
+    __decorate$1([
+        observable
+    ], Virtualizer.prototype, "headerContainerMarginRight", void 0);
+    __decorate$1([
+        observable
+    ], Virtualizer.prototype, "rowContainerYOffset", void 0);
+
     /**
      * A nimble-styled table.
      */
     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 => ({
@@ -25797,35 +26500,41 @@
                 autoResetAll: false
             };
             this.table = createTable(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
             });
         }
@@ -25838,6 +26547,7 @@
                 };
                 return rowState;
             });
+            this.virtualizer.dataChanged();
         }
         updateTableOptions(updatedOptions) {
             this.options = { ...this.options, ...updatedOptions };
@@ -25846,11 +26556,11 @@
         }
         // 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 = {
@@ -25866,15 +26576,15 @@
     __decorate$1([
         attr({ attribute: 'id-field-name' })
     ], Table.prototype, "idFieldName", void 0);
-    __decorate$1([
-        observable
-    ], Table.prototype, "data", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "tableData", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "columns", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "canRenderRows", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
         template: template$4,