ExLiveTable (ExLiveTable v0.1.0)
View SourceExLiveTable is a comprehensive data table solution for Phoenix LiveView applications.
It provides responsive tables with built-in sorting, filtering, pagination, and export functionality. The table automatically adapts between desktop and mobile views.
Features
- Responsive design with desktop and mobile views
- Sorting by columns
- Quick search filter
- Pagination with Scrivener integration
- CSV/Excel/PDF export functionality
- Customizable styling
Basic Usage
<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>
LiveView Integration
In your LiveView, handle the table events:
def handle_event("iSearch", %{"isearch" => search_term}, socket) do
# Update your query with search term
{:noreply, assign(socket, search_term: search_term)}
end
def handle_event("refresh_table", _, socket) do
# Reload data
{:noreply, assign(socket, users: reload_users())}
end
def handle_event("filter", _, socket) do
# Show filter modal
{:noreply, socket}
end
def handle_event("export", %{"file_type" => file_type}, socket) do
# Handle export based on file_type (csv, xlsx, pdf)
{:noreply, socket}
end
Summary
Functions
Handles search filtering in your LiveView when using Ecto.
Handles sorting in your LiveView when using Ecto.
Functions
Handles search filtering in your LiveView when using Ecto.
Note: This function requires Ecto to be installed.
Example usage in LiveView
def handle_event("iSearch", %{"isearch" => search_term}, socket) do
params = put_in(socket.assigns.params, ["filter", "isearch"], search_term)
{:noreply, push_patch(socket, to: "?" <> ExLiveTable.querystring(params))}
end
Handles sorting in your LiveView when using Ecto.
Note: This function requires Ecto to be installed.
Example usage in LiveView
def handle_params(params, _url, socket) do
query = ExLiveTable.handle_sorting(User, params)
users = Repo.paginate(query, params)
{:noreply, assign(socket, users: users, params: params)}
end