Table: Add minimum column width field for auto resizing (#35351)

* TablePanel: Adds minimum column width field

The table panel uses virtual rendering of rows, which prevents resizing
based on the contents of a column. A minimum column width field
simulates this ability.

* Fixed indentation issue

* Updates the table panel documentation

Added the "Minimum column width" option to table panel docs and updated
the information for the "Column width" option in the docs.

docs/sources/panels/visualizations/table/_index.md

@@ -31,10 +31,16 @@ Show or hide column names imported from your data source.
 
 ## Column width
 
-By default, Grafana automatically calculates the column width based on the cell contents. In this field option, can override the setting and define the width for all columns in pixels.
+By default, Grafana automatically calculates the column width based on the table size and the minimum column width. This field option can override the setting and define the width for all columns in pixels.
 
 For example, if you enter `100` in the field, then when you click outside the field, all the columns will be set to 100 pixels wide.
 
+## Minimum column width
+
+By default, the minimum width of the table column is 150 pixels. This field option can override that default and will define the new minimum column width for the table panel in pixels.
+
+For example, if you enter `75` in the field, then when you click outside the field, all the columns will scale to no smaller than 75 pixels wide.
+
 ## Column alignment
 
 Choose how Grafana should align cell contents:

packages/grafana-ui/src/components/Table/types.ts

@@ -5,6 +5,7 @@ import { CSSProperties, FC } from 'react';
 
 export interface TableFieldOptions {
   width: number;
+  minWidth: number;
   align: FieldTextAlignment;
   displayMode: TableCellDisplayMode;
   hidden?: boolean;

packages/grafana-ui/src/components/Table/utils.ts

@@ -78,18 +78,31 @@ export function getColumns(data: DataFrame, availableWidth: number, columnMinWid
       },
       sortType: selectSortType(field.type),
       width: fieldTableOptions.width,
-      minWidth: 50,
+      minWidth: fieldTableOptions.minWidth || columnMinWidth,
       filter: memoizeOne(filterByValue(field)),
       justifyContent: getTextAlign(field),
     });
   }
 
+  // set columns that are at minimum width
+  let sharedWidth = availableWidth / fieldCountWithoutWidth;
+  for (let i = fieldCountWithoutWidth; i > 0; i--) {
+    for (const column of columns) {
+      if (!column.width && column.minWidth > sharedWidth) {
+        column.width = column.minWidth;
+        availableWidth -= column.width;
+        fieldCountWithoutWidth -= 1;
+        sharedWidth = availableWidth / fieldCountWithoutWidth;
+      }
+    }
+  }
+
   // divide up the rest of the space
-  const sharedWidth = availableWidth / fieldCountWithoutWidth;
   for (const column of columns) {
     if (!column.width) {
-      column.width = Math.max(sharedWidth, columnMinWidth);
+      column.width = sharedWidth;
     }
+    column.minWidth = 50;
   }
 
   return columns;

public/app/plugins/panel/table/models.cue

@@ -29,6 +29,7 @@ Family: {
                 }
                 PanelFieldConfig: {
                     width?: int
+                    minWidth?: int
                     align?: string | *"auto"
                     displayMode?: string | *"auto" // TODO? TableCellDisplayMode
                     filterable?: bool

public/app/plugins/panel/table/models.gen.ts

@@ -24,6 +24,7 @@ export const defaultPanelOptions: PanelOptions = {
 
 export interface PanelFieldConfig {
   width?: number;
+  minWidth?: number;
   align?: string;
   displayMode?: TableCellDisplayMode;
   filterable?: boolean;

public/app/plugins/panel/table/module.tsx

@@ -11,6 +11,18 @@ export const plugin = new PanelPlugin<PanelOptions, PanelFieldConfig>(TablePanel
   .useFieldConfig({
     useCustomConfig: (builder) => {
       builder
+        .addNumberInput({
+          path: 'minWidth',
+          name: 'Minimum column width',
+          description: 'The minimum width for column auto resizing',
+          settings: {
+            placeholder: '150',
+            min: 50,
+            max: 500,
+          },
+          shouldApply: () => true,
+          defaultValue: defaultPanelFieldConfig.minWidth,
+        })
         .addNumberInput({
           path: 'width',
           name: 'Column width',