Skip to content
WovenUI

Data table

wu-data-table makes a wu-table sortable. The sort buttons and arrows come from the table; the kit script sorts the rows and sets aria-sort.

Class or attribute Effect
wu-table wu-data-table Root, on <table>. Header sort buttons sort the first <tbody>
wu-table-sort in a header cell Sort button, from the table component
aria-sort on a header cell Set by the script: ascending, then descending on the next click
data-sort-value on a cell Value to sort by instead of the cell text
aria-busy="true" Set while rows move; shows the progress cursor
wu-data-table-status Added by the script after the table: a visually hidden role="status" that announces each sort
animated Rows glide to their new place, opt-in

Default

Section titled “Default”

Click a column header to sort; click again to reverse.

Invoices
Contoso2 Mar$86.50
Fabrikam15 Jan$12,940.00
Northwind20 Feb$1,200.00
 
<table class="wu-table wu-data-table">
  <caption>Invoices</caption>
  <thead>
    <tr>
      <th scope="col" aria-sort="ascending"><button class="wu-table-sort" type="button">Customer</button></th>
      <th scope="col"><button class="wu-table-sort" type="button">Due</button></th>
      <th scope="col" class="wu-table-num"><button class="wu-table-sort" type="button">Amount</button></th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Contoso</td><td data-sort-value="2026-03-02">2 Mar</td><td class="wu-table-num" data-sort-value="86.5">$86.50</td></tr>
    <tr><td>Fabrikam</td><td data-sort-value="2026-01-15">15 Jan</td><td class="wu-table-num" data-sort-value="12940">$12,940.00</td></tr>
    <tr><td>Northwind</td><td data-sort-value="2026-02-20">20 Feb</td><td class="wu-table-num" data-sort-value="1200">$1,200.00</td></tr>
  </tbody>
</table>

Cells sort as numbers when both values are numbers (commas and spaces ignored), and as text otherwise, with numbers inside text compared by value. data-sort-value gives a cell a sortable value when its text is formatted, as with the dates and amounts above.

A detail row moves with the row before it.

Animation

Section titled “Animation”

With animated, rows glide to their new place through a view transition. Users with reduced motion get the sorted rows at once. wu-animated on an ancestor turns it on too.
Ana LopezOwner12
Ben OkaforEditor7
Chen WeiViewer3
Dana KimEditor21
 
<table class="wu-table wu-data-table animated striped">
  <thead>
    <tr>
      <th scope="col"><button class="wu-table-sort" type="button">Name</button></th>
      <th scope="col"><button class="wu-table-sort" type="button">Role</button></th>
      <th scope="col" class="wu-table-num"><button class="wu-table-sort" type="button">Projects</button></th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Ana Lopez</td><td>Owner</td><td class="wu-table-num">12</td></tr>
    <tr><td>Ben Okafor</td><td>Editor</td><td class="wu-table-num">7</td></tr>
    <tr><td>Chen Wei</td><td>Viewer</td><td class="wu-table-num">3</td></tr>
    <tr><td>Dana Kim</td><td>Editor</td><td class="wu-table-num">21</td></tr>
  </tbody>
</table>

Right to left

Section titled “Right to left”

In a right-to-left page the first column sits on the right, numbers align to the left edge, and the sort buttons work the same.
مؤسسة النور$86.50
شركة الأفق$12,940.00
مجموعة الرياض$1,200.00
 
<table class="wu-table wu-data-table">
  <thead>
    <tr>
      <th scope="col" aria-sort="ascending"><button class="wu-table-sort" type="button">العميل</button></th>
      <th scope="col" class="wu-table-num"><button class="wu-table-sort" type="button">المبلغ</button></th>
    </tr>
  </thead>
  <tbody>
    <tr><td>مؤسسة النور</td><td class="wu-table-num" data-sort-value="86.5">$86.50</td></tr>
    <tr><td>شركة الأفق</td><td class="wu-table-num" data-sort-value="12940">$12,940.00</td></tr>
    <tr><td>مجموعة الرياض</td><td class="wu-table-num" data-sort-value="1200">$1,200.00</td></tr>
  </tbody>
</table>

Script

Section titled “Script”

The drop-in script and the ES module start every wu-data-table on the page. For a table added later, call init() on its container. sortTable(table, th) sorts by a header cell from code, as a click would:

import { init, sortTable } from '@wovenui/components/js';


init(document.getElementById('report'));


const table = document.querySelector('#report .wu-data-table');
sortTable(table, table.tHead.rows[0].cells[2]);

See JavaScript.

Accessibility

Section titled “Accessibility”
  • Sorting uses real buttons in the header cells, so they work from the keyboard.
  • aria-sort on the sorted column tells screen readers the order; the arrows show it visually.
  • Each sort is announced politely, for example “Sorted by Amount, descending”. The words are in English.
  • Use <th scope="col"> for headers and a <caption> when the table needs a name.

Load only the data table

Section titled “Load only the data table”
@use "@wovenui/components/data-table";

The data table needs the table. The entry loads both; in the bundle, switching table off while data-table is on stops the compile with an error.