feat(components/ag-grid): auto-populate column configuration for data manager

libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-data-manager-adapter.directive.spec.ts

@@ -779,3 +779,94 @@ it('should refresh the grid when a view is reactivated', async () => {
 
   expect(agGrid!.api.refreshCells).toHaveBeenCalled();
 });
+
+describe('Read columnOptions from grid API', () => {
+  it("when column picker enabled, should get columnOptions when they're not provided in viewConfig", async () => {
+    TestBed.configureTestingModule({
+      imports: [SkyAgGridFixtureModule],
+      providers: [SkyDataManagerService, provideSkyMediaQueryTesting()],
+    });
+
+    const fixture = TestBed.createComponent(
+      SkyAgGridDataManagerFixtureComponent,
+    );
+    const dataManagerService = TestBed.inject(SkyDataManagerService);
+
+    // Verify viewConfig initially has no columnOptions
+    const viewConfig = fixture.componentInstance.viewConfig;
+    expect(viewConfig.columnOptions).toBeUndefined();
+    viewConfig.columnPickerEnabled = true;
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    // After grid ready, columnOptions should be populated from grid API
+    const updatedViewConfig = dataManagerService.getViewById(viewConfig.id);
+    expect(updatedViewConfig).toBeDefined();
+    expect(updatedViewConfig!.columnOptions).toBeDefined();
+    expect(updatedViewConfig!.columnOptions!.length).toBeGreaterThan(0);
+
+    // Verify the columnOptions were read from the grid API
+    // The method #readColumnOptionsFromGrid marks the following as alwaysDisplayed:
+    // - Pinned columns
+    // - Columns with lockVisible set
+    // - Columns without a headerName
+    // It still includes all columns from the grid in the returned columnOptions
+    const columnOptions = updatedViewConfig!.columnOptions!;
+
+    // Verify we have the expected columns (name, target, noHeader at minimum)
+    expect(columnOptions.length).toBeGreaterThan(0);
+
+    // Check that each column option has the required properties
+    columnOptions.forEach((option) => {
+      expect(option.id).toBeDefined();
+      expect(option.label).toBeDefined();
+      // alwaysDisplayed can be undefined when lockVisible is not set on the column
+      expect(
+        option.alwaysDisplayed === undefined ||
+          typeof option.alwaysDisplayed === 'boolean',
+      ).toBe(true);
+    });
+
+    // Verify specific columns that should be present
+    const nameColumn = columnOptions.find((opt) => opt.id === 'name');
+    expect(nameColumn).toBeDefined();
+    expect(nameColumn!.label).toBe('First Name');
+    expect(nameColumn!.alwaysDisplayed).toBeTrue();
+
+    const targetColumn = columnOptions.find((opt) => opt.id === 'target');
+    expect(targetColumn).toBeDefined();
+    expect(targetColumn!.label).toBe('Goal');
+
+    // The noHeader column has no headerName, so label becomes an empty string
+    const noHeaderColumn = columnOptions.find((opt) => opt.id === 'noHeader');
+    expect(noHeaderColumn).toBeDefined();
+    expect(noHeaderColumn!.label).toBe('');
+    expect(noHeaderColumn!.alwaysDisplayed).toBeTrue();
+  });
+
+  it('when column picker not enabled, should not get columnOptions', async () => {
+    TestBed.configureTestingModule({
+      imports: [SkyAgGridFixtureModule],
+      providers: [SkyDataManagerService, provideSkyMediaQueryTesting()],
+    });
+
+    const fixture = TestBed.createComponent(
+      SkyAgGridDataManagerFixtureComponent,
+    );
+    const dataManagerService = TestBed.inject(SkyDataManagerService);
+
+    // Verify viewConfig initially has no columnOptions
+    const viewConfig = fixture.componentInstance.viewConfig;
+    expect(viewConfig.columnOptions).toBeUndefined();
+    expect(viewConfig.columnPickerEnabled).toBeUndefined();
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    // After grid ready, columnOptions should remain undefined when column picker is not enabled
+    const updatedViewConfig = dataManagerService.getViewById(viewConfig.id);
+    expect(updatedViewConfig).toBeDefined();
+    expect(updatedViewConfig!.columnOptions).toBeUndefined();
+  });
+});

libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-data-manager-adapter.directive.ts

@@ -14,6 +14,7 @@ import {
 import { toSignal } from '@angular/core/rxjs-interop';
 import { SkyBreakpoint, SkyMediaQueryService } from '@skyux/core';
 import {
+  SkyDataManagerColumnPickerOption,
   SkyDataManagerService,
   SkyDataManagerState,
   SkyDataViewColumnWidths,
@@ -29,7 +30,15 @@ import {
   IColumnLimit,
   RowSelectedEvent,
 } from 'ag-grid-community';
-import { Subject, filter, fromEvent, of, switchMap, takeUntil } from 'rxjs';
+import {
+  Subject,
+  filter,
+  fromEvent,
+  map,
+  of,
+  switchMap,
+  takeUntil,
+} from 'rxjs';
 
 import { SkyAgGridWrapperComponent } from './ag-grid-wrapper.component';
 
@@ -38,7 +47,7 @@ function toColumnWidthName(breakpoint: SkyBreakpoint): 'xs' | 'sm' {
 }
 
 /**
- * @internal
+ * Connects `SkyAgGridWrapperComponent` with a `SkyDataViewComponent` to control the grid using a `SkyDataManagerService` instance.
  */
 @Directive({ selector: '[skyAgGridDataManagerAdapter]' })
 export class SkyAgGridDataManagerAdapterDirective implements OnDestroy {
@@ -88,7 +97,7 @@ export class SkyAgGridDataManagerAdapterDirective implements OnDestroy {
   });
 
   readonly #breakpoint = toSignal(
-    inject(SkyMediaQueryService).breakpointChange,
+    inject(SkyMediaQueryService).breakpointChange.pipe(map(toColumnWidthName)),
   );
 
   constructor() {
@@ -206,10 +215,18 @@ export class SkyAgGridDataManagerAdapterDirective implements OnDestroy {
         .pipe(
           takeUntil(this.#ngUnsubscribe),
           switchMap(() => {
-            const viewConfig = this.#viewConfig();
+            let viewConfig = this.#viewConfig();
             if (viewConfig) {
-              viewConfig.onSelectAllClick = (): void => agGrid.api.selectAll();
-              viewConfig.onClearAllClick = (): void => agGrid.api.deselectAll();
+              viewConfig = {
+                ...viewConfig,
+                onSelectAllClick: (): void => agGrid.api.selectAll(),
+                onClearAllClick: (): void => agGrid.api.deselectAll(),
+              };
+              if (viewConfig.columnPickerEnabled && !viewConfig.columnOptions) {
+                viewConfig.columnOptions = this.#readColumnOptionsFromGrid(
+                  agGrid.api,
+                );
+              }
               this.#dataManagerSvc.updateViewConfig(viewConfig);
 
               this.#applyColumnWidths();
@@ -496,4 +513,20 @@ export class SkyAgGridDataManagerAdapterDirective implements OnDestroy {
     }
     return gridColumnLimits;
   }
+
+  #readColumnOptionsFromGrid(api: GridApi): SkyDataManagerColumnPickerOption[] {
+    // Technically `api.getColumns()` can return null but it's not testable.
+    /* istanbul ignore next */
+    const columns = api.getColumns() ?? [];
+    return columns.map((col) => {
+      const colDef = col.getColDef();
+      return {
+        id: col.getColId(),
+        initialHide: colDef.initialHide,
+        label: `${colDef.headerName ?? ''}`,
+        alwaysDisplayed:
+          colDef.lockVisible || !colDef.headerName || col.isPinned(),
+      };
+    });
+  }
 }

libs/components/ag-grid/src/lib/modules/ag-grid/fixtures/ag-grid-data-manager.component.fixture.ts

@@ -53,10 +53,12 @@ export class SkyAgGridDataManagerFixtureComponent implements OnInit {
       maxWidth: 50,
       sortable: false,
       type: SkyCellType.RowSelector,
+      pinned: 'left',
     },
     {
       field: 'name',
       headerName: 'First Name',
+      lockVisible: true,
     },
     {
       field: 'target',