PhoenixBetterTable (phoenix_better_table v0.5.0)

A table component whose contents can be sorted by clicking on each header.

Assigns

  • :meta - a map containing a :headers key:
    • headers: - a list of maps, each representing a header in the table:
      • :id - the column's id, which will be used as the key for rendering and sorting
      • :label - the column's label (optional)
      • :filter - a boolean indicating whether the column is filterable (optional, default true), or a 1-arity function that returns text to be filtered (default to_string/1)
      • :sort - either a boolean indicating whether the column is sortable (optional, default true), or a compare/2 function that returns true if the first argument precedes or is in the same place as the second one.
      • :render - an optional component that renders cells in the column
  • :rows - a list of maps, each representing a row in the table
  • :sort - a tuple containing the column id and the sort order (:asc or :desc) (optional)
  • :class - a string containing additional classes to be added to the table (optional)
  • :body_class - a string containing additional classes to be added to the table body (optional)
  • :header_class - a string containing additional classes to be added to the table header (optional)

Slots

  • :filter_control - an optional slot that takes a single argument, a tuple of {active?, id, myself}. The interactive element should set phx-click="filter_toggle", phx-value-header={id}, and phx-target={myself} for the event to be routed correctly.
  • :sort_control - an optional slot that takes a single argument, a tuple of {direction, id, myself}. See above.

Summary

Functions

Link to this function

render(assigns)

Callback implementation for Phoenix.LiveComponent.render/1.