ExLiveTable (ExLiveTable v0.1.0)

View Source

ExLiveTable 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

handle_search(query, arg2)

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

handle_sorting(query, params)

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

main_table(assigns)

See ExLiveTable.MainTable.main_table/1.

querystring(params, opts \\ %{})

See ExLiveTable.DataTable.querystring/2.

sort(params)

See ExLiveTable.DataTable.sort/1.

table_link(params, text, field)

See ExLiveTable.DataTable.table_link/3.