Table row selection angular

angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html

@@ -185,7 +185,7 @@
         </div>
         <div class="sub-container">
             <div class="container-label">Table</div>
-            <nimble-table [data$]="tableData$">
+            <nimble-table [data$]="tableData$" id-field-name="id" selection-mode="multiple">
                 <nimble-table-column-text
                     field-name="stringValue1"
                     action-menu-slot="action-menu"

angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.ts

@@ -9,6 +9,7 @@ interface ComboboxItem {
 }
 
 interface SimpleTableRecord extends TableRecord {
+    id: string;
     stringValue1: string;
     stringValue2: string;
 }
@@ -38,14 +39,7 @@ export class CustomAppComponent {
     public activeAnchorTabId = 'a-tab-2';
 
     public readonly tableData$: Observable<SimpleTableRecord[]>;
-    private readonly tableDataSubject = new BehaviorSubject<SimpleTableRecord[]>([
-        { stringValue1: 'hello world', stringValue2: 'more text' },
-        { stringValue1: 'foo', stringValue2: 'bar' },
-        { stringValue1: 'candy', stringValue2: 'bar' },
-        { stringValue1: 'dive', stringValue2: 'bar' },
-        { stringValue1: 're', stringValue2: 'bar' },
-        { stringValue1: 'last row', stringValue2: 'yay!' }
-    ]);
+    private readonly tableDataSubject = new BehaviorSubject<SimpleTableRecord[]>([]);
 
     @ViewChild('dialog', { read: NimbleDialogDirective }) private readonly dialog: NimbleDialogDirective<string>;
     @ViewChild('drawer', { read: NimbleDrawerDirective }) private readonly drawer: NimbleDrawerDirective<string>;
@@ -92,6 +86,7 @@ export class CustomAppComponent {
     public onAddTableRow(): void {
         const tableData = this.tableDataSubject.value;
         tableData.push({
+            id: tableData.length.toString(),
             stringValue1: `new string ${tableData.length}`,
             stringValue2: `bar ${tableData.length}`
         });

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

@@ -1,11 +1,12 @@
 import { Directive, ElementRef, Input, OnDestroy, Renderer2 } from '@angular/core';
 import type { Table } from '@ni/nimble-components/dist/esm/table';
-import type { TableRecord, TableFieldName, TableFieldValue, TableValidity, TableActionMenuToggleEventDetail } from '@ni/nimble-components/dist/esm/table/types';
+import type { TableRecord, TableFieldName, TableFieldValue, TableValidity, TableActionMenuToggleEventDetail, TableRowSelectionEventDetail } from '@ni/nimble-components/dist/esm/table/types';
+import { TableRowSelectionMode } from '@ni/nimble-components/dist/esm/table/types';
 import type { Observable, Subscription } from 'rxjs';
 
 export type { Table };
-export type { TableActionMenuToggleEventDetail };
-export { TableRecord, TableFieldName, TableFieldValue, TableValidity };
+export type { TableActionMenuToggleEventDetail, TableRowSelectionEventDetail };
+export { TableRecord, TableFieldName, TableFieldValue, TableValidity, TableRowSelectionMode };
 
 /**
  * Directive to provide Angular integration for the table element.
@@ -41,6 +42,16 @@ export class NimbleTableDirective<TData extends TableRecord = TableRecord> imple
         this.renderer.setProperty(this.elementRef.nativeElement, 'idFieldName', value);
     }
 
+    public get selectionMode(): TableRowSelectionMode {
+        return this.elementRef.nativeElement.selectionMode;
+    }
+
+    // Renaming because property should have camel casing, but attribute should not
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input('selection-mode') public set selectionMode(value: TableRowSelectionMode) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'selectionMode', value);
+    }
+
     public get validity(): TableValidity {
         return this.elementRef.nativeElement.validity;
     }
@@ -61,4 +72,12 @@ export class NimbleTableDirective<TData extends TableRecord = TableRecord> imple
     public async setData(data: readonly TData[]): Promise<void> {
         return this.elementRef.nativeElement.setData(data);
     }
+
+    public async getSelectedRecordIds(): Promise<string[]> {
+        return this.elementRef.nativeElement.getSelectedRecordIds();
+    }
+
+    public async setSelectedRecordIds(recordIds: string[]): Promise<void> {
+        return this.elementRef.nativeElement.setSelectedRecordIds(recordIds);
+    }
 }

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

@@ -2,7 +2,7 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { processUpdates, Table, TableRecord, TableValidity } from '@ni/nimble-angular';
 import { Observable, Subject } from 'rxjs';
-import { NimbleTableDirective } from '../nimble-table.directive';
+import { NimbleTableDirective, TableRowSelectionMode } from '../nimble-table.directive';
 import { NimbleTableModule } from '../nimble-table.module';
 
 describe('Nimble table', () => {
@@ -197,6 +197,11 @@ describe('Nimble table', () => {
             expect(directive.idFieldName).toEqual(undefined);
             expect(nativeElement.idFieldName).toEqual(undefined);
         });
+
+        it('has expected defaults for selectionMode', () => {
+            expect(directive.selectionMode).toEqual(TableRowSelectionMode.none);
+            expect(nativeElement.selectionMode).toEqual(TableRowSelectionMode.none);
+        });
     });
 
     describe('with property bound values', () => {
@@ -207,7 +212,12 @@ describe('Nimble table', () => {
 
         @Component({
             template: `
-                <nimble-table #table [data$]="data$" [idFieldName]="idFieldName"></nimble-table>
+                <nimble-table #table
+                    [data$]="data$"
+                    [idFieldName]="idFieldName"
+                    [selectionMode]="selectionMode"
+                >
+                </nimble-table>
             `
         })
         class TestHostComponent {
@@ -216,6 +226,7 @@ describe('Nimble table', () => {
 
             public data$ = new Observable<SimpleRecord[]>();
             public idFieldName = 'field1';
+            public selectionMode: TableRowSelectionMode = TableRowSelectionMode.multiple;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -252,6 +263,17 @@ describe('Nimble table', () => {
             expect(directive.idFieldName).toEqual('field2');
             expect(nativeElement.idFieldName).toEqual('field2');
         });
+
+        it('can be configured with property binding for selectionMode', () => {
+            expect(directive.selectionMode).toEqual(fixture.componentInstance.selectionMode);
+            expect(nativeElement.selectionMode).toEqual(fixture.componentInstance.selectionMode);
+
+            fixture.componentInstance.selectionMode = TableRowSelectionMode.single;
+            fixture.detectChanges();
+
+            expect(directive.selectionMode).toEqual(TableRowSelectionMode.single);
+            expect(nativeElement.selectionMode).toEqual(TableRowSelectionMode.single);
+        });
     });
 
     describe('with attribute bound values', () => {
@@ -263,7 +285,9 @@ describe('Nimble table', () => {
         @Component({
             template: `
                 <nimble-table #table
-                    [attr.id-field-name]="idFieldName">
+                    [attr.id-field-name]="idFieldName"
+                    [attr.selection-mode]="selectionMode"
+                >
                 </nimble-table>
             `
         })
@@ -276,6 +300,7 @@ describe('Nimble table', () => {
             }] as const;
 
             public idFieldName = 'field1';
+            public selectionMode: TableRowSelectionMode = TableRowSelectionMode.multiple;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -303,5 +328,16 @@ describe('Nimble table', () => {
             expect(directive.idFieldName).toEqual('field2');
             expect(nativeElement.idFieldName).toEqual('field2');
         });
+
+        it('can be configured with attribute binding for selectionMode', () => {
+            expect(directive.selectionMode).toEqual(fixture.componentInstance.selectionMode);
+            expect(nativeElement.selectionMode).toEqual(fixture.componentInstance.selectionMode);
+
+            fixture.componentInstance.selectionMode = TableRowSelectionMode.single;
+            fixture.detectChanges();
+
+            expect(directive.selectionMode).toEqual(TableRowSelectionMode.single);
+            expect(nativeElement.selectionMode).toEqual(TableRowSelectionMode.single);
+        });
     });
 });

change/@ni-nimble-angular-8813fe02-2dd9-40db-ac5d-b7470f7345b5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Angular support for row selection in the table",
+  "packageName": "@ni/nimble-angular",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}