Basic Table
Loading playground
Overview
BasicTable is a two-column key/value table. It renders as a semantic description list — a <dl> whose rows carry a <dt> label and a <dd> value — so label/value pairs are exposed to assistive technology rather than being presentational <div>s. The parent is a CSS Grid with auto 1fr columns, and each BasicTableRow uses grid-template-columns: subgrid so labels align across rows even when their widths vary.
The variant prop picks between two visual treatments: outlined (the default) wraps the list in a bordered box with dividers between rows, while plain drops the chrome and keeps consistent row spacing.
Each row exposes a label prop for the text-only case and a #label slot for the rich case (icons, badges). The default slot is the value cell.
The label column is sized to its content by default. Consumers can widen or clamp it via the public --basic-table-label-col custom property (e.g. a fixed track or clamp(...)); the value column always fills the remaining space.
TableOpeningHours and TableProductSpecifications use this primitive to render their rows.
Renamed in 2.5.0.
BasicTablewas previouslyDescriptionList, andBasicTableRowwasDescriptionListItem. Repoint imports to#ui-kit/components/BasicTable/BasicTable.vueand#ui-kit/components/BasicTable/BasicTableRow.vue. The public CSS surface (.basic-tableroot class, BEM classes) and the grid/subgrid layout are unchanged.
Key Business & UX Benefits
- Semantic
<dl>/<dt>/<dd>markup exposes each label/value pair to screen readers, so spec sheets and hours read as structured data rather than anonymous boxes. - Subgrid column alignment keeps labels lined up even when one row has a long label and the next has a short one, so the list reads as a single scannable column.
- Two variants cover the two common contexts: a bordered list for spec-style content (opening hours, product attributes) and a plain list for inline detail panels.
- Slot-based row content means rows can carry icons, badges, or formatted values (prices, dates, pill clusters) without a fork of the component.
Usage
Feature List
- Renders as a semantic description list (`<dl>` with `<dt>`/`<dd>` rows) for assistive technology
- Two variants (`outlined`, `plain`) cover bordered spec lists and plain inline detail panels
- CSS Grid subgrid keeps labels aligned across rows even when widths vary
- Label column width is overridable via the public `--basic-table-label-col` custom property
- `label` prop for text rows; `#label` slot for icons, badges, or rich label content
- Default slot is the value cell, so rows can render formatted prices, dates, or pill clusters
- Used by `TableOpeningHours` and `TableProductSpecifications` to render their rows
API Reference
BasicTable
| Prop | Default | Type |
|---|---|---|
variant | outlined | "plain" | "outlined"Visual treatment.
|
| Slot | Type |
|---|---|
default | any |
BasicTableRow
| Prop | Default | Type |
|---|---|---|
label | stringText-only shortcut for the label cell. Overridden by the |
| Slot | Type |
|---|---|
default | any |
label | any |
Related
TableOpeningHours: renders a weekly schedule with consecutive same-hours days grouped into a single row.TableProductSpecifications: renders typed, per-locale-formatted product specification rows with optional section grouping.
Changelog
Renamed from DescriptionList (and DescriptionListItem → BasicTableRow), now rendered as a semantic description list (<dl> with <dt>/<dd> rows) instead of presentational <div>s. The label column is overridable via the new public --basic-table-label-col custom property; the grid/subgrid layout and CSS surface (.basic-table class, BEM classes) are unchanged.
Show migration
- import DescriptionList from '#ui-kit/components/DescriptionList/DescriptionList.vue';
- import DescriptionListItem from '#ui-kit/components/DescriptionList/DescriptionListItem.vue';
+ import BasicTable from '#ui-kit/components/BasicTable/BasicTable.vue';
+ import BasicTableRow from '#ui-kit/components/BasicTable/BasicTableRow.vue';