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
Karen White karen@example.com about 2 months ago about 2 months ago Edit
Leo Martinez leo@example.com about 2 months ago about 2 months ago Edit
Mia Anderson mia@example.com about 2 months ago about 2 months ago Edit
Noah Thomas noah@example.com about 2 months ago about 2 months ago Edit
Olivia Garcia olivia@example.com about 2 months ago about 2 months ago Edit
Paul Robinson paul@example.com about 2 months ago about 2 months ago Edit
Quinn Harris quinn@example.com about 2 months ago about 2 months ago Edit
Ruby Clark ruby@example.com about 2 months ago about 2 months ago Edit
Sam Lewis sam@example.com about 2 months ago about 2 months ago Edit
Tina Walker tina@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