Table row presence

Installation

$ npx shadcn@latest add https://goodui.dev/r/table-row-presence.json

The file lands in components/goodui/table-row-presence.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/table-row-presence works too.

Usage

import * as React from "react"
import { TableRowPresence, type TableRowPresenceColumn } from "@/components/goodui/table-row-presence"

type Booking = { id: string; client: string; service: string; time: string; price: number }

const columns: TableRowPresenceColumn<Booking>[] = [
  { key: "client", header: "Client", cell: (b) => <span className="font-medium">{b.client}</span> },
  { key: "service", header: "Service", cell: (b) => b.service, className: "hidden sm:table-cell" },
  { key: "time", header: "Time", cell: (b) => b.time, className: "w-20" },
  { key: "price", header: "Price", cell: (b) => `$${b.price}`, align: "right" },
]

export function TodayBookings({ bookings }: { bookings: Booking[] }) {
  const [sortBy, setSortBy] = React.useState<"time" | "price">("time")
  const rows = [...bookings].sort((a, b) => (sortBy === "time" ? a.time.localeCompare(b.time) : b.price - a.price))

  return (
    <div className="space-y-3">
      <button type="button" onClick={() => setSortBy(sortBy === "time" ? "price" : "time")}>
        Sort by {sortBy === "time" ? "price" : "time"}
      </button>
      <TableRowPresence
        rows={rows}
        columns={columns}
        getRowId={(b) => b.id}
        caption="Bookings for today"
        empty="No bookings today."
      />
    </div>
  )
}

When to use

Examples

const columns: TableRowPresenceColumn<Invoice>[] = [
  { key: "number", header: "Invoice", cell: (i) => i.number },
  { key: "amount", header: "Amount", cell: (i) => formatMoney(i.amount), align: "right" },
  {
    key: "actions",
    header: <span className="sr-only">Actions</span>,
    align: "right",
    cell: (i) => (
      <button type="button" onClick={() => setInvoices((list) => list.filter((x) => x.id !== i.id))}>
        Archive
      </button>
    ),
  },
]

API reference

Accessibility

• •Renders a real <table> with <th scope="col"> headers and an optional <caption>, so screen readers read it as a table.
• •With onRowClick, rows are focusable (tabIndex 0, visible focus outline) and activate with Enter or Space when the row itself has focus; keys inside cell buttons and links are left alone.
• •For an actions column with no visible header, pass header as <span className="sr-only">Actions</span>.

Motion

• •New rows fade in and slide 12px in from the left while each cell grows from 0 to its height on a spring (bounce 0, 0.42 s), so rows below slide down instead of jumping.
• •Rows added after the first render get a primary tint that fades out over 2.2 s (highlightNew, on by default). Rows present on the first render appear without it.
• •Removed rows slide 24px to the right and fade out (0.2 s, ease-in) while their cells collapse and the gap closes.
• •Re-sorting moves every row to its new position with a layout animation on the same spring.
• •The empty-state row fades in after 0.2 s, once the last row has left.
• •Reduced motion: no slides, no layout glide and no height animation; the new-row tint is effectively off (0.01 s).

• •Every row and cell is a motion element, and layout animation measures rows on change. It suits dashboard-sized tables, not hundreds of rows.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related