Table

Table

Native HTML table styling for @bnotk/dsx.

Live Preview

Import

<link rel="stylesheet" href="@bnotk/dsx/css/table.css">

Or use the full bundle:

<link rel="stylesheet" href="@bnotk/dsx/css/index.css">

Classes

Class	Purpose
.dsx-table	Base table styling
.dsx-table__row--selected	Highlighted row state
.dsx-table__th--sortable	Sortable column header styling
.dsx-table__cell--right	Right-aligns numeric cells
.dsx-table--compact	Reduces cell padding
.dsx-table--bordered	Adds borders to all cells

States and behavior

• Headers use var(--ds2-color-grey-1) with a bottom border in var(--ds2-color-grey-2).
• Body cells use a lighter bottom border in var(--ds2-color-grey-6).
• Row hover fills data cells with var(--ds2-color-grey-1).
• .dsx-table__row--selected uses var(--ds2-color-highlight-light).
• Sortable headers add a muted indicator by default and show ▲ / ▼ when aria-sort is ascending or descending.

Example

<table class="dsx-table">
  <thead>
    <tr>
      <th scope="col" class="dsx-table__th--sortable" aria-sort="ascending">Name</th>
      <th scope="col">Owner</th>
    </tr>
  </thead>
</table>

Accessibility notes

• Use semantic <table>, <caption>, <thead>, <tbody>, and <th scope> markup.
• Keep aria-sort in sync with the current sort direction.
• Do not rely on row highlight color alone to indicate selection.
• Preserve keyboard and screen-reader access for any interactive sorting behavior you add with JavaScript.