Availability table

Pro

Sortable, filterable unit availability table for new developments that turns into cards on mobile.

app/page.tsx

import { AvailabilityTable, type Unit } from "@/components/facade/availability-table";

const units: Unit[] = [
  { id: "201", unit: "201", floor: 2, beds: 0, baths: 1, sqft: 584, price: 412000, status: "sold" },
  { id: "204", unit: "204", floor: 2, beds: 1, baths: 1, sqft: 768, price: 498000, status: "available" },
  { id: "207", unit: "207", floor: 2, beds: 2, baths: 2, sqft: 1092, price: 689000, status: "reserved" },
  { id: "302", unit: "302", floor: 3, beds: 1, baths: 1, sqft: 792, price: 524000, status: "sold" },
  { id: "305", unit: "305", floor: 3, beds: 2, baths: 2, sqft: 1135, price: 724000, status: "available" },
  { id: "309", unit: "309", floor: 3, beds: 3, baths: 2.5, sqft: 1486, price: 949000, status: "available" },
  { id: "403", unit: "403", floor: 4, beds: 2, baths: 2, sqft: 1158, price: 762000, status: "sold" },
  { id: "406", unit: "406", floor: 4, beds: 2, baths: 2, sqft: 1204, price: 789000, status: "reserved" },
  { id: "410", unit: "410", floor: 4, beds: 3, baths: 2.5, sqft: 1522, price: 1015000, status: "available" },
  { id: "501", unit: "501", floor: 5, beds: 2, baths: 2, sqft: 1240, price: 845000, status: "sold" },
  { id: "PH1", unit: "PH1", floor: 6, beds: 3, baths: 3.5, sqft: 2210, price: 1695000, status: "reserved" },
  { id: "PH2", unit: "PH2", floor: 6, beds: 4, baths: 3.5, sqft: 2645, price: 2150000, status: "available" },
];

export default function Demo() {
  return (
    <div className="w-full max-w-[860px]">
      <div className="mb-3 flex flex-wrap items-end justify-between gap-2">
        <div>
          <p className="text-xs font-medium uppercase tracking-wider text-brand">Now selling · Phase 1</p>
          <p className="font-display text-lg font-semibold tracking-tight text-foreground">The Wynwood Residences, Miami, FL</p>
        </div>
        <p className="text-sm text-muted-foreground">Delivery spring 2027</p>
      </div>
      <AvailabilityTable units={units} defaultSort={{ key: "price", dir: "asc" }} />
    </div>
  );
}

Installation

$npx shadcn@latest add @facade/availability-table

Pro items install from the private @facade registry with your license key. Set it up once.

Usage

import { AvailabilityTable } from "@/components/facade/availability-table";

export default function Page() {
  return <AvailabilityTable />;
}

Props

AvailabilityTableProps is exported, so you can extend or wrap it. Every prop has a default; <AvailabilityTable /> renders the example above.

Props of AvailabilityTable
Prop	Type	Description
units	Unit[]
defaultFilter	"all" \| UnitStatus
defaultSort	{ key: SortKey; dir: "asc" \| "desc" }
actionLabel	string	Label for the row action.
onSelect	(unit: Unit) => void
className	string

Ask your agent

With the Facade MCP server connected, this prompt is enough:

Add the Facade availability table to this page and adapt the copy to our business.