ExLiveTable.MainTable (ExLiveTable v0.1.0)

View Source

Renders a responsive data table with sorting, filtering, and pagination.

This component provides both desktop and mobile views, built-in search, and export functionality.

Summary

Functions

Renders a table with generic styling.

Functions

main_table(assigns)

Renders a table with generic styling.

Examples

<ExLiveTable.main_table id="users" rows={@users} params={@params}>
  <:col :let={user} label="ID"><%= user.id %></:col>
  <:col :let={user} label="Username"><%= user.username %></:col>
  <:action :let={user}>
    <button phx-click="edit" phx-value-id={user.id}>Edit</button>
  </:action>
</ExLiveTable.main_table>

Attributes

  • id (:string) (required)
  • rows (:list) (required)
  • extraction (:boolean) - Defaults to true.
  • params (:map) (required)
  • row_id (:any) - the function for generating the row id. Defaults to nil.
  • data_loader (:boolean) - indicates if data is currently loading. Defaults to false.
  • 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.

Slots

  • col (required) - Accepts attributes:
    • label (:string)
    • label_class (:string)
    • class (:string)
  • action - the slot for showing user actions in the last table column.