<.live_component module={Table} headers={[id: "ID", name: "Name", lorem: "Lorem", actions: ""]} filterable={[id: [odd: "Odd IDs", even: "Even IDs"]]} sortable={[:id, :name]} mobile_hidden={[:lorem, :actions]}>
  <%= for i <- 1..5 do %>
    <.table_row>
      <.table_cell>
        <%= i %>
      </.table_cell>
      <.table_cell>
        record #<%= i %>
      </.table_cell>
      <.table_cell class="hidden md:table-cell">
        ipsum dolor sit amet
      </.table_cell>
      <.table_button_cell class="hidden md:table-cell">
        <.table_button icon="fas fa-pencil-alt" />
        <.table_button icon="fas fa-trash text-danger-txt" class="hover:bg-danger-bg-hover" />
      </.table_button_cell>
    </.table_row>
  <% end %>
</.live_component>

<.live_component module={Table} selectable={:checkbox}>
  <%= for i <- 1..5 do %>
    <.table_row selectable={:checkbox} select_id={i} selected={i in [1, 3]}>
      <.table_cell>
        <%= i %>
      </.table_cell>
      <.table_cell>
        record #<%= i %>
      </.table_cell>
      <.table_cell>
        ipsum dolor sit amet
      </.table_cell>
    </.table_row>
  <% end %>
</.live_component>

<.live_component module={Table} disabled={true} selectable={:checkbox} selected_count={0}>
  <%= for i <- 1..5 do %>
    <.table_row disabled={true} selectable={:checkbox} select_id={i} selected={i in [1, 3]}>
      <.table_cell>
        <%= i %>
      </.table_cell>
      <.table_cell>
        record #<%= i %>
      </.table_cell>
      <.table_cell>
        ipsum dolor sit amet
      </.table_cell>
    </.table_row>
  <% end %>
</.live_component>

<.live_component module={Table} selectable={:radio}>
  <%= for i <- 1..5 do %>
    <.table_row select_id={i} selectable={:radio}>
      <.table_cell>
        <%= i %>
      </.table_cell>
      <.table_cell>
        record #<%= i %>
      </.table_cell>
      <.table_cell>
        ipsum dolor sit amet
      </.table_cell>
    </.table_row>
  <% end %>
</.live_component>