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 4 months ago 4 months ago Edit
Bob Smith bob@example.com 4 months ago 4 months ago Edit
Carol Williams carol@example.com 4 months ago 4 months ago Edit
David Brown david@example.com 4 months ago 4 months ago Edit
Eve Davis eve@example.com 4 months ago 4 months ago Edit
Frank Miller frank@example.com 4 months ago 4 months ago Edit
Grace Lee grace@example.com 4 months ago 4 months ago Edit
Henry Wilson henry@example.com 4 months ago 4 months ago Edit
Ivy Chen ivy@example.com 4 months ago 4 months ago Edit
Jack Taylor jack@example.com 4 months ago 4 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>

Row actions as a popover menu

For several actions per row, pair the actions cell with l_ui_popover instead of separate buttons. Use the l-ui-popover__menu and l-ui-popover__menu-item classes for the list, and give the icon-only trigger an aria-label.

Users with a popover action menu
Name Email Actions
Alice Johnson alice@example.com
Edit
Bob Smith bob@example.com
Edit
Carol Williams carol@example.com
Edit 
<td class="l-ui-table__cell l-ui-table__cell--action">
  <%= l_ui_popover(align: :end) do |p| %>
    <% p.trigger(class: "l-ui-button l-ui-button--outline l-ui-button--icon l-ui-button--small",
                 "aria-label" => "Actions for #{user.name}") do %>
      <%= image_tag "layered_ui/icon_more.svg", alt: "",
            class: "l-ui-icon l-ui-icon--sm", aria: { hidden: true } %>
    <% end %>
    <div class="l-ui-popover__menu">
      <%= link_to "Edit", edit_user_path(user), class: "l-ui-popover__menu-item" %>
      <hr class="l-ui-popover__menu-divider">
      <%= button_to "Delete", user_path(user), method: :delete,
            class: "l-ui-popover__menu-item l-ui-popover__menu-item--danger" %>
    </div>
  <% end %>
</td>

Floating actions column

Add l-ui-table--floating-actions to the table to pin the action cells to the right-hand edge of the scroll container. As the table scrolls horizontally, the actions stay visible and the content passing underneath fades out under their leading edge. Scroll the example below to see it.

Users with a floating actions column
Name Email Created Updated Actions
Alice Johnson alice@example.com 11 Apr 2026, 10:28 11 Apr 2026, 10:28
Edit
Bob Smith bob@example.com 11 Apr 2026, 10:28 11 Apr 2026, 10:28
Edit
Carol Williams carol@example.com 11 Apr 2026, 10:28 11 Apr 2026, 10:28
Edit 
<div class="l-ui-table-container">
  <table class="l-ui-table l-ui-table--floating-actions">
    <caption class="l-ui-sr-only">Users with a floating actions column</caption>
    <thead class="l-ui-table__header">
      ...
      <th class="l-ui-table__header-cell l-ui-table__header-cell--action" scope="col">Actions</th>
    </thead>
    <tbody class="l-ui-table__body">
      <tr>
        ...
        <td class="l-ui-table__cell l-ui-table__cell--action">...</td>
      </tr>
    </tbody>
  </table>
</div>

Horizontal scroll hint

Wrap the table container in l-ui-scroll-hint wired to the l-ui--scroll-hint controller to fade the clipped edge while more columns are available in that direction - useful on small screens where the scrollbar is hidden until the user scrolls. The fades update as the user scrolls and disappear when the table fits. The l_ui_table helper adds this wrapper automatically.

Users in a scroll-hinted container
Name Email Created Updated
Alice Johnson alice@example.com 11 Apr 2026, 10:28 11 Apr 2026, 10:28
Bob Smith bob@example.com 11 Apr 2026, 10:28 11 Apr 2026, 10:28
Carol Williams carol@example.com 11 Apr 2026, 10:28 11 Apr 2026, 10:28 
<div class="l-ui-scroll-hint" data-controller="l-ui--scroll-hint">
  <div class="l-ui-table-container" data-l-ui--scroll-hint-target="scroller">
    <table class="l-ui-table">
      ...
    </table>
  </div>
</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--floating-actions Table modifier that pins the action cells to the right-hand edge of the scroll container during horizontal scrolling
l-ui-scroll-hint Wrapper around a horizontal scroller that fades the clipped edge while more content is available (paired with the l-ui--scroll-hint controller)
l-ui-scroll-hint--left, l-ui-scroll-hint--right Show the fade on that edge (toggled automatically by the controller)
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
l-ui-popover__menu List of actions inside a popover (see Popovers)