add shading to table component

CHANGELOG.md

@@ -1,3 +1,6 @@
+# v0.6.1
+- Add shading to table component
+
 # v0.6.0
 - Update translations
 - Display used-up date on used-up ammo

lib/cannery_web/components/table_component.ex

@@ -21,6 +21,7 @@ defmodule CanneryWeb.Components.TableComponent do
 
   use CanneryWeb, :live_component
   alias Phoenix.LiveView.Socket
+  require Integer
 
   @impl true
   @spec update(
@@ -30,6 +31,8 @@ defmodule CanneryWeb.Components.TableComponent do
                 required(:label) => String.t() | nil,
                 required(:key) => atom() | nil,
                 optional(:class) => String.t(),
+                optional(:row_class) => String.t(),
+                optional(:alternate_row_class) => String.t(),
                 optional(:sortable) => false
               }),
             required(:rows) =>
@@ -57,7 +60,7 @@ defmodule CanneryWeb.Components.TableComponent do
         :asc
       end
 
-    rows = rows |> Enum.sort_by(fn row -> row |> Map.get(initial_key) end, initial_sort_mode)
+    rows = rows |> sort_by_custom_sort_value_or_value(initial_key, initial_sort_mode)
 
     socket =
       socket
@@ -68,6 +71,8 @@ defmodule CanneryWeb.Components.TableComponent do
         last_sort_key: initial_key,
         sort_mode: initial_sort_mode
       )
+      |> assign_new(:row_class, fn -> "bg-white" end)
+      |> assign_new(:alternate_row_class, fn -> "bg-gray-200" end)
 
     {:ok, socket}
   end

lib/cannery_web/components/table_component.html.heex

@@ -33,8 +33,8 @@
       </tr>
     </thead>
     <tbody>
-      <%= for values <- @rows do %>
-        <tr>
+      <%= for {values, i} <- @rows |> Enum.with_index() do %>
+        <tr class={if i |> Integer.is_even(), do: @row_class, else: @alternate_row_class}>
           <%= for %{key: key} = value <- @columns do %>
             <td class={"p-2 #{value[:class]}"}>
               <%= case values |> Map.get(key) do %>

lib/cannery_web/live/home_live.ex

@@ -138,7 +138,7 @@ defmodule CanneryWeb.HomeLive do
             target="_blank"
             rel="noopener noreferrer"
           >
-            <p>0.6.0</p>
+            <p>0.6.1</p>
             <i class="fas fa-md fa-info-circle"></i>
           </.link>
         </li>

mix.exs

@@ -4,7 +4,7 @@ defmodule Cannery.MixProject do
   def project do
     [
       app: :cannery,
-      version: "0.6.0",
+      version: "0.6.1",
       elixir: "1.14.1",
       elixirc_paths: elixirc_paths(Mix.env()),
       compilers: Mix.compilers(),