mirror of
https://github.com/grafana/grafana.git
synced 2025-02-20 11:48:34 -06:00
561ccf419c
* 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.
85 lines
3.1 KiB
TypeScript
85 lines
3.1 KiB
TypeScript
import { PanelPlugin } from '@grafana/data';
|
|
import { TablePanel } from './TablePanel';
|
|
import { PanelOptions, PanelFieldConfig, defaultPanelOptions, defaultPanelFieldConfig } from './models.gen';
|
|
import { tableMigrationHandler, tablePanelChangedHandler } from './migrations';
|
|
import { TableCellDisplayMode } from '@grafana/ui';
|
|
|
|
export const plugin = new PanelPlugin<PanelOptions, PanelFieldConfig>(TablePanel)
|
|
.setPanelChangeHandler(tablePanelChangedHandler)
|
|
.setMigrationHandler(tableMigrationHandler)
|
|
.setNoPadding()
|
|
.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',
|
|
settings: {
|
|
placeholder: 'auto',
|
|
min: 20,
|
|
max: 300,
|
|
},
|
|
shouldApply: () => true,
|
|
defaultValue: defaultPanelFieldConfig.width,
|
|
})
|
|
.addRadio({
|
|
path: 'align',
|
|
name: 'Column alignment',
|
|
settings: {
|
|
options: [
|
|
{ label: 'auto', value: 'auto' },
|
|
{ label: 'left', value: 'left' },
|
|
{ label: 'center', value: 'center' },
|
|
{ label: 'right', value: 'right' },
|
|
],
|
|
},
|
|
defaultValue: defaultPanelFieldConfig.align,
|
|
})
|
|
.addSelect({
|
|
path: 'displayMode',
|
|
name: 'Cell display mode',
|
|
description: 'Color text, background, show as gauge, etc',
|
|
settings: {
|
|
options: [
|
|
{ value: TableCellDisplayMode.Auto, label: 'Auto' },
|
|
{ value: TableCellDisplayMode.ColorText, label: 'Color text' },
|
|
{ value: TableCellDisplayMode.ColorBackground, label: 'Color background (gradient)' },
|
|
{ value: TableCellDisplayMode.ColorBackgroundSolid, label: 'Color background (solid)' },
|
|
{ value: TableCellDisplayMode.GradientGauge, label: 'Gradient gauge' },
|
|
{ value: TableCellDisplayMode.LcdGauge, label: 'LCD gauge' },
|
|
{ value: TableCellDisplayMode.BasicGauge, label: 'Basic gauge' },
|
|
{ value: TableCellDisplayMode.JSONView, label: 'JSON View' },
|
|
{ value: TableCellDisplayMode.Image, label: 'Image' },
|
|
],
|
|
},
|
|
defaultValue: defaultPanelFieldConfig.displayMode,
|
|
})
|
|
.addBooleanSwitch({
|
|
path: 'filterable',
|
|
name: 'Column filter',
|
|
description: 'Enables/disables field filters in table',
|
|
defaultValue: defaultPanelFieldConfig.filterable,
|
|
});
|
|
},
|
|
})
|
|
.setPanelOptions((builder) => {
|
|
builder.addBooleanSwitch({
|
|
path: 'showHeader',
|
|
name: 'Show header',
|
|
description: "To display table's header or not to display",
|
|
defaultValue: defaultPanelOptions.showHeader,
|
|
});
|
|
});
|