Sortable Table Web Component Demo

Progressive Enhancement

The component automatically enhances plain table headers by injecting buttons. You don't need to add buttons or links to your markup!

<table-sortable>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Charlie Brown</td>
        <td>35</td>
        <td>New York</td>
      </tr>
      <!-- more rows -->
    </tbody>
  </table>
</table-sortable>

Custom Sort Keys

Use the data-sort-value attribute to define custom sort values that differ from the displayed content.

<tr>
  <td data-sort-value="WIDGET-B">Widget B (Premium)</td>
  <td>WDG-002</td>
  <td data-sort-value="50">$50.00</td>
  <td data-sort-value="15">Low (15)</td>
</tr>

Hidden Sort Keys

Use a [data-sort-as] element to provide sort values that aren't displayed to users.

<td>
  John <span data-sort-as>Smith</span>
</td>

Grouped Tables

Use multiple <tbody> elements with data-table-sort-group attributes to maintain groupings while sorting.

<tbody>
  <tr data-table-sort-group="engineering">
    <td>Charlie Brown</td>
    <td>85</td>
    <td>Active</td>
  </tr>
</tbody>

Custom Labels (Localization)

Customize screen reader announcements using the label-sortable, label-ascending, and label-descending attributes. Perfect for localization. Note that label-ascending and label-descending will be prefixed by the column name.

<table-sortable
  label-sortable="Cliquer pour trier"
  label-ascending="trié croissant. Cliquer pour trier décroissant"
  label-descending="trié décroissant. Cliquer pour trier croissant">
  <table>
    <thead>
      <tr>
        <th>Nom</th>
        <th>Âge</th>
      </tr>
    </thead>
    <!-- ... -->
  </table>
</table-sortable>

Progressive Enhancement

The component uses pure progressive enhancement. Simply write plain <th> elements in your table headers, and the component automatically injects accessible <button> elements to make them sortable. You don't need to add any buttons or links manually.

All examples on this page demonstrate this approach - just plain <th> elements that get enhanced with sorting functionality.

Event Handling

Listen to the table-sortable:sort event to react to sorting changes.

element.addEventListener('table-sortable:sort', (event) => {
  const { column, direction, header } = event.detail;
  console.log(`Sorted by ${header.textContent}`);
});