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
Uma Patel uma@example.com 4 months ago 4 months ago Edit
Victor Hall victor@example.com 4 months ago 4 months ago Edit
Wendy Young wendy@example.com 4 months ago 4 months ago Edit
Xavier King xavier@example.com 4 months ago 4 months ago Edit
Yara Scott yara@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
Uma Patel uma@example.com
Edit
Victor Hall victor@example.com
Edit
Wendy Young wendy@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
Uma Patel uma@example.com 11 Apr 2026, 10:28 11 Apr 2026, 10:28
Edit
Victor Hall victor@example.com 11 Apr 2026, 10:28 11 Apr 2026, 10:28
Edit
Wendy Young wendy@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
Uma Patel uma@example.com 11 Apr 2026, 10:28 11 Apr 2026, 10:28
Victor Hall victor@example.com 11 Apr 2026, 10:28 11 Apr 2026, 10:28
Wendy Young wendy@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)