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