Table
Classes for the Table component.
Overview
The Table component is one of the most complex components in VulcanUI, featuring a hierarchical structure that mirrors the actual HTML DOM. This documentation provides a comprehensive guide to all available BEM classes for the Table styling and customization.
The Table component follows a strict hierarchical structure with the root container ds-table__viewport
containing all sub-elements. Each level serves a specific purpose and can be styled independently.
<div class="ds-table__viewport">
<!-- All table content nested here -->
</div>

Class hierarchy
The hierarchical class structure is as follows. Modifiers are in parenthesis.
* ds-table__viewport (--sticky-footer)
* ├── ds-table__toolbar
* │ ├── ds-table__toolbar-actions
* │ └── ds-table__search (--active)
* │ ├── ds-table__search-icon
* │ └── ds-table__search-input (--active)
* ├── ds-table__wrapper
* │ └── ds-table
* │ ├── ds-table__head (--sortable --selectable --actions)
* │ │ └── ds-table__row
* │ │ └── ds-table__cell (--sortable --sorted-{value} --centered --right)
* │ │ ├── ds-table__text
* │ │ └── ds-table__cell-checkbox (--checked --disabled)
* │ └── ds-table__body (--loading --empty --pinned)
* │ └── ds-table__row (--selected --pinned --expanded --new)
* │ └── ds-table__cell (--centered --right --editable --inactive)
* │ ├── ds-table__text
* │ ├── ds-table__cell-checkbox (--checked --disabled)
* │ └── ds-table__cell-actions (--visible)
* │ └── ds-table__cell-actions-button (--disabled)
* └── ds-table__controls (--sticky)
* ├── ds-table__pagination
* ├── ds-table__pagination-button (--disabled --prev --next)
The below images map the classes of the Table by number so, when using them, you know which part to target specifically with your custom CSS stylesheet:
Table classes
Outer
ds-table__viewport
ds-table__toolbar
ds-table__wrapper
ds-table__controls

Toolbar
The parent class for the toolbar is ds-table__toolbar
.
ds-table__toolbar-actions
ds-table__filters
ds-table__search
ds-table__search-icon
ds-table__search-input

Table wrapper
The parent class for the table content is ds-table__wrapper
ds-table
ds-table__head
ds-table__body

Table head
The parent class for the table content is ds-table__head
ds-table__row
ds-table__cell
ds-table__text
ds-table__cell-checkbox

Table body
The parent class for the table content is ds-table__body
ds-table__row
ds-table__cell
ds-table__text
ds-table__cell-checkbox
ds-table__cell-actions
ds-table__cell-actions-button
(This is the actual HTML<button>
tag in the actions)

Controls
The parent class for the table content is ds-table__controls
.
ds-table__pagination
ds-table__pagination-button

Rendered DOM
This is the Table raw HTML DOM as loaded in the application, with all classes seen in this section:
Last updated
Was this helpful?