Add column IDs to table

angular-workspace/projects/ni/nimble-angular/src/directives/table-column/text/nimble-table-column-text.directive.ts

@@ -10,6 +10,16 @@ export type { TableColumnText };
     selector: 'nimble-table-column-text'
 })
 export class NimbleTableColumnTextDirective {
+    public get columnId(): string | undefined {
+        return this.elementRef.nativeElement.columnId;
+    }
+
+    // Renaming because property should have camel casing, but attribute should not
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input('column-id') public set columnId(value: string | undefined) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'columnId', value);
+    }
+
     public get fieldName(): string | undefined {
         return this.elementRef.nativeElement.fieldName;
     }

angular-workspace/projects/ni/nimble-angular/src/directives/table-column/text/tests/nimble-table-column-text.directive.spec.ts

@@ -21,7 +21,7 @@ describe('NimbleTableColumnText', () => {
         @Component({
             template: `
                 <nimble-table>
-                    <nimble-table-column-text #column field-name="field1" placeholder="no value"></nimble-table-column-text>
+                    <nimble-table-column-text #column column-id="my-column" field-name="field1" placeholder="no value"></nimble-table-column-text>
                 </nimble-table>
             `
         })
@@ -50,17 +50,27 @@ describe('NimbleTableColumnText', () => {
             expect(nativeElement.fieldName).toBe('field1');
         });
 
-        it('cwill use template string values for placeholder', () => {
+        it('will use template string values for placeholder', () => {
             expect(directive.placeholder).toBe('no value');
             expect(nativeElement.placeholder).toBe('no value');
         });
+
+        it('will use template string values for columnId', () => {
+            expect(directive.columnId).toBe('my-column');
+            expect(nativeElement.columnId).toBe('my-column');
+        });
     });
 
     describe('with property bound values', () => {
         @Component({
             template: `
                 <nimble-table>
-                    <nimble-table-column-text #column [field-name]="field" [placeholder]="placeholder"></nimble-table-column-text>
+                    <nimble-table-column-text
+                        #column
+                        [column-id]="columnId"
+                        [field-name]="field"
+                        [placeholder]="placeholder"
+                    ></nimble-table-column-text>
                 </nimble-table>
             `
         })
@@ -69,6 +79,7 @@ describe('NimbleTableColumnText', () => {
             @ViewChild('column', { read: ElementRef }) public elementRef: ElementRef<TableColumnText>;
             public field = 'field1';
             public placeholder = 'no value';
+            public columnId = 'my-column';
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -107,13 +118,29 @@ describe('NimbleTableColumnText', () => {
             expect(directive.placeholder).toBe('foo');
             expect(nativeElement.placeholder).toBe('foo');
         });
+
+        it('can be configured with property binding for columnId', () => {
+            expect(directive.columnId).toBe('my-column');
+            expect(nativeElement.columnId).toBe('my-column');
+
+            fixture.componentInstance.columnId = 'new-column';
+            fixture.detectChanges();
+
+            expect(directive.columnId).toBe('new-column');
+            expect(nativeElement.columnId).toBe('new-column');
+        });
     });
 
     describe('with attribute bound values', () => {
         @Component({
             template: `
                 <nimble-table>
-                    <nimble-table-column-text #column [attr.field-name]="field" [attr.placeholder]="placeholder"></nimble-table-column-text>
+                    <nimble-table-column-text
+                        #column
+                        [attr.column-id]="columnId"
+                        [attr.field-name]="field"
+                        [attr.placeholder]="placeholder"
+                    ></nimble-table-column-text>
                 </nimble-table>
             `
         })
@@ -122,6 +149,7 @@ describe('NimbleTableColumnText', () => {
             @ViewChild('column', { read: ElementRef }) public elementRef: ElementRef<TableColumnText>;
             public field = 'field1';
             public placeholder = 'no value';
+            public columnId = 'my-column';
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -139,7 +167,7 @@ describe('NimbleTableColumnText', () => {
             nativeElement = fixture.componentInstance.elementRef.nativeElement;
         });
 
-        it('can be configured with property binding for fieldName', () => {
+        it('can be configured with attribute binding for fieldName', () => {
             expect(directive.fieldName).toBe('field1');
             expect(nativeElement.fieldName).toBe('field1');
 
@@ -150,7 +178,7 @@ describe('NimbleTableColumnText', () => {
             expect(nativeElement.fieldName).toBe('field2');
         });
 
-        it('can be configured with property binding for placeholder', () => {
+        it('can be configured with attribute binding for placeholder', () => {
             expect(directive.placeholder).toBe('no value');
             expect(nativeElement.placeholder).toBe('no value');
 
@@ -160,5 +188,16 @@ describe('NimbleTableColumnText', () => {
             expect(directive.placeholder).toBe('foo');
             expect(nativeElement.placeholder).toBe('foo');
         });
+
+        it('can be configured with attribute binding for columnId', () => {
+            expect(directive.columnId).toBe('my-column');
+            expect(nativeElement.columnId).toBe('my-column');
+
+            fixture.componentInstance.columnId = 'new-column';
+            fixture.detectChanges();
+
+            expect(directive.columnId).toBe('new-column');
+            expect(nativeElement.columnId).toBe('new-column');
+        });
     });
 });

angular-workspace/projects/ni/nimble-angular/src/directives/table/tests/nimble-table.directive.spec.ts

@@ -149,7 +149,9 @@ describe('Nimble table', () => {
             const expectedValidity: TableValidity = {
                 duplicateRecordId: false,
                 invalidRecordId: false,
-                missingRecordId: true
+                missingRecordId: true,
+                duplicateColumnId: false,
+                missingColumnId: false
             };
             expect(directive.validity).toEqual(expectedValidity);
             expect(nativeElement.validity).toEqual(expectedValidity);

change/@ni-nimble-angular-a552c61a-2254-4ebc-a7cd-91705f4ac48d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add column IDs to table",
+  "packageName": "@ni/nimble-angular",
+  "email": "20542556+mollykreis@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-blazor-aa544dba-a6aa-439a-a7d0-46c522cd4d7a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add column IDs to table",
+  "packageName": "@ni/nimble-blazor",
+  "email": "20542556+mollykreis@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-components-a5002c3f-0312-4437-b9eb-beb9b6e218db.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add column IDs to table",
+  "packageName": "@ni/nimble-components",
+  "email": "20542556+mollykreis@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnText.razor

@@ -1,6 +1,7 @@
 @namespace NimbleBlazor
+@inherits NimbleTableColumn
 
-<nimble-table-column-text field-name="@FieldName" placeholder="@Placeholder">
+<nimble-table-column-text column-id="@ColumnId" field-name="@FieldName" placeholder="@Placeholder">
     @ChildContent
 </nimble-table-column-text>
 

packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnText.razor.cs

@@ -3,7 +3,7 @@
 
 namespace NimbleBlazor;
 
-public partial class NimbleTableColumnText : ComponentBase
+public partial class NimbleTableColumnText : NimbleTableColumn
 {
     /// <summary>
     /// Gets or sets the field in the element representing a row of data in a <see cref="NimbleTable{TData}"/>to display

packages/nimble-blazor/NimbleBlazor/NimbleTableColumn.cs

@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Components;
+
+namespace NimbleBlazor;
+
+public abstract class NimbleTableColumn : ComponentBase
+{
+    /// <summary>
+    /// The ID of the column of a <see cref="NimbleTable{TData}"/>
+    /// </summary>
+    [Parameter]
+    public string? ColumnId { get; set; }
+}

packages/nimble-blazor/NimbleBlazor/TableValidity.cs

@@ -9,6 +9,10 @@ public interface ITableValidity
     public bool MissingRecordId { get; }
 
     public bool InvalidRecordId { get; }
+
+    public bool DuplicateColumnId { get; }
+
+    public bool MissingColumnId { get; }
 }
 
 internal class TableValidity : ITableValidity
@@ -21,4 +25,10 @@ internal class TableValidity : ITableValidity
 
     [JsonPropertyName("invalidRecordId")]
     public bool InvalidRecordId { get; set; }
+
+    [JsonPropertyName("duplicateColumnId")]
+    public bool DuplicateColumnId { get; set; }
+
+    [JsonPropertyName("missingColumnId")]
+    public bool MissingColumnId { get; set; }
 }

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

@@ -1,4 +1,4 @@
-import type { ElementStyles, ViewTemplate } from '@microsoft/fast-element';
+import { attr, ElementStyles, ViewTemplate } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { uniqueId } from '@microsoft/fast-web-utilities';
 import type {
@@ -14,6 +14,9 @@ export abstract class TableColumn<
     TCellRecord extends TableCellRecord = TableCellRecord,
     TColumnConfig = unknown
 > extends FoundationElement {
+    @attr({ attribute: 'column-id' })
+    public columnId?: string;
+
     /**
      * The template to use to render the cell content for the column
      */

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

@@ -1,4 +1,9 @@
-import { attr, observable } from '@microsoft/fast-element';
+import {
+    attr,
+    Observable,
+    observable,
+    Notifier
+} from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
 import {
     ColumnDef as TanStackColumnDef,
@@ -72,6 +77,7 @@ export class Table<
     private readonly table: TanStackTable<TData>;
     private options: TanStackTableOptionsResolved<TData>;
     private readonly tableValidator = new TableValidator();
+    private columnNotifiers: Notifier[] = [];
 
     public constructor() {
         super();
@@ -93,32 +99,87 @@ export class Table<
         this.setTableData(newData);
     }
 
-    public idFieldNameChanged(
-        _prev: string | undefined,
-        _next: string | undefined
-    ): void {
-        // Force TanStack to detect a data update because a row's ID is only
-        // generated when creating a new row model.
-        this.setTableData(this.table.options.data);
-    }
-
     public override connectedCallback(): void {
         super.connectedCallback();
         this.virtualizer.connectedCallback();
+        this.validateAndObserveColumns();
     }
 
     public override disconnectedCallback(): void {
+        super.disconnectedCallback();
         this.virtualizer.disconnectedCallback();
+        this.removeColumnObservers();
     }
 
     public checkValidity(): boolean {
         return this.tableValidator.isValid();
     }
 
+    /**
+     * @internal
+     *
+     * The event handler that is called when a notifier detects a change. Notifiers are added
+     * to each column, so `source` is expected to be an instance of `TableColumn`, and `args`
+     * is the string name of the property that changed on that column.
+     */
+    public handleChange(source: unknown, args: unknown): void {
+        if (source instanceof TableColumn) {
+            if (args === 'columnId') {
+                this.validateColumnIds();
+            }
+        }
+    }
+
     protected childItemsChanged(): void {
         void this.updateColumnsFromChildItems();
     }
 
+    protected idFieldNameChanged(
+        _prev: string | undefined,
+        _next: string | undefined
+    ): void {
+        // Force TanStack to detect a data update because a row's ID is only
+        // generated when creating a new row model.
+        this.setTableData(this.table.options.data);
+    }
+
+    protected columnsChanged(
+        _prev: TableColumn[] | undefined,
+        _next: TableColumn[]
+    ): void {
+        if (!this.$fastController.isConnected) {
+            return;
+        }
+
+        this.validateAndObserveColumns();
+    }
+
+    private removeColumnObservers(): void {
+        this.columnNotifiers.forEach(notifier => {
+            notifier.unsubscribe(this);
+        });
+        this.columnNotifiers = [];
+    }
+
+    private validateAndObserveColumns(): void {
+        this.removeColumnObservers();
+
+        for (const column of this.columns) {
+            const notifier = Observable.getNotifier(column);
+            notifier.subscribe(this);
+            this.columnNotifiers.push(notifier);
+        }
+
+        this.validateColumnIds();
+    }
+
+    private validateColumnIds(): void {
+        this.tableValidator.validateColumnIds(
+            this.columns.map(x => x.columnId)
+        );
+        this.canRenderRows = this.checkValidity();
+    }
+
     private async updateColumnsFromChildItems(): Promise<void> {
         const definedElements = this.childItems.map(async item => (item.matches(':not(:defined)')
             ? customElements.whenDefined(item.localName)