Adding Pagination to Table Plugin

[kevinreber]

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

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

[ollieboyd]

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

[kevinreber]

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

[ollieboyd]

Are you getting enough results to trigger pagination?

[kevinreber]

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