diff --git a/docs/sources/panels/visualizations/table/_index.md b/docs/sources/panels/visualizations/table/_index.md index 82f1c937f96c..c01c741a4f43 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 28444fad5340..4472e72fc6c4 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 34f090969547..4a5bbd1dc5d1 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 e7834c3da2fd..493a8b9a80b5 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 a3ce3ae83f3b..ffd1c1d178f6 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 c4a15de51edf..342063f4d637 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',