SutraUI.Table (Sutra UI v0.3.0)

View Source

Responsive table components for displaying structured data.

Provides both a simple wrapper for manual table markup and a data-driven approach for generating tables from lists. Use the wrapper for full control, or the data-driven version for rapid development.

Examples

# Simple wrapper - full control over markup
<.table>
  <thead>
    <tr>
      <th>Invoice</th>
      <th>Status</th>
      <th class="text-right">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr :for={invoice <- @invoices}>
      <td>{invoice.number}</td>
      <td><.badge>{invoice.status}</.badge></td>
      <td class="text-right">{invoice.amount}</td>
    </tr>
  </tbody>
</.table>

# Data-driven table
<.data_table rows={@users}>
  <:col :let={user} label="Name">{user.name}</:col>
  <:col :let={user} label="Email">{user.email}</:col>
  <:col :let={user} label="Role">
    <.badge variant={role_variant(user.role)}>{user.role}</.badge>
  </:col>
  <:action :let={user}>
    <.button size="sm" variant="ghost" navigate={~p"/users/#{user.id}"}>
      View
    </.button>
  </:action>
</.data_table>

# With caption and footer
<.data_table rows={@transactions}>
  <:caption>Recent Transactions</:caption>
  <:col :let={t} label="Date">{format_date(t.date)}</:col>
  <:col :let={t} label="Description">{t.description}</:col>
  <:col :let={t} label="Amount" class="text-right">
    {format_currency(t.amount)}
  </:col>
  <:footer>
    <td colspan="2">Total</td>
    <td class="text-right">{format_currency(@total)}</td>
  </:footer>
</.data_table>

Components

ComponentDescription
table/1Simple wrapper with table styling
data_table/1Data-driven table generator

Data Table Slots

SlotRequiredDescription
colYesColumn definitions with :let binding
actionNoRow action buttons (right-aligned)
captionNoTable caption/title
footerNoFooter row content

Column Slot Attributes

AttributeTypeDescription
labelstringRequired. Column header text
classstringCSS classes for header and cells

Action Slot Attributes

AttributeTypeDescription
labelstringOptional header text for actions column

When to Use Each

ComponentUse When
table/1Complex layouts, colspan/rowspan, custom <thead>/<tfoot>
data_table/1Simple row iteration, consistent columns, quick prototyping

Styling

Tables use CSS classes from sutra_ui.css:

  • .table - Base table styling
  • Column alignment via Tailwind (text-right, text-center)
  • Responsive overflow handled by wrapper

Large Data Sets

For tables with many rows, consider using SutraUI.Pagination and loading data in pages. For very large datasets, look into virtual scrolling solutions.

Accessibility

  • Uses semantic <table>, <thead>, <tbody>, <tfoot> elements
  • <caption> provides table description for screen readers
  • Column headers in <th> elements
  • Proper table structure for screen reader navigation

Summary

Functions

data_table(assigns)

Renders a data-driven table component.

table(assigns)

Renders a table wrapper that applies table styles.

Functions

data_table(assigns)

Renders a data-driven table component.

Useful when you have a list of data and want to define columns declaratively.

Examples

<.data_table rows={@users}>
  <:col :let={user} label="Name">{user.name}</:col>
  <:col :let={user} label="Email">{user.email}</:col>
  <:action :let={user}>
    <.link href={~p"/users/#{user.id}"}>View</.link>
  </:action>
</.data_table>

Attributes

  • rows (:list) (required) - The list of data to display.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["id"].

Slots

  • caption - Optional table caption.
  • col (required) - Columns to display. Accepts attributes:
    • label (:string) (required) - Column header label.
    • class (:string) - Additional CSS classes for cells in this column.
  • action - Optional action column. Accepts attributes:
    • label (:string) - Action column header label.
  • footer - Optional table footer content.

table(assigns)

Renders a table wrapper that applies table styles.

Examples

<.table>
  <thead>
    <tr><th>Invoice</th><th>Amount</th></tr>
  </thead>
  <tbody>
    <tr><td>INV001</td><td>$250.00</td></tr>
  </tbody>
</.table>

Attributes

  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["id"].

Slots

  • inner_block (required) - The table content (thead, tbody, tfoot, caption).