Skip to main content

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
New user
Belongs to
john_doejohn_doe@example.comJohn Doe
8/27/2024
Delta Group
alice_smithalice_smith@example.comAlice Smith
4/30/2024
Main Org.
bob_jonesbob_jones@example.comBob Jones
4/23/2024
Gamma Limited
emma_watsonemma_watson@example.comEmma Watson
5/31/2024
Gamma Limited
michael_jacksonmichael_jackson@example.comMichael Jackson
5/31/2024
Beta Corporation
lisa_simpsonlisa_simpson@example.comLisa Simpson
4/8/2024
Alpha
peter_parkerpeter_parker@example.comPeter Parker
6/18/2024
Beta Corporation
tony_starktony_stark@example.comTony Stark
8/18/2024
Delta Group
olivia_smitholivia_smith@example.comOlivia Smith
5/20/2024
Main Org.
charlie_browncharlie_brown@example.comCharlie Brown
9/15/2024
Gamma Limited

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

Figma designs