1. Components
  2. List

Components

List

Vertical indexes to display data and text, such as rankings.

  • Roger Federer 10,550
  • Rafel Nadal 9,205
  • Novak Djokovic 8,310
  • Andy Murray 7,030

   

Import List components

Tremor exports two components for Lists.

  • List: Parent component containing all list items.
  • ListItem: Child component displaying entries with a flex logic of filling the space.
import { List, ListItem } from "@tremor/react";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

import { List, ListItem } from "@tremor/react";

export default () => (
  <List
      marginTop="mt-0">
    <ListItem
        spaceX="space-x-0"
    >
      {/* the first element is left aligned, the second one is right aligned */}
    </ListItem>
  </List>
);

Usage example

The example below shows a composition of a list combining Card, List, ListItem, and Title components.

Tremor's Hometowns

  • Athens2 open PR
  • Luzern1 open PR
  • Zürich0 open PR
  • Vienna1 open PR
  • Ermatingen0 open PR
  • Lissbon0 open PR
import { Card, List, ListItem, Title } from "@tremor/react";

const cities = [
  {
    city: "Athens",
    rating: "2 open PR",
  },
  {
    city: "Luzern",
    rating: "1 open PR",
  },
  {
    city: "Zürich",
    rating: "0 open PR",
  },
  {
    city: "Vienna",
    rating: "1 open PR",
  },
  {
    city: "Ermatingen",
    rating: "0 open PR",
  },
  {
    city: "Lisbon",
    rating: "0 open PR",
  },
];

export default () => (
  <Card maxWidth="max-w-xs">
    <Title>Tremor's Hometowns</Title>
    <List>
      {cities.map((item) => (
        <ListItem>
          <span>{item.city}</span>
          <span>{item.rating}</span>
        </ListItem>
      ))}
    </List>
  </Card>
);

API Reference: List

marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

API Reference: ListItem

spaceXoptional
Description
Set the horizontal space between elements.
Type
string
Default
space-x-0