Data Object Format to use with Table from @grafana/ui

mudu · March 12, 2021, 5:41pm

Hi,

found this Table component in grafana/ui and want to use it in my panel. The Documentation here Storybook tells that the Data where made with a function, but the magic of this function is hidden.
It will have an object in the format DataFrame, but i get an error that my format is not fitting.

So a litte example please, and maybe this would be nice to have a little bit more details about the data structure that is needed.

Thanx

mudu · March 12, 2021, 8:54pm

Oh I answer myself:
The information for the storybook is found in the component in grafana/ui. I found the magic buildData function and can now use it for making a data Object that works with table component.

github.com

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

import React from 'react';
import { merge } from 'lodash';
import { Table } from '@grafana/ui';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { number } from '@storybook/addon-knobs';
import { useTheme } from '../../themes';
import mdx from './Table.mdx';
import {
  DataFrame,
  FieldType,
  GrafanaTheme,
  MutableDataFrame,
  ThresholdsConfig,
  ThresholdsMode,
  FieldConfig,
} from '@grafana/data';
import { prepDataForStorybook } from '../../utils/storybook/data';

export default {
  title: 'Visualizations/Table',

This file has been truncated. show original

system · March 12, 2022, 8:55pm

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.