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:
Andrej Ocenas 2023-08-08 19:02:48 +02:00 committed by GitHub
parent 6b4a9d73d7
commit 15ac12637d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 2 deletions

View File

@ -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} />

View File

@ -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;