Table

Table component with two variants: simple wrapper and data-driven.

Data Table

The data table variant accepts a list of rows and uses slots to define columns.

Data Table

Name	Email	Role
Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	User
Carol White	carol@example.com	Editor

    <.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="secondary">{user.role}</.badge>
  </:col>
  <:action :let={user}>
    <.button size="sm" variant="ghost">Edit</.button>
  </:action>
</.data_table>
  

Simple Table

For more control, use the simple table wrapper with manual HTML.

Simple Table

Invoice	Status	Amount
INV001	Paid	$250.00
INV002	Pending	$150.00

    <.table>
  <thead>
    <tr>
      <th>Invoice</th>
      <th>Status</th>
      <th class="text-right">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>INV001</td>
      <td><.badge variant="success">Paid</.badge></td>
      <td class="text-right">$250.00</td>
    </tr>
  </tbody>
</.table>
  