Components•Flap ledger
Components•Flap ledger
Flap ledger
A split-flap board for live data. Each column only flips through the characters it is allowed to show, and the cascade starts from the column that changed most.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/flap-ledgerHow to use
import { FlapLedger, type FlapColumn } from "@/components/bjork-ui/tables/flap-ledger";const columns: FlapColumn[] = [ { key: "time", header: "Time", width: 5, charset: "0123456789: " }, { key: "status", header: "Status", width: 11, charset: ["ON TIME", "BOARDING", "DELAYED", "GATE CLOSED", "DEPARTED"] },];<FlapLedger columns={columns} rows={rows} status={(row) => (row.status === "DELAYED" ? "warn" : "ok")}/>
TimeFlightDestinationGateStatus
| Time | Flight | Destination | Gate | Status |
|---|---|---|---|---|
| 08:15 | BJ204 | LONDON | A12 | ON TIME |
| 08:40 | BJ317 | TOKYO | B4 | BOARDING |
| 09:05 | BJ82 | BERLIN | C7 | DELAYED |
| 09:30 | BJ551 | OSLO | D2 | GATE CLOSED |
| 10:10 | BJ19 | NEW YORK | E9 | DEPARTED |