Renders a table with data.

## Examples

### Basic

 <.data_table id="basic-table" class="data-table" rows={@list_rows}>
   <:col :let={row} label="ID">{row.id}</:col>
   <:col :let={row} label="Name">{row.name}</:col>
   <:col :let={row} label="Role">{row.role}</:col>
   <:col :let={row} label="Email">{row.email}</:col>
 </.data_table>

### Actions

Use the :action slot to add actions for each row, like Edit and Delete buttons.

 <.data_table id="basic-table" class="data-table" rows={@list_rows}>
   <:col :let={row} label="ID">{row.id}</:col>
   <:col :let={row} label="Name">{row.name}</:col>
   <:col :let={row} label="Role">{row.role}</:col>
   <:col :let={row} label="Email">{row.email}</:col>
   <:action :let={row}>
     <.action phx-click="edit" phx-value-id={row.id}>Edit</.action>
     <.action phx-click="delete" phx-value-id={row.id}>Delete</.action>
   </:action>
 </.data_table>

### Streaming

Pass the stream to rows. Column slot receives {id, item}. Items need an :id field (or use stream_configure/3 with :dom_id). Add rows with stream_insert/3.

 # mount
 socket |> stream(:items, []) |> assign(:next_id, 1)

 <.data_table id="my-table" class="data-table" rows={@streams.items}>
   <:col :let={{_id, item}} label="Name">{item.name}</:col>
 </.data_table>

Add a row: stream_insert(socket, :items, %{id: id, name: "New"}) from handle_event or handle_info.

### Sortable

Set sort_by, sort_order, on_sort; give each sortable column a name. You still need handle_event("sort", ...) but delegate to the helper. LiveView minimum:

 # mount
 socket
 |> assign(:users, users)
 |> Corex.DataTable.Sort.assign_for_sort(:users, default_sort_by: :id, default_sort_order: :asc)

 # handle_event("sort", params, socket)
 {:noreply, Corex.DataTable.Sort.handle_sort(socket, params, :users)}

 <.data_table id="users-sortable" class="data-table" rows={@users} sort_by={@sort_by} sort_order={@sort_order} on_sort="sort">
   <:col :let={user} label="ID" name={:id}>{user.id}</:col>
   <:col :let={user} label="Name" name={:name}>{user.name}</:col>
   <:sort_icon :let={%{direction: direction}}>
     <.heroicon name={%{asc: "hero-chevron-up", desc: "hero-chevron-down", none: "hero-chevron-up-down"}[direction]} />
   </:sort_icon>
 </.data_table>

### Selectable

Set selectable, selected, on_select, on_select_all, and row_id. Delegate to Corex.DataTable.Selection in mount and in the two events. LiveView minimum:

 # mount
 socket
 |> assign(:users, users)
 |> Corex.DataTable.Selection.assign_for_selection(:users, table_id: "users-table", row_id: &"user-#{&1.id}")

 def handle_event("select", params, socket) do
   {:noreply, Corex.DataTable.Selection.handle_select(socket, params, :users)}
 end

 def handle_event("select_all", params, socket) do
   {:noreply, Corex.DataTable.Selection.handle_select_all(socket, params, :users)}
 end

 <.data_table
   id="users-table"
   class="data-table"
   rows={@users}
   row_id={&"user-#{&1.id}"}
   selectable={true}
   selected={@selected}
   on_select="select"
   on_select_all="select_all"
   checkbox_class="checkbox"
 >
   <:checkbox_indicator>
     <.heroicon name="hero-check" class="data-checked" />
   </:checkbox_indicator>
   <:col :let={user} label="ID" name={:id}>{user.id}</:col>
   <:col :let={user} label="Name" name={:name}>{user.name}</:col>
   <:col :let={user} label="Email" name={:email}>{user.email}</:col>
 </.data_table>

## Styling

Use data attributes to target elements:

 [data-scope="data-table"][data-part="root"] {}
 [data-scope="data-table"][data-part="thead"] {}
 [data-scope="data-table"][data-part="tbody"] {}
 [data-scope="data-table"][data-part="row"] {}
 [data-scope="data-table"][data-part="cell"] {}
 [data-scope="data-table"][data-part="sort-header"] {}
 [data-scope="data-table"][data-part="sort-text"] {}
 [data-scope="data-table"][data-part="sort-icon-container"] {}
 [data-scope="data-table"][data-part="sort-trigger"] {}
 [data-scope="data-table"][data-part="selection-header"] {}
 [data-scope="data-table"][data-part="selection-cell"] {}
 [data-scope="data-table"][data-part="action-header"] {}
 [data-scope="data-table"][data-part="actions"] {}

If you wish to use the default Corex styling, you can use the class data-table on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

 @import "../corex/main.css";
 @import "../corex/tokens/themes/neo/light.css";
 @import "../corex/components/data-table.css";

Attributes

• id (:string) (required) - The id of the table, used for LiveStream updates.
• rows (:list) (required) - The list of row data to render.
• row_id (:any) - the function for generating the row id. Defaults to nil.
• row_click (:any) - the function for handling phx-click on each row. Defaults to nil.
• row_item (:any) - the function for mapping each row before calling the :col and :action slots. Defaults to &Function.identity/1.
• translation (Corex.DataTable.Translation) - Override translatable strings.
• sort_by (:atom) - The currently sorted column name. Defaults to nil.
• sort_order (:atom) - The current sort direction. Defaults to :asc. Must be one of :asc, or :desc.
• on_sort (:any) - The event to trigger when a sortable header is clicked. Defaults to nil.
• selectable (:boolean) - Whether the rows are selectable. Defaults to false.
• selected (:list) - The list of currently selected row IDs. Defaults to [].
• on_select (:any) - The event to trigger when a single row is selected. Defaults to nil.
• on_select_all (:any) - The event to trigger when the select all checkbox is toggled. Defaults to nil.
• checkbox_class (:string) - The class applied to the internal checkboxes. Defaults to nil.
• Global attributes are accepted.

Slots

• col (required) - Accepts attributes:
  • label (:string)
  • class (:string)
  • name (:atom) - The field name used for sorting.
• sort_icon - the slot for showing the sort icon. Accepts attributes:
  • direction (:atom) - the current sort direction (:asc or :desc).
• action - the slot for showing user actions in the last table column. Accepts attributes:
  • class (:string)
• checkbox_indicator - the slot for showing the checkbox indicator icon.
• empty - Optional slot shown when the table has no rows.