DevactionUI.DataTable (devaction_ui v0.1.0)

Copy Markdown View Source

A table for lists that are worked on: sticky header, sortable columns (aria-sort, the server sorts and the table only draws the arrows), optional row selection with a tri-state header checkbox and a bulk bar that appears while something is selected, two densities and an empty state.

rows is a list, or a stream (stream(socket, :rows, rows)) when the table is long: then the body is a phx-update="stream" and the empty state shows on its own when the stream is empty.

The columns are :col slots (label, key, sortable, class), each given the row with :let. Selection is the browser's: the checkboxes are plain inputs named name[], a hook keeps the header checkbox and the bulk bar in step, and fires input on the table so a form around it hears the change.

Texts (select_all_label, select_row_label, selected_label with __COUNT__, clear_label) come from the caller, so the library carries no language of its own.

Summary

Functions

data_table(assigns)

Functions

data_table(assigns)

Attributes

  • id (:string) (required)
  • label (:string) (required) - what the table lists, for assistive technology.
  • rows (:any) (required) - a list, or a Phoenix.LiveView.LiveStream for a long table.
  • row_id (:any) - a function: row -> id. Defaults to &DevactionUI.DataTable.default_id/1.

  • sort (:any) - {key, :asc | :desc} or nil. Defaults to nil.

  • on_sort (:string) - the event sent with phx-value-key when a header is clicked. Defaults to nil.
  • selectable (:boolean) - Defaults to false.
  • name (:string) - the field name of the row checkboxes (name[]). Defaults to "selected".
  • density (:atom) - Defaults to :comfortable. Must be one of :comfortable, or :compact.
  • max_height (:string) - Defaults to "max-h-[420px]".
  • select_all_label (:string) (required)
  • select_row_label (:string) (required)
  • selected_label (:string) (required) - with __COUNT__.
  • clear_label (:string) (required)
  • class (:any) - Defaults to nil.
  • target (:any) - a phx-target (a @myself) when used inside a LiveComponent. Defaults to nil.
  • Global attributes are accepted.

Slots

  • col (required) - Accepts attributes:
    • label (:string) (required)
    • key (:string)
    • sortable (:boolean)
    • class (:string)
  • bulk - the actions of the bulk bar.
  • empty - shown when there are no rows.