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.
Create item

GitHub

OAuth

GitLab

OAuth

Google

OAuth

Generic OAuth

OAuth

Grafana

OAuth

Azure AD

OAuth

Okta

OAuth

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​