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.

Permanent since ADR 0041. It was a stopgap for EstateTool, which is dropped. It is now the complete, accessible way to browse a property's units, and the planned building viewer shares its selection. Today it has no search, no sorting and no pagination.

Ten rows, then "show all". Past ten matching rows the rest are hidden behind one button that names the full count (ADR 0023, amended 2026-10-29). Filters count every match, not only the shown ten. After the button is pressed, every row stays shown, and focus moves to the first new row. Without JS every row shows and the button doesn't.

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

Past the row limit

Tone

24 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
Midgårdsvej 3, 1., 104Apartment42 m²1 room1 / 66.950 kr/md.Available
Midgårdsvej 3, 2., 119Apartment56 m²2 rooms2 / 68.400 kr/md.Available
Midgårdsvej 3, 3., 122Apartment63 m²2 rooms3 / 69.100 kr/md.Reserved
Midgårdsvej 3, 4., 127Apartment78 m²3 rooms4 / 611.200 kr/md.Available
Midgårdsvej 3, 5., 131Apartment84 m²3 rooms5 / 612.400 kr/md.Let
Midgårdsvej 3, 6., 134Penthouse104 m²4 rooms6 / 615.800 kr/md.Available from 1 Dec 2026
Midgårdsvej 3, 1., 204Apartment42 m²1 room1 / 66.950 kr/md.Available
Midgårdsvej 3, 2., 219Apartment56 m²2 rooms2 / 68.400 kr/md.Available
Midgårdsvej 3, 3., 222Apartment63 m²2 rooms3 / 69.100 kr/md.Reserved
Midgårdsvej 3, 4., 227Apartment78 m²3 rooms4 / 611.200 kr/md.Available
Midgårdsvej 3, 5., 231Apartment84 m²3 rooms5 / 612.400 kr/md.Let
Midgårdsvej 3, 6., 234Penthouse104 m²4 rooms6 / 615.800 kr/md.Available from 1 Dec 2026
Midgårdsvej 3, 1., 304Apartment42 m²1 room1 / 66.950 kr/md.Available
Midgårdsvej 3, 2., 319Apartment56 m²2 rooms2 / 68.400 kr/md.Available
Midgårdsvej 3, 3., 322Apartment63 m²2 rooms3 / 69.100 kr/md.Reserved
Midgårdsvej 3, 4., 327Apartment78 m²3 rooms4 / 611.200 kr/md.Available
Midgårdsvej 3, 5., 331Apartment84 m²3 rooms5 / 612.400 kr/md.Let
Midgårdsvej 3, 6., 334Penthouse104 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
showAllLabel

"Show all {count} homes". The button only shows above the row limit, so the count is never one and the template needs no singular.

stringyes
showInModelLabel

The row action's label; the column renders only with it (ADR 0041).

string—
Unit — referenced by a prop above
FieldTypeRequired
addressstringyes
typeLabelstringyes
areaLabelstringyes
roomsLabelstringyes
floorLabelstringyes
priceLabelstringyes
availability"available" | "reserved" | "let" | "coming-soon"yes
statusLabelstringyes
roomsKeystringyes
hrefstringyes
ref

The drawing reference, when the building has a model (ADR 0041).

string—
Facet — referenced by a prop above
FieldTypeRequired
keystringyes
labelstringyes