Skip to main content

List Page

Overview

A page that displays a list of items. Each item is a link to a new page where either detail or create view can be displayed.

Authentication

Manage your auth settings and configure single sign-on.

Source code

import React from 'react';import { Card, EmptySearchResult, FilterInput, Icon, LinkButton, Stack } from '@grafana/ui';import { Data } from '@site/src/components/templates/GridPage/types';interface ListPageProps {  data: Data;  query: string;  changeQuery: (query: string) => void;}export const ListPage = ({ data, query, changeQuery }: ListPageProps) => {  return (    <Stack direction={'column'} gap={2}>      <Stack gap={2}>        <FilterInput placeholder="Search by name" autoFocus={true} value={query} onChange={changeQuery} />        <LinkButton href="#" variant="primary">          Create item        </LinkButton>      </Stack>      {data.length ? (        data.map((item) => {          return (            <Card key={item.name} href={'#'}>              <Card.Heading>{item.displayName}</Card.Heading>              <Card.Meta>OAuth</Card.Meta>              <Card.Figure>                <Icon name={item.icon} size={'xxxl'} />              </Card.Figure>            </Card>          );        })      ) : (        <EmptySearchResult>No results matching your query</EmptySearchResult>      )}    </Stack>  );};export default ListPage;

Usage

  • Use a combination of the Stack component with the column direction and Card components to create a list layout.
  • Use the Card component to create a list item.
  • For showing the empty state, use the EmptySearchResult component.
  • If filters are present, the primary action should be located after the filters, on the right side of the page.

Visual guidelines

Figma designs