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

1. ds-table__viewport

2. ds-table__toolbar

3. ds-table__wrapper

4. ds-table__controls

Toolbar

The parent class for the toolbar is ds-table__toolbar.

1. ds-table__toolbar-actions

2. ds-table__filters

   1. ds-table__search

      1. ds-table__search-icon

      2. ds-table__search-input

Table wrapper

The parent class for the table content is ds-table__wrapper

1. ds-table

   1. ds-table__head

   2. ds-table__body

Table head

The parent class for the table content is ds-table__head

1. ds-table__row

   1. ds-table__cell

      1. ds-table__text

      2. ds-table__cell-checkbox

Table body

The parent class for the table content is ds-table__body

1. ds-table__row

   1. ds-table__cell

      1. ds-table__text

      2. ds-table__cell-checkbox

      3. ds-table__cell-actions

         1. 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.

1. ds-table__pagination

2. 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:

Table component HTML DOM

<div class="ds-table__viewport">
  <div class="ds-table__toolbar">
    <div>
      <h3>1 Device</h3>
      <div class="ds-table__toolbar-actions"></div>
    </div>
    <div class="ds-table__filters">
      <div class="ds-table__search">
        <div class="ds-table__search-icon">
          <i class="fa fa-search" role="icon"></i>
        </div>
        <input class="ds-table__search-input" type="search" placeholder="Search" value="">
      </div>
      <button type="button" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-filter" role="icon"></i>
      </button>
      <button type="button">
        <i class="fas fa-grid-horizontal" role="icon"></i>
      </button>
    </div>
  </div>
  <div class="ds-table__wrapper">
    <table class="ds-table">
      <thead class="ds-table__head ds-table__head--sortable ds-table__head--selectable ds-table__head--actions">
        <tr class="ds-table__row">
          <th class="ds-table__cell" role="columnheader">
            <input class="ds-table__cell-checkbox" type="checkbox">
          </th>
          <th class="ds-table__cell ds-table__cell--sortable">
            <span class="ds-table__text"></span>
          </th>
          <th class="ds-table__cell ds-table__cell--sortable">
            <span class="ds-table__text">Name</span>
          </th>
          <th class="ds-table__cell ds-table__cell--sortable">
            <span class="ds-table__text"></span>
          </th>
          <th class="ds-table__cell ds-table__cell--sortable">
            <span class="ds-table__text">API label</span>
          </th>
          <th class="ds-table__cell ds-table__cell--sortable">
            <span class="ds-table__text">Organization</span>
          </th>
          <th class="ds-table__cell">
            <button type="button" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-columns" role="icon"></i>
            </button>
          </th>
        </tr>
      </thead>
      <tbody class="ds-table__body">
        <tr class="ds-table__row" role="row">
          <td class="ds-table__cell" role="cell">
            <input class="ds-table__cell-checkbox" type="checkbox">
          </td>
          <td class="ds-table__cell">
            <i class="fa fa-microchip" role="icon"></i>
          </td>
          <td class="ds-table__cell">
            <a href="/app/devices/68a2383d4bc5956b8d5f0b20">Test</a>
          </td>
          <td class="ds-table__cell">
            <div role="status"></div>
          </td>
          <td class="ds-table__cell">
            <span>test</span>
          </td>
          <td class="ds-table__cell">
            <span>Org 1</span>
          </td>
          <td class="ds-table__cell">
            <div class="ds-table__cell-actions ds-table__cell-actions--visible">
              <button type="button" class="ds-table__cell-actions-button">
                <i class="fa fa-sitemap" role="icon"></i>
              </button>
              <button type="button" class="ds-table__cell-actions-button">
                <i class="fa fa-trash" role="icon"></i>
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="ds-table__controls">
    <div class="ds-table__pagination">
      <p>Devices per page</p>
      <button type="button" aria-haspopup="true" aria-expanded="false">
        <span>10</span>
        <i class="fa fa-caret-down" role="icon"></i>
      </button>
    </div>
    <div aria-label="pagination info">
      <p aria-label="from number value">1</p>
      -
      <p aria-label="to number value">1</p>
      of
      <p aria-label="total table number value">1</p>
    </div>
    <div>
      <button aria-label="show previous page" class="ds-table__pagination-button ds-table__pagination-button--disabled ds-table__pagination-button--prev" disabled>
        <i class="fa fa-chevron-left" role="icon"></i>
      </button>
      <button aria-label="show next page" class="ds-table__pagination-button ds-table__pagination-button--disabled ds-table__pagination-button--next" disabled>
        <i class="fa fa-chevron-right" role="icon"></i>
      </button>
    </div>
  </div>
</div>