Table Page

A page with a table is a common pattern in Grafana. This template shows how to use the Table component to display data in a table, combined with the filtering and sorting functionality.

Users

Manage users in Grafana

All users

Active last 30 days

New user

				Belongs to
john_doe	[email protected]	John Doe	5/18/2025	Delta Group
alice_smith	[email protected]	Alice Smith	8/3/2025	Gamma Limited
bob_jones	[email protected]	Bob Jones	8/9/2025	Gamma Limited
emma_watson	[email protected]	Emma Watson	5/2/2025	Beta Corporation
michael_jackson	[email protected]	Michael Jackson	3/27/2025	Gamma Limited
lisa_simpson	[email protected]	Lisa Simpson	8/27/2025	Alpha
peter_parker	[email protected]	Peter Parker	6/1/2025	Main Org.
tony_stark	[email protected]	Tony Stark	5/26/2025	Alpha
olivia_smith	[email protected]	Olivia Smith	6/24/2025	Delta Group
charlie_brown	[email protected]	Charlie Brown	5/29/2025	Main Org.

Source code

import React from 'react';
import { Stack, FilterInput, InteractiveTable, LinkButton, RadioButtonGroup } from '@grafana/ui';
import useColumns from '@site/src/components/templates/TablePage/useColumns';
import { Filter, User } from '@site/src/components/templates/TablePage/types';

interface TablePageProps {
  query: string;
  filter: Filter;
  data: User[];
  changeQuery: (query: string) => void;
  changeFilter: (value: string) => void;
}

export const TablePage = ({ changeQuery, query, changeFilter, filter, data }: TablePageProps) => {
  const columns = useColumns();

  return (
    <Stack grow={1} direction={'column'} gap={2}>
      <Stack gap={2}>
        <FilterInput
          placeholder="Search by login, email, or name"
          autoFocus={true}
          value={query}
          onChange={changeQuery}
        />
        <RadioButtonGroup
          options={[
            { label: 'All users', value: 'all' },
            { label: 'Active last 30 days', value: 'lastActive' },
          ]}
          onChange={(value) => changeFilter(value)}
          value={filter}
        />
        <LinkButton href="#" variant="primary">
          New user
        </LinkButton>
      </Stack>
      <InteractiveTable columns={columns} data={data} pageSize={10} getRowId={(user: User) => String(user.id)} />
    </Stack>
  );
};

export default TablePage;

Usage

• The page actions should be located at the top of the page, above the table.
• If filters are present, the primary action should be located after the filters, on the right side of the page.

Visual guidelines

• Lists of objects

Figma designs

• Table with filters