Skip to main content

Tables

Data table styles with responsive scrolling and consistent cell styling.

Example table

Users
Name , sorted ascending Email Joined Updated Actions
Alice Johnson alice@example.com about 2 months ago about 2 months ago Edit
Bob Smith bob@example.com about 2 months ago about 2 months ago Edit
Carol Williams carol@example.com about 2 months ago about 2 months ago Edit
David Brown david@example.com about 2 months ago about 2 months ago Edit
Eve Davis eve@example.com about 2 months ago about 2 months ago Edit
Frank Miller frank@example.com about 2 months ago about 2 months ago Edit
Grace Lee grace@example.com about 2 months ago about 2 months ago Edit
Henry Wilson henry@example.com about 2 months ago about 2 months ago Edit
Ivy Chen ivy@example.com about 2 months ago about 2 months ago Edit
Jack Taylor jack@example.com about 2 months ago about 2 months ago Edit 
<div class="l-ui-table-container">
  <table class="l-ui-table">
    <caption>Users</caption>
    <thead class="l-ui-table__header">
      <tr>
        <th class="l-ui-table__header-cell l-ui-table__header-cell--sortable"
            scope="col" aria-sort="ascending">
          <a href="?sort=name" class="l-ui-table__sort-link">
            Name
            <span class="l-ui-table__sort-indicator" aria-hidden="true">▲</span>
            <span class="l-ui-sr-only">, sorted ascending</span>
          </a>
        </th>
        <th class="l-ui-table__header-cell l-ui-table__header-cell--sortable"
            scope="col" aria-sort="none">
          <a href="?sort=email" class="l-ui-table__sort-link">Email</a>
        </th>
        <th class="l-ui-table__header-cell l-ui-table__header-cell--action" scope="col">Actions</th>
      </tr>
    </thead>
    <tbody class="l-ui-table__body">
      <tr>
        <th class="l-ui-table__cell l-ui-table__cell--primary" scope="row"><a href="#">Alice</a></th>
        <td class="l-ui-table__cell">alice@example.com</td>
        <td class="l-ui-table__cell l-ui-table__cell--action">
          <a class="l-ui-button l-ui-button--outline l-ui-button--small" href="#">Edit</a>
          <button class="l-ui-button l-ui-button--outline-danger l-ui-button--small">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS classes

Table CSS classes
Class Description
l-ui-table-container Scrollable container for responsive tables
l-ui-table Base table styling
l-ui-table__header Table header section
l-ui-table__header-cell Header cell styling
l-ui-table__body Table body section
l-ui-table__cell Standard data cell
l-ui-table__cell l-ui-table__cell--primary Primary cell (first column, links)
l-ui-table__header-cell l-ui-table__header-cell--action Right-aligned header cell for action columns
l-ui-table__cell l-ui-table__cell--action Actions cell (right-aligned)
l-ui-table__action--danger Danger styling for destructive actions (used on links or buttons within action cells)
l-ui-table__header-cell--sortable Header cell containing a sort link (applied automatically by l_ui_sort_link)
l-ui-table__sort-link Styled sort link inside a sortable header cell
l-ui-table__sort-indicator Sort direction indicator (▲/▼) shown next to the active sort link