@ni/nimble-components 18.0.0 → 18.0.2

package/dist/all-components-bundle.js

@@ -25627,7 +25627,7 @@
             this.customCellView?.bind(this.cellState, defaultExecutionContext);
         }
         cellTemplateChanged() {
-            if (this.isConnected) {
+            if (this.$fastController.isConnected) {
                 this.customCellView = this.cellTemplate?.render(this.cellState, this.cellContentContainer);
             }
         }
@@ -25659,12 +25659,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 +25680,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 +25715,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,
@@ -25743,7 +25751,7 @@
                 </div>
             </div>
             <div class="table-viewport" role="rowgroup">
-            ${when(x => x.columns.length > 0, html `
+            ${when(x => x.columns.length > 0 && x.canRenderRows, html `
                 ${repeat(x => x.tableData, html `
                     <${DesignSystem.tagFor(TableRow)}
                         class="row"
@@ -25766,13 +25774,15 @@
     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 +25807,33 @@
                 autoResetAll: false
             };
             this.table = createTable(this.options);
-            this.tableInitialized = true;
         }
         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]);
-        }
-        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);
-            }
+            this.setTableData(this.table.options.data);
         }
         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
             });
         }
@@ -25846,11 +25854,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 +25874,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,