Renders a table with generic styling.

Examples

<.table id="users" rows={@users}>
  <:col :let={user} label="id">{user.id}</:col>
  <:col :let={user} label="username">{user.username}</:col>
</.table>

or declaring the table components

<.table id="users">
  <.thead>
    <.tr>
      <.th>id</.th>
      <.th>username</.th>
    </.tr>
  </.thead>
  <.tbody>
    <.tr :for={user <- @users}>
      <.td>{user.id}</.td>
      <.td>{user.username}</.td>
    </.tr>
  </.tbody>
</.table>

sorting can be achieved by defining the :sort_key attribute in the :col slot. The :sorted_columns attribute should be a list of tuples with the column key and direction, e.g. [{"id", "asc"}, {"name", "desc"}].

<.table id="users" rows={@users} sorted_columns={@sorted_columns}>
  <:col :let={user} sort_key={:id} label="Id">
    {user.id}
  </:col>
  <:col :let={user} label="Username">
    {user.username}
  </:col>
  <:col :let={user} label="Email">
    {user.email}
  </:col>
</.table>

 # When clicked on the header, the `:sort_key` will trigger an event with the `on_click_header` attribute.
 def handle_event("sort", %{"sort_key" => sort_key, "sort_direction" => sort_direction}, socket) do
    sorted_columns = update_sort(socket.assigns.sorted_columns, sort_key, sort_direction)
    # Sort the users based on your sorting logic
    users = Users.order_by(sorted_columns)
   {:noreply, assign(socket, users: users, sorted_columns: sorted_columns)}
 end

Attributes

• id (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• container_element (:boolean) - whether to wrap the table in a div with overflow-x-auto class. Defaults to true.
• rows (:list)
• row_id (:any) - the function for generating the row id. Defaults to nil.
• row_click (:any) - the function for handling phx-click on each row. Defaults to nil.
• row_item (:any) - the function for mapping each row before calling the :col and :action slots. Defaults to &Function.identity/1.
• sorted_columns (:list) - list of columns sorted by, each column is a tuple with the column key and direction, e.g. [{:id, :asc}, {:name, :desc}]. Defaults to [].
• on_click_header (:any) - the event name for phx-click on header columns for sorting. Defaults to "sort".
• zebra (:boolean) - Defaults to false.
• size (:string) - Must be one of "xs", "sm", "md", "lg", or "xl".
• Global attributes are accepted.

Slots

• col - Accepts attributes:
  • class (:any)
  • sort_key (:any) - the key for sorting the column when phx-click is triggered.
  • collapse_breakpoint (:string) - the breakpoint for collapsing the column.
  • label (:string)
• action - the slot for showing user actions in the last table column.
• inner_block

Attributes

• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block

Attributes

• class (:any) - Defaults to nil.
• collapse_breakpoint (:string) - Must be one of "xs", "sm", "md", "lg", or "xl".
• Global attributes are accepted.

Slots

• inner_block

Attributes

• class (:any) - Defaults to nil.
• collapse_breakpoint (:string) - Must be one of "xs", "sm", "md", "lg", or "xl".
• sort_key (:any) - the key for sorting the column when phx-click is triggered. Defaults to nil.
• sort_direction (:string) - the direction for sorting the column when phx-click is triggered. Defaults to "asc". Must be one of "asc", "desc", or nil.
• on_click (:any) - the event name for phx-click on header columns for sorting. Defaults to "sort".
• Global attributes are accepted.

Slots

• inner_block

Attributes

• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block

Attributes

• class (:any) - Defaults to nil.
• active (:boolean) - Defaults to false.
• hover (:boolean) - Defaults to false.
• Global attributes are accepted.

Slots

• inner_block