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
6 homes
| Address | Type | Size | Rooms | Floor | Rent | Status |
|---|---|---|---|---|---|---|
| Midgårdsvej 3, 1., 4 | Apartment | 42 m² | 1 room | 1 / 6 | 6.950 kr/md. | Available |
| Midgårdsvej 3, 2., 19 | Apartment | 56 m² | 2 rooms | 2 / 6 | 8.400 kr/md. | Available |
| Midgårdsvej 3, 3., 22 | Apartment | 63 m² | 2 rooms | 3 / 6 | 9.100 kr/md. | Reserved |
| Midgårdsvej 3, 4., 27 | Apartment | 78 m² | 3 rooms | 4 / 6 | 11.200 kr/md. | Available |
| Midgårdsvej 3, 5., 31 | Apartment | 84 m² | 3 rooms | 5 / 6 | 12.400 kr/md. | Let |
| Midgårdsvej 3, 6., 34 | Penthouse | 104 m² | 4 rooms | 6 / 6 | 15.800 kr/md. | Available from 1 Dec 2026 |
No homes match those filters.
Props
| Prop | Type | Required |
|---|---|---|
| units | Unit[] | yes |
| columns | { address: string; type: string; area: string; rooms: string; floor: string; price: string; status: string; } | yes |
| tableLabel Accessible name / caption for the table. | string | yes |
| allLabel | string | yes |
| filterRoomsLabel | string | yes |
| filterStatusLabel | string | yes |
| roomFacets | Facet[] | yes |
| statusFacets | Facet[] | yes |
| countLabelOne | string | yes |
| countLabelOther | string | yes |
| emptyLabel | string | yes |
| Field | Type | Required |
|---|---|---|
| address | string | yes |
| typeLabel | string | yes |
| areaLabel | string | yes |
| roomsLabel | string | yes |
| floorLabel | string | yes |
| priceLabel | string | yes |
| availability | "available" | "reserved" | "let" | "coming-soon" | yes |
| statusLabel | string | yes |
| roomsKey | string | yes |
| href | string | yes |
| Field | Type | Required |
|---|---|---|
| key | string | yes |
| label | string | yes |