ui: DataGrid: Add context menu item to autofit columns in DataGrid (#3481)

- Add new button to auto fit column witdth to content.
- Added section headers to conext menu.

<img width="741" height="334" alt="image"
src="https://github.com/user-attachments/assets/def808eb-a0ce-4f4a-bd4a-8f70fd5964f6"
/>

Author: stevegolton

ui/src/components/widgets/data_grid/data_grid.ts

@@ -23,11 +23,12 @@ import {Box} from '../../../widgets/box';
 import {Button} from '../../../widgets/button';
 import {Chip} from '../../../widgets/chip';
 import {LinearProgress} from '../../../widgets/linear_progress';
-import {MenuDivider, MenuItem} from '../../../widgets/menu';
+import {MenuDivider, MenuItem, MenuTitle} from '../../../widgets/menu';
 import {Stack, StackAuto} from '../../../widgets/stack';
 import {
   renderSortMenuItems,
   Grid,
+  GridApi,
   GridColumn,
   GridCell,
   GridHeaderCell,
@@ -275,6 +276,7 @@ export class DataGrid implements m.ClassComponent<DataGridAttrs> {
   // Track pagination state from virtual scrolling
   private paginationOffset: number = 0;
   private paginationLimit: number = 100;
+  private gridApi?: GridApi;
 
   oninit({attrs}: m.Vnode<DataGridAttrs>) {
     if (attrs.initialSorting) {
@@ -391,6 +393,7 @@ export class DataGrid implements m.ClassComponent<DataGridAttrs> {
       })();
 
       const menuItems: m.Children = [];
+      sortControls && menuItems.push(m(MenuTitle, {label: 'Sorting'}));
       sortControls &&
         menuItems.push(
           ...renderSortMenuItems(sort, (direction) => {
@@ -409,6 +412,7 @@ export class DataGrid implements m.ClassComponent<DataGridAttrs> {
 
       if (filterControls && sortControls && menuItems.length > 0) {
         menuItems.push(m(MenuDivider));
+        menuItems.push(m(MenuTitle, {label: 'Filters'}));
       }
 
       if (filterControls) {
@@ -439,13 +443,25 @@ export class DataGrid implements m.ClassComponent<DataGridAttrs> {
       if (columnReordering) {
         if (menuItems.length > 0) {
           menuItems.push(m(MenuDivider));
+          menuItems.push(m(MenuTitle, {label: 'Column'}));
+        }
+
+        if (this.gridApi) {
+          const gridApi = this.gridApi;
+          menuItems.push(
+            m(MenuItem, {
+              label: 'Fit to content',
+              icon: 'fit_width',
+              onclick: () => gridApi.autoFitColumn(column.name),
+            }),
+          );
         }
 
         // Hide current column (only if more than 1 visible)
         if (orderedColumns.length > 1) {
           menuItems.push(
             m(MenuItem, {
-              label: 'Hide column',
+              label: 'Hide',
               icon: Icons.Hide,
               onclick: () => {
                 const newOrder = columnOrder.filter(
@@ -760,6 +776,9 @@ export class DataGrid implements m.ClassComponent<DataGridAttrs> {
               onColumnOrderChanged(newOrder);
             }
           : undefined,
+        onReady: (api) => {
+          this.gridApi = api;
+        },
       }),
     );
   }

ui/src/widgets/grid.ts

@@ -101,7 +101,8 @@ export class GridHeaderCell implements m.ClassComponent<GridHeaderCellAttrs> {
         PopupMenu,
         {
           trigger: m(Button, {
-            className: 'pf-visible-on-hover pf-grid-header-cell__menu-button',
+            className:
+              'pf-visible-on-hover pf-grid-header-cell__menu-button pf-grid--no-measure',
             icon: Icons.ContextMenuAlt,
             rounded: true,
             ariaLabel: 'Column menu',
@@ -227,6 +228,23 @@ export interface GridVirtualization {
   readonly rowHeightPx: number;
 }
 
+/**
+ * Imperative API for Grid component.
+ * Provides methods to control the grid programmatically.
+ */
+export interface GridApi {
+  /**
+   * Auto-fit a column to its content width.
+   * @param columnKey The key of the column to auto-fit
+   */
+  autoFitColumn(columnKey: string): void;
+
+  /**
+   * Auto-fit all columns to their content widths.
+   */
+  autoFitAllColumns(): void;
+}
+
 /**
  * Attributes for the Grid component.
  */
@@ -243,6 +261,7 @@ export interface GridAttrs {
     to: string | number | undefined,
     position: ReorderPosition,
   ) => void;
+  readonly onReady?: (api: GridApi) => void;
 }
 
 /**
@@ -550,6 +569,38 @@ export class Grid implements m.ClassComponent<GridAttrs> {
         },
       },
     ]);
+
+    // Call onReady callback with imperative API
+    if (vnode.attrs.onReady) {
+      vnode.attrs.onReady({
+        autoFitColumn: (columnKey: string) => {
+          const gridDom = vnode.dom as HTMLElement;
+          const column = columns.find((c) => c.key === columnKey);
+          if (!column) return;
+
+          this.measureAndApplyWidths(gridDom, [
+            {
+              key: column.key,
+              minWidth: column.minWidth ?? COL_WIDTH_MIN_PX,
+              maxWidth: Infinity,
+            },
+          ]);
+          m.redraw();
+        },
+        autoFitAllColumns: () => {
+          const gridDom = vnode.dom as HTMLElement;
+          this.measureAndApplyWidths(
+            gridDom,
+            columns.map((column) => ({
+              key: column.key,
+              minWidth: column.minWidth ?? COL_WIDTH_MIN_PX,
+              maxWidth: Infinity,
+            })),
+          );
+          m.redraw();
+        },
+      });
+    }
   }
 
   onupdate(vnode: m.VnodeDOM<GridAttrs, this>) {
@@ -596,9 +647,18 @@ export class Grid implements m.ClassComponent<GridAttrs> {
     const gridClone = gridDom.cloneNode(true) as HTMLElement;
     gridDom.appendChild(gridClone);
 
+    // Hide any elements that are not part of the measurement - these are
+    // elements with class .pf-grid--no-measure
+    const noMeasureElements = gridClone.querySelectorAll(
+      '.pf-grid--no-measure',
+    );
+    noMeasureElements.forEach((el) => {
+      (el as HTMLElement).style.display = 'none';
+    });
+
     // Now read the actual widths (this will cause a reflow)
     // Find all the cells in this column (header + data rows)
-    const allCells = gridClone.querySelectorAll(`.pf-grid__cell-container`); // TODO pick a better selector for this
+    const allCells = gridClone.querySelectorAll(`.pf-grid__cell-container`);
 
     // Only continue if we have more cells than just the header
     if (allCells.length <= columns.length) {