Add index_row_class option

lib/backpex/html/resource.ex

@@ -1011,6 +1011,13 @@ defmodule Backpex.HTML.Resource do
     "flex #{class}"
   end
 
+  defp index_row_class(assigns, item, selected, index) do
+    base_class = if selected, do: "bg-gray-50", else: "bg-white"
+    extra_class = assigns.live_resource.index_row_class(assigns, item, selected, index)
+
+    [base_class, extra_class]
+  end
+
   defp align_class(:left), do: "justify-start text-left"
   defp align_class(:right), do: "justify-end text-right"
   defp align_class(:center), do: "justify-center text-center"

lib/backpex/html/resource/resource_index_table.html.heex

@@ -66,12 +66,12 @@
   </thead>
   <tbody>
     <tr
-      :for={%{id: id} = item <- @items}
+      :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={"item-#{id}"}
-      class={if selected?(@selected_items, item), do: "bg-gray-50", else: "bg-transparent"}
+      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="absolute inset-y-0 left-0 w-0.5 bg-gray-500" />
@@ -97,8 +97,8 @@
         x-bind:class="hasOverflow ? 'border-gray-100 border-l' : ''"
         x-bind:style={"hasOverflow ? '#{shadow_sm_left()}' : ''"}
         class={[
-          "item-action-column absolute right-0 rounded-br-xl px-4 py-0 text-gray-500",
-          if(selected?(@selected_items, item), do: "bg-gray-50", else: "bg-white")
+          "item-action-column absolute right-0 px-4 py-0 text-gray-500",
+          index_row_class(assigns, item, selected?(@selected_items, item), index)
         ]}
       >
         <div

lib/backpex/live_resource.ex

@@ -541,6 +541,18 @@ defmodule Backpex.LiveResource do
   - `Backpex.Fields.Text`
 
   > Note you can add index editable support to your custom fields by defining the `render_index_form/1` function and enabling index editable for your field.
+
+  ## Additional classes for index table rows
+
+  We provide the `Backpex.LiveResource.index_row_class` option to add additional classes to table rows
+  on the index view. This allows you, for example, to color the rows.
+
+      # in your resource configuration file
+      @impl Backpex.LiveResource
+      def index_row_class(assigns, item, selected, index), do: "bg-yellow-100"
+
+  > Note that we call the function twice. Once for the row on the `tr` element and a second time for the item action overlay, because in most cases the overlay should have the same style applied.
+  For this reason, Tailwind CSS modifiers such as `even` and `odd` will not always work as intended. Use the provided index instead. The index starts with 0 for the first item.
   '''
 
   alias Backpex.Resource
@@ -580,6 +592,11 @@ defmodule Backpex.LiveResource do
   """
   @callback search_placeholder() :: binary()
 
+  @doc """
+  An extra class to be added to table rows on the index view.
+  """
+  @callback index_row_class(assigns :: map(), item :: map(), selected :: boolean(), index :: integer()) :: binary()
+
   @doc """
   The function that can be used to restrict access to certain actions. It will be called before performing
   an action and aborts when the function returns `false`.
@@ -1500,6 +1517,9 @@ defmodule Backpex.LiveResource do
       @impl Backpex.LiveResource
       def can?(_assigns, _action, _item), do: true
 
+      @impl Backpex.LiveResource
+      def index_row_class(assigns, item, selected, index), do: nil
+
       @impl Backpex.LiveResource
       def fields, do: []
 
@@ -1515,7 +1535,13 @@ defmodule Backpex.LiveResource do
       @impl Backpex.LiveResource
       def item_actions(default_actions), do: default_actions
 
-      defoverridable can?: 3, fields: 0, filters: 0, filters: 1, resource_actions: 0, item_actions: 1
+      defoverridable can?: 3,
+                     fields: 0,
+                     filters: 0,
+                     filters: 1,
+                     resource_actions: 0,
+                     item_actions: 1,
+                     index_row_class: 4
     end
   end