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"
+}

change/@ni-ok-components-f960a940-47e4-4b25-bf07-e86b30b81899.json

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

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

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
 import { type TableColumnMapping, tableColumnMappingTag } from '@ni/nimble-components/dist/esm/table-column/mapping';
 import { type BooleanValueOrAttribute, type NumberValueOrAttribute, toBooleanProperty, toNullableNumberProperty } from '@ni/nimble-angular/internal-utilities';
-import { NimbleTableColumnBaseDirective, TableColumnSortDirection } from '@ni/nimble-angular/table-column';
+import { NimbleTableColumnBaseDirective, TableColumnPinLocation, TableColumnSortDirection } from '@ni/nimble-angular/table-column';
 import { MappingKeyType } from '@ni/nimble-components/dist/esm/table-column/enum-base/types';
 import { TableColumnMappingWidthMode } from '@ni/nimble-components/dist/esm/table-column/mapping/types';
 
@@ -49,6 +49,14 @@ export class NimbleTableColumnMappingDirective extends NimbleTableColumnBaseDire
         this.renderer.setProperty(this.elementRef.nativeElement, 'minPixelWidth', toNullableNumberProperty(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 get groupIndex(): number | null | undefined {
         return this.elementRef.nativeElement.groupIndex;
     }

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,10 @@
 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 { TableColumnSortDirection } from '@ni/nimble-components/dist/esm/table/types';
+import { TableColumnPinLocation, 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.

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

@@ -23,6 +23,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/mapping/index.ts

@@ -14,6 +14,7 @@ import {
 } from '../base/types';
 import { mixinGroupableColumnAPI } from '../mixins/groupable-column';
 import { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';
+import { mixinPinnableColumnAPI } from '../mixins/pinnable-column';
 import { MappingSpinner } from '../../mapping/spinner';
 import { MappingIcon } from '../../mapping/icon';
 import { TableColumnMappingValidator } from './models/table-column-mapping-validator';
@@ -43,11 +44,13 @@ declare global {
  */
 export class TableColumnMapping extends mixinGroupableColumnAPI(
     mixinFractionalWidthColumnAPI(
-        mixinSortableColumnAPI(
-            TableColumnEnumBase<
-                TableColumnEnumColumnConfig,
-                TableColumnMappingValidator
-            >
+        mixinPinnableColumnAPI(
+            mixinSortableColumnAPI(
+                TableColumnEnumBase<
+                    TableColumnEnumColumnConfig,
+                    TableColumnMappingValidator
+                >
+            )
         )
     )
 ) {

packages/nimble-components/src/table-column/mixins/pinnable-column.ts

@@ -0,0 +1,39 @@
+import { attr } from '@ni/fast-element';
+import type { TableColumn } from '../base';
+import type { TableColumnPinLocation } from '../../table/types';
+
+// Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)
+type PinnableTableColumn = Pick<TableColumn, never>;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type PinnableTableColumnConstructor = abstract new (...args: any[]) => PinnableTableColumn;
+
+export type TableColumnWithPinLocation = TableColumn & {
+    pinLocation?: TableColumnPinLocation
+};
+
+export function getColumnPinLocation(
+    column: TableColumn
+): TableColumnPinLocation {
+    return (column as TableColumnWithPinLocation).pinLocation;
+}
+
+// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+export function mixinPinnableColumnAPI<
+    TBase extends PinnableTableColumnConstructor
+>(base: TBase) {
+    /**
+     * The Mixin that provides a concrete column with the API to allow pinning
+     * a fixed-width column within a table.
+     */
+    abstract class PinnableColumn extends base {
+        public pinLocation?: TableColumnPinLocation;
+    }
+
+    attr({ attribute: 'pin-location' })(
+        PinnableColumn.prototype,
+        'pinLocation'
+    );
+
+    return PinnableColumn;
+}