表格页面

带表格的页面在 Grafana 中是一个常见的模式。此模板展示了如何使用 Table 组件在表格中显示数据，并结合过滤和排序功能。

用户

管理 Grafana 中的用户

所有用户

过去 30 天活跃用户

新建用户

				所属
john_doe	john_doe@example.com	John Doe	1/26/2025	Alpha
alice_smith	alice_smith@example.com	Alice Smith	12/2/2024	Beta Corporation
bob_jones	bob_jones@example.com	Bob Jones	3/29/2025	Main Org.
emma_watson	emma_watson@example.com	Emma Watson	12/18/2024	Gamma Limited
michael_jackson	michael_jackson@example.com	Michael Jackson	2/15/2025	Gamma Limited
lisa_simpson	lisa_simpson@example.com	Lisa Simpson	1/3/2025	Delta Group
peter_parker	peter_parker@example.com	Peter Parker	2/4/2025	Alpha
tony_stark	tony_stark@example.com	Tony Stark	2/10/2025	Main Org.
olivia_smith	olivia_smith@example.com	Olivia Smith	2/14/2025	Delta Group
charlie_brown	charlie_brown@example.com	Charlie Brown	1/8/2025	Alpha

源代码

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;

用法

• 页面操作应位于页面顶部，表格上方。
• 如果存在过滤器，主要操作应位于过滤器之后，在页面右侧。

视觉指南

• 对象列表

Figma 设计稿

• 带过滤器的表格