Data

ListRow

The standard row of a list: an entry, a subscription, an account, a notification. A leading tile, a title that truncates and shows the rest on hover, a muted meta line, and a trailing value that never truncates. With href or onClick the whole row is the target, through its title, and the actions sit outside it. ListGroup heads a set of rows with a heading that sticks while they scroll, and a total. Rows are set apart by space and hover, not a border each.

view .md

Preview

Sat, Sep 27

−$66.50

out−$4.50pending
learning−$62.00

Fri, Sep 26

+$7,700.00

income+$9,500.00
home−$1,800.00

Installation

terminal

bash

npx @entrepta/cli@latest add list-row

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

list-row.tsx

tsx

import { ListGroup, ListRow } from "@/components/entrepta/list-row"

<ListGroup label="Today" total={<Amount value={-5240} tone="auto" />}>
  <ListRow
    leading={<IconTile icon={CoffeeIcon} color="chart-4" />}
    title="Coffee"
    meta="card · 08:12"
    trailing={<Amount value={-450} />}
    href="/entries/123"
    linkComponent={Link}
    actions={<EntryActions />}
  />
</ListGroup>

Props

Prop	Type	Default	Description
leading	ReactNode	-	An IconTile or an Avatar
title / meta	ReactNode	-	One line each. Both truncate
trailing / trailingMeta	ReactNode	-	Usually an Amount, and a line under it. Never truncates
href / linkComponent / onClick	string / ElementType / () => void	-	Makes the whole row a link or a button, through its title
actions	ReactNode	-	A Dropdown, outside the row's link
selected / muted	boolean	-	The brand tint for a bulk pick; softer text for something pending
label / total / stickyTop	ReactNode / ReactNode / number \| string	-	The heading, its total, and how far from the top it sticks (ListGroup)