Styling & Data Attributes

This is the shared reference for <dkl-volume-table> — the data-* attributes that drive its behaviour, the --dkl-vt-* tokens that style it, and the Light-DOM classes you can target. A component writes these for you; on a web component you set them directly.

Using this reference with a component

A component built in the admin renders its own <dkl-volume-table> and writes these values for you, so what applies depends on the kind of override.

Data attributes — No. The component sets every data-* itself. Adding them to your own markup has no effect on a component instance; they’re the configuration surface for the web component only.

CSS styling tokens — Yes. They’re custom properties that inherit through the light DOM, so they style a component instance exactly like a bare tag. The component’s editor just writes the matching tokens into a scoped <style> rule. Any token you want beyond what the editor exposes you can still set from your own CSS.

Data attributes

The attributes you set on the tag. The tiers, the variant’s price and the money format come from the carrier, so they aren’t listed.

data-component

string · default: none

The handle of a component built in the admin. Its columns, styling and text come with it.

data-discount-id

string · default: the first eligible volume discount

The discount’s metaobject handle; the discount- prefix is optional.

data-highlight-unlocked-tier

"true" / "false" · default: true

Whether the row the current quantity has reached gets the unlocked treatment.

data-show-outer-border

"true" / "false" · default: true

The border around the whole table.

data-show-row-borders

"true" / "false" · default: true

A line between each row.

data-show-column-borders

"true" / "false" · default: false

A line between each column. Off by default — a table this small reads better without.

CSS styling tokens

--dkl-vt-margin-top / --dkl-vt-margin-bottom

default: 0

Space above and below the table.

--dkl-vt-cell-padding-block / --dkl-vt-cell-padding-inline

default: 12px / 12px

Vertical and horizontal padding inside every header and body cell. The vertical one also sets the gap between the table and its message.

--dkl-vt-border-width

default: 1px

Every border that’s drawn. Which ones are drawn is decided by the three data-show-*-border switches above.

--dkl-vt-border-color

default: var(--dkl-color-border)

--dkl-vt-radius

default: var(--dkl-radius)

Table corners.

--dkl-vt-header-background

default: var(--dkl-color-accent)

--dkl-vt-header-color

default: #ffffff

--dkl-vt-background / --dkl-vt-text-color

default: var(--dkl-color-background) / var(--dkl-color-text)

A row at rest.

--dkl-vt-highlight-background / --dkl-vt-highlight-color

default: var(--dkl-color-background-soft) / var(--dkl-vt-text-color)

The row the current quantity has unlocked.

--dkl-vt-header-font-size

default: 13px (--dkl-vt-header-font-size-mobile, 12px, at ≤768px)

--dkl-vt-body-font-size

default: 14px (--dkl-vt-body-font-size-mobile, 13px, at ≤768px)

--dkl-vt-message-font-size

default: 13px (--dkl-vt-message-font-size-mobile, 12px, at ≤768px)

--dkl-vt-header-font-weight / --dkl-vt-highlight-font-weight

default: 600 / 600

The header row, and the unlocked row.

--dkl-vt-heading-font-family / --dkl-vt-body-font-family

default: inherit (→ --dkl-font-family)

The header, and everything else. Only renders if your theme loads that font.

Also reads the global brand tokens — see Styling.

Light-DOM classes

The whole table is light DOM, so every part is reachable from your own CSS.

Class	What it is
.dkl-volume-table__wrapper	The bordered, rounded box around the table
.dkl-volume-table__table	The <table> itself
.dkl-volume-table__th	A header cell
.dkl-volume-table__row	A tier row
.dkl-volume-table__row--active	The row the current quantity has unlocked
.dkl-volume-table__cell	A body cell
.dkl-volume-table__message	The optional message, with data-position="above" or "below"

Each row carries its tier as data: data-tier-index (-1 on the undiscounted row), data-tier-quantity, data-tier-discount-type and data-tier-discount-amount (the raw value — a percentage, or cents for a fixed amount). Cells are tagged data-cell="quantity", "savings" or "price".

Target a column

dkl-volume-table [data-cell='price'] {
  font-variant-numeric: tabular-nums;
}

Next steps

App blockBuild and place the table without code.

Web ComponentsPlace the tag by hand.