DataTable (DataTable v0.4.0)

DataTable is a flexible and interactive table component for LiveView.

def render(assigns) do
  ~H"""
  <DataTable.live_data_table
    id="table"
    source={{DataTable.Ecto, {MyApp.Repo, @source_query}}}>

    <:col :let={row} name="Id" fields={[:id]} sort_field={:id}>
      <%= row.id %>
    </:col>

    <:col :let={row} name="Name" fields={[:first_name, :last_name]}>
      <%= row.first_name <> " " <> row.last_name %>
    </:col>

  </DataTable.live_data_table>
  """
end

def mount(_params, _session, socket) do
  query = DataTable.Ecto.Query.from(
    user in MyApp.User,
    fields: %{
      id: user.id,
      first_name: user.first_name,
      last_name: user.last_name
    },
    key: :id
  )

  socket = assign(socket, :source_query, query)

  [...]
end

Common Tasks

Getting started

First you need to add data_table to your mix.exs:

defp deps do
  [
    {:data_table, "~> 1.0}
  ]
end

If you want to use the default Tailwind theme, you need to set up tailwind to include styles from the data_table dependency.

Add this to the content list in your assets/tailwind.js:

"../deps/data_table/**/*.*ex"

Data model

Some terms you should know when using the library:

Source - A module implementing the DataTable.Source behaviour. A Source provides data to the DataTable component in a pluggable way. Examples of built-in sources are: DataTable.Ecto, DataTable.List
Data Row - A single row of data returned from the Source.
Data Field - A column of data returned from the Source. Example: In a database table, this might be a single field like "first_name" or "email".
Table Column - A column displayed in the table. A Table Field may combine or transform data from one or more Data Columns. Example: A "full_name" Table Field might combine "first_name" and "last_name" Data Columns.

Note: Internally, Data Fields are referred to simply as "fields", while Table Columns are called "columns".

To summarize, a Source provides Data Fields which are then mapped to Table Columns for display in the DataTable component.

Summary

Functions

live_data_table(assigns)

Renders a DataTable in a given LiveView as a LiveComponent.

Functions

live_data_table(assigns)

@spec live_data_table(assigns :: Socket.assigns()) :: Phoenix.LiveView.Rendered.t()

Renders a DataTable in a given LiveView as a LiveComponent.

source and id are required attributes.

Attributes

theme (:atom) - The theme for the DataTable. Defaults to DataTable.Theme.Tailwind, a modern theme implemented using tailwind.
Defaults to DataTable.Theme.Tailwind.
id (:any) (required) - live_data_table is a stateful component, and requires an id. See LiveView.LiveComponent for more information.
source (:any) (required) - Declares where the DataTable should fetch its data from.
```
{source_module :: DataTable.Source.t(), source_config :: any()}
```
source_module is a module implementing the DataTable.Source behaviour, source_config is the configuration passed to the DataTable.Source implementation.
nav (:any) - Override the navigation state of the table. Most likely only present when handle_nav is also present.
nil will be counted as no change.
handle_nav (:any) - Called when the navigation state of the table has changed. If present, the navigation data should be passed back into the nav parameter.
always_columns (:list) - A list of column ids that will always be loaded.

Slots

col - One :col should be sepecified for each potential column in the table. Accepts attributes:
- name (:string) (required) - Name in column header. Must be unique.
- visible (:boolean) - Default visibility of the column.
- fields (:list) - List of fields that will be queried when this field is visible.
- filter_field (:atom) - If present, cells will have a filter shortcut. The filter shortcut will apply a filter for the specified field.
- filter_field_op (:atom) - The filter op type which will be used for the cell filter shortcut.
- sort_field (:atom) - If present, columns will be sortable. The sort will occur on the specified field. Defaults to the first field in fields.
row_expanded - Markup which will be rendered when a row is expanded. Accepts attributes:
- fields (:list) - List of fields that will be queried when a row is expanded.
top_right - Markup in the top right corner of the table.
row_buttons - Markup in the rightmost side of each row in the table. Accepts attributes:
- fields (:list) - List of fields that will be queried when this field is visible.
selection_action - Accepts attributes:
- label (:string) (required)
- handle_action (:any) (required)