Units table

A development's available homes, filterable.

The "available homes in this development" block on a property detail page (ADR 0023): a semantic <table> of individual homes — address, type, size, rooms, floor, rent, status — above two rows of filter chips (by rooms, by status), with a live count and an empty state. The same chip and swap-safe idiom as the properties browser.

A deliberately lean stopgap. A third-party tool (EstateTool) is expected to own the real building 360 and unit listing/filtering later, so there is no search, no sorting and no pagination, and none should be added. Gold-plating a component with a known replacement date is the clearest kind of wasted work.

On narrow screens the table scrolls horizontally and is never reflowed into cards, so the page body never scrolls sideways. A table of numbers you compare down a column stops being that the moment each row becomes a card. Resize the preview to check it.

The table

Tone

6 homes

Available homes in this development
AddressTypeSizeRoomsFloorRentStatus
Midgårdsvej 3, 1., 4Apartment42 m²1 room1 / 66.950 kr/md.Available
Midgårdsvej 3, 2., 19Apartment56 m²2 rooms2 / 68.400 kr/md.Available
Midgårdsvej 3, 3., 22Apartment63 m²2 rooms3 / 69.100 kr/md.Reserved
Midgårdsvej 3, 4., 27Apartment78 m²3 rooms4 / 611.200 kr/md.Available
Midgårdsvej 3, 5., 31Apartment84 m²3 rooms5 / 612.400 kr/md.Let
Midgårdsvej 3, 6., 34Penthouse104 m²4 rooms6 / 615.800 kr/md.Available from 1 Dec 2026

Props

packages/primitives/src/UnitsTable.astro
PropTypeRequired
unitsUnit[]yes
columns{ address: string; type: string; area: string; rooms: string; floor: string; price: string; status: string; }yes
tableLabel

Accessible name / caption for the table.

stringyes
allLabelstringyes
filterRoomsLabelstringyes
filterStatusLabelstringyes
roomFacetsFacet[]yes
statusFacetsFacet[]yes
countLabelOnestringyes
countLabelOtherstringyes
emptyLabelstringyes
Unit — referenced by a prop above
FieldTypeRequired
addressstringyes
typeLabelstringyes
areaLabelstringyes
roomsLabelstringyes
floorLabelstringyes
priceLabelstringyes
availability"available" | "reserved" | "let" | "coming-soon"yes
statusLabelstringyes
roomsKeystringyes
hrefstringyes
Facet — referenced by a prop above
FieldTypeRequired
keystringyes
labelstringyes