V7 Native Table Panel Plugin sources

Grafana Plugin Development
1

Hello! I wonder if there are sources for v7 new Table Panel plugin which is included in Grafana, to make custom based on it? For old table I’ve used this one. Is there something like that for new version?

2

Hi! And welcome to the community forums! :tada:

If you’re looking to use a table in your custom plugin, have a look at the Table component in the @grafana/ui package:

If you’re looking for inspiration to build your own, check out the source code for the built-in Table panel here:

3

Thank you for your reply! I’ve seen these files but had some troubles of understanding the build logic.
I’ve successfully tried do build panel plugin by tutorial ( via @grafana/toolkit plugin:create my-grafana-plugin and yarn dev) but what is correct way if I need to make some changes in this plugin?

Should I follow tutorial in this case? If yes, how should I use these file? As I understand, to build a plugin I need source files in src dir and package.json and then run yarn dev.

I’ve tried to use sample plugin package.json created by @grafana/toolkit plugin:create command, and tried to put files from public/app/plugins/panel/table to my plugin’s src dir and then run yarn dev. But it seems that it is not correct. It resulted in several import errors for

import { dispatch } from "../../../store/store";
import { applyFilterFromTable } from "../../../features/variables/adhoc/actions";
import { getDashboardSrv } from "../../../features/dashboard/services/DashboardSrv";

and nothing got built. What is correct way to make changes in this plugin, for example if I want to change tableStyles in Table.tsx or add new Cell display mode option in module.tsx?

4

While you can certainly look at the built-in plugins for inspiration, most of them rely on internal packages that are not yet exposed in the public APIs, e.g. @grafana/ui or @grafana/data.

For this reason, I don’t recommend that you use any of the built-in plugins as templates for your own plugin. Especially if you’d like to publish your plugin one day.

5

Ok, I understand. But in storybook Table example also has such imports here

import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { number } from '@storybook/addon-knobs';
import { useTheme } from '../../themes';
import mdx from './Table.mdx';

How can I deal with them? Or I can’t use Table from storybook now?

6

Hello!

Perhaps I’m not quite in this subject, but I’d use this table template too.

But whatever I did, 'yarn build' gives out this erorrs:
      ERROR in ./SimplePanel.tsx
      Module not found: Error: Can't resolve '../../utils/storybook/withCenteredStory' in '/var/lib/grafana/plugins/TableTest/src
       @ ./SimplePanel.tsx 9:0-76 20:15-32
       @ ./module.ts

  ERROR in ./SimplePanel.tsx
  Module not found: Error: Can't resolve './Table.mdx' in '/var/lib/grafana/plugins/TableTest/src'
   @ ./SimplePanel.tsx 12:0-30 23:12-15
   @ ./module.ts

’Table.mdx’ I found here
But it didn’t help. I’m not sure it fits.

And I can’t understand what is ‘…/…/utils/storybook/withCenteredStory/’.

Can you prompt to me anything?

OS - Debian 10,
node v 12.18.4
npm v 6.14.6
yarn v 1.22.5

7

I found what is ‘…/…/utils/storybook/withCenteredStory/’. The file ‘withCenteredStory.d.ts’ is in the folder ‘[my_plugin]/node_modules/@grafana/ui/utils/storybook’. But the compiler doesn`t find it for some reason…

Or I’m don’t understand something…