backpex

<table
  class="!static table"
  x-cloak
  x-data="{
    actionsWidth: null,
    headerHeight: null,
    setActionsWidth() {
      $nextTick(
        () => {
          document.querySelectorAll('.item-action-column')
            .forEach((x) => {
              this.actionsWidth = this.actionsWidth > x.clientWidth ? this.actionsWidth : x.clientWidth
            })
        }
      )
    },
  }
  "
  x-init="setActionsWidth()"
  x-on:resize.window="setActionsWidth()"
>
  <thead class="bg-base-200/50 text-base-content uppercase">
    <tr>
      <th :if={Enum.any?(index_item_actions(@item_actions))}>
        <input
          phx-click="toggle-item-selection"
          type="checkbox"
          class="checkbox checkbox-sm"
          checked={@select_all}
          x-init={"$el.indeterminate = #{Enum.any?(@selected_items) && not @select_all}"}
          aria-label={Backpex.translate("Select all items")}
        />
      </th>
      <th :for={{name, %{label: label} = field_options} <- @fields} :if={active?(@active_fields, name)}>
        <div class={["font-medium", align(field_options), index_column_class(assigns, field_options)]}>
          <%= if Enum.member?(@orderable_fields, name) do %>
            <.order_link
              live_resource={@live_resource}
              socket={@socket}
              params={@params}
              label={label}
              name={name}
              query_options={@query_options}
            />
          <% else %>
            <%= label %>
          <% end %>
        </div>
      </th>
      <th class="action-header-spacer" />
      <th
        x-bind:class="hasOverflow ? 'border-base-100 border-l' : ''"
        x-bind:style={"hasOverflow ? '#{shadow_sm_left()}' : ''"}
        class="rounded-tr-box absolute right-0 px-0"
      >
        <div class="bg-base-100">
          <.toggle_columns
            socket={@socket}
            active_fields={@active_fields}
            live_resource={@live_resource}
            current_url={@current_url}
            class="flex justify-end pt-1 pr-4 font-medium bg-base-200/50 normal-case"
            x_style="'width: ' + actionsWidth + 'px !important'"
          />
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr
      :for={{%{id: id} = item, index} <- Enum.with_index(@items)}
      x-on:resize.window="setRowHeight()"
      x-init="setRowHeight()"
      x-data="{ rowHeight: null, setRowHeight() { $nextTick( () => {this.rowHeight = $el.getBoundingClientRect().height }) } }"
      id={"row-item-#{id}"}
      class={index_row_class(assigns, item, selected?(@selected_items, item), index)}
    >
      <td :if={Enum.any?(index_item_actions(@item_actions))} class="relative">
        <div :if={selected?(@selected_items, item)} class="bg-base-content absolute inset-y-0 left-0 w-0.5" />
        <input
          id={"select-input-#{id}"}
          phx-click="update-selected-items"
          phx-value-id={id}
          type="checkbox"
          class="checkbox checkbox-sm"
          checked={selected?(@selected_items, item)}
          aria-label={Backpex.translate({"Select item with id: %{id}", %{id: id}})}
        />
      </td>
      <td :for={{name, field_options} <- @fields} :if={active?(@active_fields, name)} class="text-base-content/75">
        <div class={[align(field_options), index_column_class(assigns, field_options)]}>
          <.resource_field name={name} item={item} {assigns} />
        </div>
      </td>
      <td class="p-0">
        <div x-bind:style="'width: ' + actionsWidth + 'px !important'"></div>
      </td>
      <td
        x-bind:class="hasOverflow ? 'border-base-100 border-l' : ''"
        x-bind:style={"hasOverflow ? '#{shadow_sm_left()}' : ''"}
        class={[
          "item-action-column text-base-content absolute right-0 px-4 py-0 last:rounded-br-box",
          index_row_class(assigns, item, selected?(@selected_items, item), index)
        ]}
      >
        <div
          class="text-base-content/75 flex items-center justify-end space-x-2"
          x-bind:style="`height: ${rowHeight - 1}px !important; width: ${actionsWidth - 32}px !important`"
        >
          <div
            :for={{key, action} <- row_item_actions(@item_actions)}
            :if={LiveResource.can?(assigns, key, item, @live_resource)}
            class="tooltip hover:z-30"
            data-tip={action.module.label(assigns)}
          >
            <button
              type="button"
              phx-click="item-action"
              phx-value-action-key={key}
              phx-value-item-id={item.id}
              aria-label={action.module.label(assigns)}
            >
              <%= action.module.icon(assigns) %>
            </button>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>