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>

packages/grafana-ui/src/components/Table/Table.mdx

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

packages/grafana-ui/src/components/Table/Table.story.tsx

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