diff --git a/docs/sources/panels/visualizations/table/_index.md b/docs/sources/panels/visualizations/table/_index.md index 82f1c937f96..c01c741a4f4 100644 --- a/docs/sources/panels/visualizations/table/_index.md +++ b/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: diff --git a/packages/grafana-ui/src/components/Table/types.ts b/packages/grafana-ui/src/components/Table/types.ts index 28444fad534..4472e72fc6c 100644 --- a/packages/grafana-ui/src/components/Table/types.ts +++ b/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; diff --git a/packages/grafana-ui/src/components/Table/utils.ts b/packages/grafana-ui/src/components/Table/utils.ts index 34f09096954..4a5bbd1dc5d 100644 --- a/packages/grafana-ui/src/components/Table/utils.ts +++ b/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; diff --git a/public/app/plugins/panel/table/models.cue b/public/app/plugins/panel/table/models.cue index e7834c3da2f..493a8b9a80b 100644 --- a/public/app/plugins/panel/table/models.cue +++ b/public/app/plugins/panel/table/models.cue @@ -28,7 +28,8 @@ Family: { sortBy?: [...ui.TableSortByFieldState] } PanelFieldConfig: { - width?: int + width?: int + minWidth?: int align?: string | *"auto" displayMode?: string | *"auto" // TODO? TableCellDisplayMode filterable?: bool @@ -37,4 +38,4 @@ Family: { ] ] migrations: [] -} \ No newline at end of file +} diff --git a/public/app/plugins/panel/table/models.gen.ts b/public/app/plugins/panel/table/models.gen.ts index a3ce3ae83f3..ffd1c1d178f 100644 --- a/public/app/plugins/panel/table/models.gen.ts +++ b/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; diff --git a/public/app/plugins/panel/table/module.tsx b/public/app/plugins/panel/table/module.tsx index c4a15de51ed..342063f4d63 100644 --- a/public/app/plugins/panel/table/module.tsx +++ b/public/app/plugins/panel/table/module.tsx @@ -11,6 +11,18 @@ export const plugin = new PanelPlugin(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',