Table Opening Hours
Loading playground
Overview
TableOpeningHours renders an OpeningHours schedule as a BasicTable. It groups consecutive weekdays that share the same opening windows into a single row, so a Monday-to-Friday 09:00-18:00 schedule shows as one row labeled Monday - Friday rather than five identical lines. Days that share the same hours but aren't consecutive (e.g. Monday and Wednesday) join with & into the same label (Monday & Wednesday).
Closed days collapse into a row whose value cell reads Closed (or its localized equivalent via the openingHoursWeeklyTable.closed i18n key). Window times go through $timeOfDay so wall-clock formatting respects the schedule's IANA timezone, and weekday names come from Intl.DateTimeFormat in the active locale.
The variant prop (outlined default, or plain) is forwarded to the underlying BasicTable. Use this in the detail panel under an OpeningStatus summary, or inside a location-detail layout that needs the full weekly view.
Moved in 2.5.0.
TableOpeningHourswas previouslyOpeningHoursWeeklyTableinui-kit. It now lives in@laioutr-core/ui(built on theBasicTableprimitive) and gains thevariantprop. Repoint imports to#ui/components/TableOpeningHours/TableOpeningHours.vue.
Key Business & UX Benefits
- Grouping consecutive same-hours days into one row matches how store signage usually presents hours, so the table reads as the same information shoppers are used to seeing on the door.
- Closed days stay on the list (rather than disappearing), so shoppers can confirm at a glance that Sunday actually is closed and the data isn't simply missing.
- Wall-clock times respect the schedule's timezone, so a shopper in a different timezone sees the store's hours, not their own offset.
Usage
Feature List
- Consecutive weekdays with identical windows collapse into one row labeled `Start - End` (e.g. `Monday - Friday`)
- Non-consecutive days that share the same windows join with `&` (e.g. `Monday & Wednesday`)
- Closed days stay visible as a row with a localized `Closed` value so the schedule never looks incomplete
- Times rendered via `$timeOfDay` in the schedule's IANA timezone; weekday names via `Intl.DateTimeFormat` in the active locale
- Multiple windows per day join with `, ` so split shifts (e.g. lunch closing) render cleanly
- `outlined` / `plain` variant forwarded to the underlying `BasicTable`
API Reference
| Prop | Default | Type |
|---|---|---|
openingHoursrequired | OpeningHours { timeZone, schedule, exceptions } | |
variant | outlined | "outlined" | "plain"Visual treatment of the underlying table — |
Related
OpeningStatus: the open/closed summary that usually appears above this table.BasicTable: the underlying two-column primitive.TableProductSpecifications: the sibling table for product specification rows.OpeningHourstype: the shape the table consumes.
Changelog
Moved out of UI Kit into @laioutr-core/ui (renamed from OpeningHoursWeeklyTable), now built on the BasicTable primitive and gaining an outlined / plain variant. The weekday-grouping behavior is unchanged.
Show migration
- import OpeningHoursWeeklyTable from '#ui-kit/components/OpeningHoursWeeklyTable/OpeningHoursWeeklyTable.vue';
+ import TableOpeningHours from '#ui/components/TableOpeningHours/TableOpeningHours.vue';
Location Finder
Store-locator layout combining search, filters, a list panel, and a Google Maps view. Side-by-side at desktop, tabbed at mobile, with a selected-location bottom sheet over the map.
Marketplace
The Marketplace package provides components and page templates for platform and marketplace business models with multi-vendor support, discovery-driven navigation, and scalable listing structures.