fix: DH-20415: AG Grid headers should match column names (#1261)

- Previously we were omitting the `headerName` property of the column
definition. When omitted, AG Grid automatically reformats the header
name and adds spaces if it is a PascalCase header name
- Explicitly define `headerName` in the ColumnDefinition to match the
actual name of the column
- Added unit tests, updated e2e tests

Author: mofojed

plugins/ag-grid/src/js/src/utils/AgGridTableUtils.test.ts

@@ -216,6 +216,8 @@ describe('getColumnDefs', () => {
       expect(columnDefs).toHaveLength(2);
       expect(columnDefs[0].field).toBe('col1');
       expect(columnDefs[1].field).toBe('col2');
+      expect(columnDefs[0].headerName).toBe('col1');
+      expect(columnDefs[1].headerName).toBe('col2');
     });
   });
 
@@ -236,8 +238,10 @@ describe('getColumnDefs', () => {
       const columnDefs = getColumnDefs(treeTable);
       expect(columnDefs).toHaveLength(2);
       expect(columnDefs[0].field).toBe('col1');
+      expect(columnDefs[0].headerName).toBe('col1');
       expect(columnDefs[0].rowGroup).toBe(true);
       expect(columnDefs[1].field).toBe('col2');
+      expect(columnDefs[1].headerName).toBe('col2');
     });
   });
 
@@ -263,4 +267,37 @@ describe('getColumnDefs', () => {
       expect(columnDefs[2].field).toBe('value1');
     });
   });
+
+  describe('sets headerName explicitly', () => {
+    // AG Grid by default converts camelCase to 'Camel Case' for header names.
+    // We want to ensure that column names are used exactly as-is.
+    it('for table columns', () => {
+      const table = createMockTable({
+        columns: [
+          createMockColumn({ name: 'col1' }),
+          createMockColumn({ name: 'FooBar' }),
+          createMockColumn({ name: 'Foo_Bar' }),
+        ],
+      });
+      const columnDefs = getColumnDefs(table);
+      expect(columnDefs[0].headerName).toBe('col1');
+      expect(columnDefs[1].headerName).toBe('FooBar');
+      expect(columnDefs[2].headerName).toBe('Foo_Bar');
+    });
+
+    it('for tree table columns', () => {
+      const treeTable = createMockTreeTable({
+        columns: [
+          createMockColumn({ name: 'col1' }),
+          createMockColumn({ name: 'FooBar' }),
+          createMockColumn({ name: 'Foo_Bar' }),
+        ],
+        groupedColumns: [createMockColumn({ name: 'col1' })],
+      });
+      const columnDefs = getColumnDefs(treeTable);
+      expect(columnDefs[0].headerName).toBe('col1');
+      expect(columnDefs[1].headerName).toBe('FooBar');
+      expect(columnDefs[2].headerName).toBe('Foo_Bar');
+    });
+  });
 });

plugins/ag-grid/src/js/src/utils/AgGridTableUtils.ts

@@ -152,10 +152,12 @@ export function getColumnDefs(table: AgGridTableType): ColDef[] {
         const templateColDef: Partial<ColDef> = groupedColSet.has(c.name)
           ? {
               field: c.name,
+              headerName: c.name,
               rowGroup: true,
             }
           : {
               field: c.name,
+              headerName: c.name,
               enableRowGroup: isRowGroupable(c.type),
               enableValue: true,
             };

tests/ag_grid.spec.ts

@@ -12,3 +12,12 @@ test('AgGrid with RollupTable loads', async ({ page }) => {
   await openPanel(page, 'ag_rollup');
   await expect(page.locator('.ag-root')).toHaveScreenshot();
 });
+
+test('Column headers match column names match exactly', async ({ page }) => {
+  await gotoPage(page, '');
+  await openPanel(page, 'ag_foo_bar');
+  await expect(page.locator('.ag-header-cell-text')).toHaveText([
+    'Foo_Bar',
+    'FooBar',
+  ]);
+});

tests/ag_grid.spec.ts-snapshots/AgGrid-with-RollupTable-loads-1-chromium-linux.png

@@ -19,3 +19,16 @@
 
 rollup = source.rollup(aggs=agg_list, by=by_list)
 ag_rollup = AgGrid(rollup)
+
+from deephaven import new_table
+from deephaven.column import string_col
+from deephaven.ag_grid import AgGrid
+
+foo_bar_table = new_table(
+    [
+        string_col("Foo_Bar", ["Foo"]),
+        string_col("FooBar", ["Bar"]),
+    ]
+)
+
+ag_foo_bar = AgGrid(foo_bar_table)