Tally UI

OrderList

Scrollable list of orders with a render-prop pattern and optional header and empty state

Import

import { OrderList } from '@tallyui/components';

Usage

<OrderList
  items={orders}
  renderItem={(order) => (
    <OrderCard
      orderNumber={order.number}
      date={order.date}
      total={order.total}
      status={order.status}
    />
  )}
/>

Wraps a scrollable list around any array of data. You supply a renderItem callback to control how each row looks, making it easy to pair with OrderCard or any custom row component.

Props

PropTypeDefaultDescription
itemsany[]requiredArray of data objects to render
renderItem(item: any, index: number) => ReactNoderequiredRender callback for each item
headerSlotReactNodeContent rendered above the list
emptyStateReactNodeShown when items is empty
classNamestringOverride container styles

Live demo

On this page