Pinning Fixed Width Columns

change/@ni-nimble-angular-3b488452-3822-410a-a684-15d5f131dd98.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add support for pinning table columns",
+  "packageName": "@ni/nimble-angular",
+  "email": "5265744+hellovolcano@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-blazor-ef211a30-d326-4325-9b2f-40bad3951887.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add support for pinning table columns",
+  "packageName": "@ni/nimble-blazor",
+  "email": "5265744+hellovolcano@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-components-817561ce-db7b-4dc2-866f-c794a24b0428.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add support for pinning table columns",
+  "packageName": "@ni/nimble-components",
+  "email": "5265744+hellovolcano@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@ni-ok-blazor-c1ed3831-a5b6-49ff-9320-7477a04f462f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add support for pinning the breakpoint column",
+  "packageName": "@ni/ok-blazor",
+  "email": "5265744+hellovolcano@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/angular-workspace/nimble-angular/table-column/mapping/tests/nimble-table-column-mapping.directive.spec.ts

@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NimbleTableModule } from '../../../table/nimble-table.module';
 import { NimbleTableColumnMappingModule } from '../nimble-table-column-mapping.module';
 import { NimbleTableColumnMappingDirective, type TableColumnMapping, TableColumnMappingWidthMode } from '../nimble-table-column-mapping.directive';
-import { TableColumnSortDirection } from '../../nimble-table-column-base.directive';
+import { TableColumnPinLocation, TableColumnSortDirection } from '../../nimble-table-column-base.directive';
 
 describe('NimbleTableColumnMapping', () => {
     describe('module', () => {
@@ -30,6 +30,7 @@ describe('NimbleTableColumnMapping', () => {
                         action-menu-slot="my-slot"
                         action-menu-label="my menu"
                         column-hidden="true"
+                        pin-location="left"
                         fractional-width="2"
                         min-pixel-width="40"
                         sort-direction="${TableColumnSortDirection.ascending}"
@@ -93,6 +94,11 @@ describe('NimbleTableColumnMapping', () => {
             expect(nativeElement.columnHidden).toBe(true);
         });
 
+        it('will use template string value for pin-location', () => {
+            expect(directive.pinLocation).toBe(TableColumnPinLocation.left);
+            expect(nativeElement.pinLocation).toBe(TableColumnPinLocation.left);
+        });
+
         it('will use template string values for sortDirection', () => {
             expect(directive.sortDirection).toBe(TableColumnSortDirection.ascending);
             expect(nativeElement.sortDirection).toBe(TableColumnSortDirection.ascending);
@@ -146,6 +152,7 @@ describe('NimbleTableColumnMapping', () => {
                         [actionMenuSlot]="actionMenuSlot"
                         [actionMenuLabel]="actionMenuLabel"
                         [column-hidden]="columnHidden"
+                        [pin-location]="pinLocation"
                         [fractional-width]="fractionalWidth"
                         [min-pixel-width]="minPixelWidth"
                         [sort-direction]="sortDirection"
@@ -170,6 +177,7 @@ describe('NimbleTableColumnMapping', () => {
             public minPixelWidth: number | null = 40;
             public columnId = 'my-column';
             public columnHidden = true;
+            public pinLocation: TableColumnPinLocation = TableColumnPinLocation.none;
             public sortDirection: TableColumnSortDirection = TableColumnSortDirection.ascending;
             public sortIndex: number | null = 0;
             public sortingDisabled = false;
@@ -259,6 +267,17 @@ describe('NimbleTableColumnMapping', () => {
             expect(nativeElement.columnHidden).toBe(false);
         });
 
+        it('can be configured with property binding for pin-location', () => {
+            expect(directive.pinLocation).toBeUndefined();
+            expect(nativeElement.pinLocation).toBeUndefined();
+
+            fixture.componentInstance.pinLocation = TableColumnPinLocation.left;
+            fixture.detectChanges();
+
+            expect(directive.pinLocation).toBe(TableColumnPinLocation.left);
+            expect(nativeElement.pinLocation).toBe(TableColumnPinLocation.left);
+        });
+
         it('can be configured with property binding for sortDirection', () => {
             expect(directive.sortDirection).toBe(TableColumnSortDirection.ascending);
             expect(nativeElement.sortDirection).toBe(TableColumnSortDirection.ascending);
@@ -404,6 +423,7 @@ describe('NimbleTableColumnMapping', () => {
                         [attr.action-menu-slot]="actionMenuSlot"
                         [attr.action-menu-label]="actionMenuLabel"
                         [attr.column-hidden]="columnHidden"
+                        [attr.pin-location]="pinLocation"
                         [attr.fractional-width]="fractionalWidth"
                         [attr.min-pixel-width]="minPixelWidth"
                         [attr.sort-direction]="sortDirection"
@@ -428,6 +448,7 @@ describe('NimbleTableColumnMapping', () => {
             public minPixelWidth: number | null = 40;
             public columnId = 'my-column';
             public columnHidden = true;
+            public pinLocation: TableColumnPinLocation = TableColumnPinLocation.none;
             public sortDirection: TableColumnSortDirection = TableColumnSortDirection.ascending;
             public sortIndex: number | null = 0;
             public sortingDisabled = false;
@@ -517,6 +538,17 @@ describe('NimbleTableColumnMapping', () => {
             expect(nativeElement.columnHidden).toBe(false);
         });
 
+        it('can be configured with attribute binding for pin-location', () => {
+            expect(directive.pinLocation).toBeUndefined();
+            expect(nativeElement.pinLocation).toBeUndefined();
+
+            fixture.componentInstance.pinLocation = TableColumnPinLocation.left;
+            fixture.detectChanges();
+
+            expect(directive.pinLocation).toBe(TableColumnPinLocation.left);
+            expect(nativeElement.pinLocation).toBe(TableColumnPinLocation.left);
+        });
+
         it('can be configured with attribute binding for sortDirection', () => {
             expect(directive.sortDirection).toBe(TableColumnSortDirection.ascending);
             expect(nativeElement.sortDirection).toBe(TableColumnSortDirection.ascending);

packages/angular-workspace/nimble-angular/table-column/nimble-table-column-base.directive.ts

@@ -1,10 +1,11 @@
 import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
 import type { TableColumn } from '@ni/nimble-components/dist/esm/table-column/base';
 import type { DelegatedEventEventDetails, TableColumnValidity } from '@ni/nimble-components/dist/esm/table-column/base/types';
+import { TableColumnPinLocation } from '@ni/nimble-components/dist/esm/table-column/base';
 import { TableColumnSortDirection } from '@ni/nimble-components/dist/esm/table/types';
 import { type BooleanValueOrAttribute, toBooleanProperty } from '@ni/nimble-angular/internal-utilities';
 
-export { TableColumnSortDirection, type DelegatedEventEventDetails, type TableColumnValidity };
+export { TableColumnPinLocation, TableColumnSortDirection, type DelegatedEventEventDetails, type TableColumnValidity };
 
 /**
  * Base class for table column directives.
@@ -43,6 +44,14 @@ export class NimbleTableColumnBaseDirective<T extends TableColumn> {
         this.renderer.setProperty(this.elementRef.nativeElement, 'columnHidden', toBooleanProperty(value));
     }
 
+    public get pinLocation(): TableColumnPinLocation {
+        return this.elementRef.nativeElement.pinLocation;
+    }
+
+    @Input('pin-location') public set pinLocation(value: TableColumnPinLocation) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'pinLocation', value);
+    }
+
     public constructor(protected readonly renderer: Renderer2, protected readonly elementRef: ElementRef<T>) {}
 
     public checkValidity(): boolean {

packages/angular-workspace/nimble-angular/table/tests/nimble-table.directive.spec.ts

@@ -161,7 +161,8 @@ describe('Nimble table', () => {
                 duplicateGroupIndex: false,
                 idFieldNameNotConfigured: false,
                 invalidColumnConfiguration: false,
-                invalidParentIdConfiguration: false
+                invalidParentIdConfiguration: false,
+                invalidPinnedColumnConfiguration: false
             };
             expect(directive.validity).toEqual(expectedValidity);
             expect(nativeElement.validity).toEqual(expectedValidity);

packages/blazor-workspace/Examples/Demo.Shared/Pages/Sections/Ts/TsBreakpointTableSection.razor

@@ -8,7 +8,8 @@
                 FieldName="BreakpointState"
                 MenuSlot="breakpoint-menu"
                 BreakpointStateChangeRequested="OnBreakpointStateChangeRequested"
-                BreakpointToggle="OnBreakpointToggle">
+                BreakpointToggle="OnBreakpointToggle"
+                PinLocation="@OkBlazor.TableColumnPinLocation.Left">
             </OkTsTableColumnBreakpoint>
             <NimbleTableColumnNumberText FieldName="LineNumber">Line</NimbleTableColumnNumberText>
 

packages/blazor-workspace/NimbleBlazor/Source/Table/TableColumnPinLocation.cs

@@ -0,0 +1,14 @@
+namespace NimbleBlazor;
+
+public enum TableColumnPinLocation
+{
+    None,
+    Left
+}
+
+internal static class TableColumnPinLocationExtensions
+{
+    private static readonly Dictionary<TableColumnPinLocation, string> _enumValues = AttributeHelpers.GetEnumNamesAsKebabCaseValues<TableColumnPinLocation>();
+
+    public static string? ToAttributeValue(this TableColumnPinLocation? value) => (value == null || value == TableColumnPinLocation.None) ? null : _enumValues[value.Value];
+}

packages/blazor-workspace/NimbleBlazor/Source/TableColumn/Mapping/NimbleTableColumnMapping.razor

@@ -11,6 +11,7 @@
     column-hidden="@ColumnHidden"
     fractional-width="@FractionalWidthAsString"
     min-pixel-width="@MinPixelWidthAsString"
+    pin-location="@PinLocation.ToAttributeValue()"
     sort-direction="@SortDirection.ToAttributeValue()"
     sort-index="@SortIndex"
     sorting-disabled="@SortingDisabled"

packages/blazor-workspace/NimbleBlazor/Source/TableColumn/Mapping/NimbleTableColumnMapping.razor.cs

@@ -17,6 +17,12 @@ public partial class NimbleTableColumnMapping<TKey> : NimbleTableColumnEnumBase<
     [Parameter]
     public double? MinPixelWidth { get; set; }
 
+    /// <summary>
+    /// The pin location for the column.
+    /// </summary>
+    [Parameter]
+    public TableColumnPinLocation? PinLocation { get; set; }
+
     /// <summary>
     /// Sets the width mode on the column.
     /// </summary>

packages/blazor-workspace/OkBlazor/Source/Ts/TableColumnBreakpoint/OkTsTableColumnBreakpoint.razor

@@ -5,6 +5,7 @@
     field-name="@FieldName"
     column-hidden="@ColumnHidden"
     menu-slot="@MenuSlot"
+    pin-location="@PinLocation.ToAttributeValue()"
     @onokbreakpointcolumntoggle="BreakpointToggle"
     @onokbreakpointcolumnstatechangerequested="BreakpointStateChangeRequested"
     @attributes="AdditionalAttributes">

packages/blazor-workspace/OkBlazor/Source/Ts/TableColumnBreakpoint/OkTsTableColumnBreakpoint.razor.cs

@@ -24,6 +24,12 @@ public partial class OkTsTableColumnBreakpoint : ComponentBase
     [Parameter]
     public string? MenuSlot { get; set; }
 
+    /// <summary>
+    /// Gets or sets the pin location for the column.
+    /// </summary>
+    [Parameter]
+    public TableColumnPinLocation? PinLocation { get; set; }
+
     /// <summary>
     /// Whether or not the column should be hidden.
     /// </summary>

packages/blazor-workspace/OkBlazor/Source/Ts/TableColumnBreakpoint/TableColumnPinLocation.cs

@@ -0,0 +1,14 @@
+namespace OkBlazor;
+
+public enum TableColumnPinLocation
+{
+    None,
+    Left
+}
+
+internal static class TableColumnPinLocationExtensions
+{
+    private static readonly Dictionary<TableColumnPinLocation, string> _enumValues = AttributeHelpers.GetEnumNamesAsKebabCaseValues<TableColumnPinLocation>();
+
+    public static string? ToAttributeValue(this TableColumnPinLocation? value) => (value == null || value == TableColumnPinLocation.None) ? null : _enumValues[value.Value];
+}

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

@@ -7,6 +7,9 @@ import {
 import type { TableColumnValidity } from './types';
 import type { ColumnValidator } from './models/column-validator';
 import { slotTextContent } from '../../utilities/models/slot-text-content';
+import { TableColumnPinLocation } from '../../table/types';
+
+export { TableColumnPinLocation };
 
 /**
  * The base class for table columns
@@ -37,6 +40,9 @@ export abstract class TableColumn<
     @attr({ attribute: 'column-hidden', mode: 'boolean' })
     public columnHidden = false;
 
+    @attr({ attribute: 'pin-location' })
+    public pinLocation: TableColumnPinLocation;
+
     /** @internal */
     @observable
     public hasOverflow = false;

packages/nimble-components/src/table-column/base/tests/table-column.spec.ts

@@ -55,6 +55,13 @@ describe('TableColumn', () => {
         expect(element.columnInternals.currentPixelWidth).toBe(200);
     });
 
+    it('has expected defaults for pin-location', async () => {
+        await connect();
+
+        expect(element.pinLocation).toBeUndefined();
+        expect(element.hasAttribute('pin-location')).toBeFalse();
+    });
+
     describe('with a custom constructor', () => {
         // Seems subject to change how errors are handled during custom
         // element construction: https://github.com/WICG/webcomponents/issues/635

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

@@ -27,6 +27,9 @@ export class TableGroupRow extends FoundationElement {
     @observable
     public nestingLevel = 0;
 
+    @observable
+    public pinnedColumnOffset = 0;
+
     /**
      * Row index in the flattened set of all regular and group header rows.
      * Represents the index in table.tableData (TableRowState[]).