LightningWeb.Components.Table (Lightning v2.14.14-pre1)

A collection of composable table components for building consistent, flexible tables across the Lightning application.

This module provides a set of table primitives that can be composed together to create tables with consistent styling, sorting capabilities, and pagination support. The components are designed to be flexible while maintaining a unified look and feel.

Features

Consistent styling with proper spacing, borders, and hover states
Built-in support for pagination
Sortable columns with visual indicators
Flexible cell content handling
Support for header, body, and footer sections
Responsive design with proper overflow handling

Example

<.table page={@page} url={@pagination_path}>
  <:header>
    <.tr>
      <.th sortable={true} sort_by="name" active={@sort_key == "name"}>
        Name
      </.th>
      <.th>Email</.th>
    </.tr>
  </:header>
  <:body>
    <%= for user <- @users do %>
      <.tr>
        <.td>{user.name}</.td>
        <.td>{user.email}</.td>
      </.tr>
    <% end %>
  </:body>
</.table>

Summary

Functions

empty_state(assigns)

table(assigns)

Renders a table container with optional pagination.

td(assigns)

Renders a table data cell with consistent styling and spacing.

th(assigns)

Renders a table header cell with optional sorting capabilities.

tr(assigns)

Renders a table row with hover effects and optional click handling.

Functions

empty_state(assigns)

Attributes

icon (:string) - Defaults to "hero-plus-circle".
message (:string) (required)
button_text (:string) - Defaults to nil.
button_id (:string) - Defaults to nil.
button_click (:any) - Defaults to nil.
button_disabled (:boolean) - Defaults to false.
button_target (:any) - Defaults to nil.
button_action_value (:any) - Defaults to nil.
interactive (:boolean) - Defaults to true.
Global attributes are accepted.

table(assigns)

Renders a table container with optional pagination.

Attributes

:page - Optional map containing pagination information
:url - Optional URL or function for pagination links
:id - Optional HTML id attribute
:class - Optional additional CSS classes

Slots

:header - Content for the table header (thead)
:body - Content for the table body (tbody)
:footer - Optional content for the table footer (tfoot)

Example

<.table page={@page} url={@pagination_path}>
  <:header>
    <.tr>
      <.th>Name</.th>
      <.th>Email</.th>
    </.tr>
  </:header>
  <:body>
    <%= for user <- @users do %>
      <.tr>
        <.td>{user.name}</.td>
        <.td>{user.email}</.td>
      </.tr>
    <% end %>
  </:body>
</.table>

Attributes

class (:string) - Defaults to nil.
page (:map) - Defaults to nil.
url (:any) - Defaults to nil.
id (:string) - Defaults to nil.
divide (:boolean) - Defaults to true.

Slots

header
body
footer
pagination_actions

td(assigns)

Renders a table data cell with consistent styling and spacing.

Attributes

:class - Optional additional CSS classes
:id - Optional HTML id attribute
:colspan - Optional number of columns to span
:rowspan - Optional number of rows to span

Slots

:inner_block - Required content for the data cell

Example

<.td class="wrap-break-word max-w-[25rem]">
  {user.name}
</.td>

Attributes

class (:string) - Defaults to nil.
id (:string) - Defaults to nil.
Global attributes are accepted. Supports all globals plus: ["colspan", "rowspan"].

Slots

inner_block (required)

th(assigns)

Renders a table header cell with optional sorting capabilities.

Attributes

:class - Optional additional CSS classes
:id - Optional HTML id attribute
:scope - HTML scope attribute (default: "col")
:colspan - Optional number of columns to span
:sortable - Whether the column is sortable (default: false)
:sort_by - The field to sort by when clicked
:active - Whether this column is currently being sorted
:sort_direction - Current sort direction ("asc" or "desc")
:phx_click - Phoenix LiveView click event (default: "sort")
:phx_target - Target for the click event

Slots

:inner_block - Required content for the header cell

Example

<.th
  sortable={true}
  sort_by="name"
  active={@sort_key == "name"}
  sort_direction={@sort_direction}
  phx-target={@myself}
>
  Name
</.th>

Attributes

class (:string) - Defaults to nil.
id (:string) - Defaults to nil.
scope (:string) - Defaults to "col".
colspan (:integer) - Defaults to nil.
sortable (:boolean) - Defaults to false.
sort_by (:string) - Defaults to nil.
active (:boolean) - Defaults to false.
sort_direction (:string) - Defaults to nil.
phx_click (:string) - Defaults to "sort".
phx_target (:any) - Defaults to nil.

Slots

inner_block (required)

tr(assigns)

Renders a table row with hover effects and optional click handling.

Attributes

:class - Optional additional CSS classes
:id - Optional HTML id attribute
:onclick - Optional Phoenix LiveView click event handler

Slots

:inner_block - Required content for the table row

Example

<.tr id={"user-123"} onclick={JS.navigate(~p"/users/123")}>
  <.td>{user.name}</.td>
  <.td>{user.email}</.td>
</.tr>

Attributes

class (:string) - Defaults to nil.
id (:string) - Defaults to nil.
onclick (:any) - Defaults to nil.

Slots

inner_block (required)