mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Table: Add storybook and docs for custom render cell type (#72619)
* Add storybook and docs for custom rendering cell * Update packages/grafana-ui/src/components/Table/Table.mdx Co-authored-by: Victor Marin <36818606+mdvictor@users.noreply.github.com> --------- Co-authored-by: Victor Marin <36818606+mdvictor@users.noreply.github.com>
This commit is contained in:
parent
6b4a9d73d7
commit
15ac12637d
@ -13,6 +13,19 @@ The frames are linked to each row using the following custom properties under `d
|
||||
- **parentRowIndex**: number - The index of the parent row in the main dataframe (under the `data` prop of the Table component)
|
||||
- **noHeader**: boolean - Sets the noHeader of each sub-table
|
||||
|
||||
## Cell rendering
|
||||
|
||||
Cell rendering is controlled by table specific field config in the DataFrame passed as `data` prop. Each field can set its `field.config.custom` to be type `TableFieldOptions`. `TableFieldOptions` contain generic options to control some aspects of the cell and column rendering. They also contain `cellOptions` property which can be further used to control type of cell renderer that will be used. `cellOptions` subtypes:
|
||||
|
||||
- **TableAutoCellOptions**: Default cell renderer that does not have to be specified in the `field.config`. Just displays the value with appropriate formatting.
|
||||
- **TableSparklineCellOptions**: Shows a small, time series chart inside the cell. The field values have to be an array of numbers or a DataFrame.
|
||||
- **TableBarGaugeCellOptions**: Show a gauge inside the cell.
|
||||
- **TableColoredBackgroundCellOptions**: Show the cell with a colored background.
|
||||
- **TableColorTextCellOptions**: Make the text inside the cell colored.
|
||||
- **TableImageCellOptions**: Show an image inside the cell.
|
||||
- **TableJsonViewCellOptions**: Shows a formatted and indented JSON text.
|
||||
- **TableCustomCellOptions**: Allows to specify a custom cell renderer as React function component.
|
||||
|
||||
## Usage
|
||||
|
||||
<ArgTypes of={Table} />
|
||||
|
@ -11,8 +11,9 @@ import {
|
||||
ThresholdsMode,
|
||||
FieldConfig,
|
||||
formattedValueToString,
|
||||
Field,
|
||||
} from '@grafana/data';
|
||||
import { Table } from '@grafana/ui';
|
||||
import { Button, Table } from '@grafana/ui';
|
||||
|
||||
import { useTheme2 } from '../../themes';
|
||||
import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
|
||||
@ -20,7 +21,7 @@ import { prepDataForStorybook } from '../../utils/storybook/data';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
|
||||
import mdx from './Table.mdx';
|
||||
import { FooterItem } from './types';
|
||||
import { FooterItem, TableCellDisplayMode, TableCustomCellOptions } from './types';
|
||||
|
||||
const meta: Meta<typeof Table> = {
|
||||
title: 'Visualizations/Table',
|
||||
@ -273,4 +274,49 @@ export const SubTables: StoryFn<typeof Table> = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const CustomColumn: StoryFn<typeof Table> = (args) => {
|
||||
const theme = useTheme2();
|
||||
const data = buildData(theme, {});
|
||||
|
||||
const options: TableCustomCellOptions = {
|
||||
type: TableCellDisplayMode.Custom,
|
||||
cellComponent: (props) => {
|
||||
return (
|
||||
<Button
|
||||
onClick={() =>
|
||||
alert(`Canceling order from ${props.frame.fields.find((f) => f.name === 'Time')?.values[props.rowIndex]}`)
|
||||
}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
const customCellField: Field = {
|
||||
name: 'Actions',
|
||||
type: FieldType.other,
|
||||
values: [],
|
||||
config: {
|
||||
decimals: 0,
|
||||
custom: {
|
||||
cellOptions: options,
|
||||
},
|
||||
},
|
||||
display: () => ({ text: '', numeric: 0 }),
|
||||
};
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
customCellField.values.push(null);
|
||||
}
|
||||
|
||||
data.fields = [customCellField, ...data.fields];
|
||||
|
||||
return (
|
||||
<DashboardStoryCanvas>
|
||||
<Table {...args} data={data} />
|
||||
</DashboardStoryCanvas>
|
||||
);
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
Loading…
Reference in New Issue
Block a user