Adding Pagination to Table Plugin

Grafana Plugin Development
1

I’m currently trying to create a Panel Plugin that will basically create a @grafana/ui Table with Pagination.

I am following the Table Docs in Grafana Labs storybook and do not see any changes when I set enablePagination={true} – see UI in screenshot. When I set enablePagination={true} my Table component plugin appears to be the same without setting enablePagination

image
image5537×1688 897 KB

Here is a snippet of my Panel Plugin component

import React from 'react';
import { PanelProps } from '@grafana/data';
import { SimpleOptions } from 'types';
import { Table } from '@grafana/ui';

interface Props extends PanelProps<SimpleOptions> {}

export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
  const dataSource = data.series[0];

  return (
    <div>
      <Table data={dataSource} width={width} height={height} columnMinWidth={150} enablePagination={true} />
    </div>
  );
};

Does anyone know if I am missing anything and if there are any extra documents regarding creating a Table plugin with Pagination?

Environment:

  • Grafana version: 9.1.0
  • Data source type & version: Grafana’s Default Data Source
  • User OS & Browser: Chrome
2

Which version of @grafana/ui do you have in your package.json? The pagination was added in March so yours could be a bit out of date? Table: New pagination option by zoltanbedi · Pull Request #45732 · grafana/grafana · GitHub

3

I upgraded to @grafana/ui v9.1.3 but am still having the same issues

4

Are you getting enough results to trigger pagination?

1 Like
5

I have 200 results. Is there a specific number that needs to be met to get pagination to work?

6

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