Add class and style to table column

lib/surface_bulma/table.ex

@@ -65,7 +65,7 @@ defmodule SurfaceBulma.Table do
         <thead>
           <tr>
             <For each={{ col <- @cols }}>
-              <th>
+              <th class={{ col.class }} style={{ col.style }}>
               <If condition={{!is_nil(col.sort_by) && assigns.sorted_by == col.sort_by}}>
               <a :on-click="sorted_click" phx-value-value={{ col.sort_by }} href="">
                 <TextIcon>

lib/surface_bulma/table/column.ex

@@ -43,6 +43,12 @@ defmodule SurfaceBulma.Table.Column do
   """
   prop sort_by, :any, default: nil
 
+  @doc "The style to be applied to <th> element representing this column"
+  prop style, :string, default: ""
+
+  @doc "The class to be applied to <th> element representing this column"
+  prop class, :css_class, default: nil
+
   # Todo, requires patching of bulma css
   # prop width, :string, default: nil
 end

mix.exs

@@ -43,6 +43,7 @@ defmodule SurfaceBulma.MixProject do
       {:jason, "~> 1.0"},
       {:surface_catalogue, "~> 0.0.1", only: :dev},
       {:surface_font_awesome, "~> 0.1.1"},
+      {:surface_catalogue, "~> 0.0.3", only: :dev}
       {:surface, "~> 0.2.1"}
     ]
   end

mix.lock

@@ -23,7 +23,7 @@
   "plug_crypto": {:hex, :plug_crypto, "1.2.0", "1cb20793aa63a6c619dd18bb33d7a3aa94818e5fd39ad357051a67f26dfa2df6", [:mix], [], "hexpm", "a48b538ae8bf381ffac344520755f3007cc10bd8e90b240af98ea29b69683fc2"},
   "ranch": {:hex, :ranch, "1.7.1", "6b1fab51b49196860b733a49c07604465a47bdb78aa10c1c16a3d199f7f8c881", [:rebar3], [], "hexpm", "451d8527787df716d99dc36162fca05934915db0b6141bbdac2ea8d3c7afc7d7"},
   "surface": {:hex, :surface, "0.2.1", "adc84352e421d8af0774d1600a8bd1ff1309d3351bb489f38a06a22bc0b2a10a", [:mix], [{:earmark, "~> 1.3", [hex: :earmark, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 0.5 or ~> 1.0", [hex: :nimble_parsec, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.15.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "20ce3b3f134409f3c703ac78a0e40f14293efc6460c0f0d5f5575ebd70bb1d39"},
-  "surface_catalogue": {:hex, :surface_catalogue, "0.0.1", "1197ca35293567f8055b27253b8aaefc949d68c41c1eed3eeb8303f4a3972b74", [:mix], [{:html_entities, "~> 0.4", [hex: :html_entities, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix_live_reload, "~> 1.2", [hex: :phoenix_live_reload, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.0", [hex: :plug_cowboy, repo: "hexpm", optional: false]}, {:surface, "~> 0.2.1", [hex: :surface, repo: "hexpm", optional: false]}], "hexpm", "d62d4d8b3f42dddc41c5f1ebdb8f5bf0f7bf7cb41e39362015590ac0c1ce1e19"},
+  "surface_catalogue": {:hex, :surface_catalogue, "0.0.3", "74c7d2010690e165fca698564ce8bf1bc33f71f35408ade99364044269198b26", [:mix], [{:html_entities, "~> 0.4", [hex: :html_entities, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:makeup_elixir, "~> 0.15.1", [hex: :makeup_elixir, repo: "hexpm", optional: false]}, {:phoenix_live_reload, "~> 1.2", [hex: :phoenix_live_reload, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.0", [hex: :plug_cowboy, repo: "hexpm", optional: false]}, {:surface, "~> 0.2.1", [hex: :surface, repo: "hexpm", optional: false]}], "hexpm", "02621e912bbcf8511815e6717a7256e172d05e4422f4d0833247baa2127325f1"},
   "surface_font_awesome": {:hex, :surface_font_awesome, "0.1.1", "0872b5d3ecadcd2db839b24ef61632682ec685ebb62032f6ab22e43697cbddce", [:mix], [{:surface, "~> 0.2.0", [hex: :surface, repo: "hexpm", optional: false]}], "hexpm", "f282c50a206e6171a99f1fd15fb68e18157c22265be885c50f108a03843e82fb"},
   "telemetry": {:hex, :telemetry, "0.4.2", "2808c992455e08d6177322f14d3bdb6b625fbcfd233a73505870d8738a2f4599", [:rebar3], [], "hexpm", "2d1419bd9dda6a206d7b5852179511722e2b18812310d304620c7bd92a13fcef"},
 }

priv/catalogue/table/playground.ex

@@ -0,0 +1,35 @@
+defmodule SurfaceBulma.Catalogue.Table.Playground do
+  use Surface.Catalogue.Playground,
+    subject: SurfaceBulma.Table,
+    catalogue: SurfaceBulma.Catalogue,
+    height: "270px",
+    body: [class: "has-background-light", style: "padding: 25px;"]
+
+    alias SurfaceBulma.Table.Column
+
+    data props, :map, default: %{
+      id: "table",
+      bordered: true,
+      striped: true,
+      data: [
+        %{id: 1, name: "John"},
+        %{id: 2, name: "Jane"},
+        %{id: 3, name: "Albert"},
+        %{id: 4, name: "Diana"},
+        %{id: 5, name: "Elizabeth"}
+      ]
+    }
+
+  def render(assigns) do
+    ~H"""
+    <Table data={{ person <- @props.data }} :props={{ @props }}>
+      <Column label="Id" sort_by="id" style="width: 200px;">
+        {{ person.id }}
+      </Column>
+      <Column label="Name" sort_by="name">
+        {{ person.name }}
+      </Column>
+    </Table>
+    """
+  end
+end

test/surface_bulma/table_test.exs

@@ -1,8 +1,8 @@
 defmodule Surface.Components.TableTest do
-  use ExUnit.Case, async: true
+  use SurfaceBulma.ConnCase, async: true
 
-  import Phoenix.ConnTest
-  import Phoenix.LiveViewTest
+  alias SurfaceBulma.Table
+  alias SurfaceBulma.Table.Column
 
   @endpoint Endpoint
 
@@ -146,4 +146,30 @@ defmodule Surface.Components.TableTest do
            |> element("#{row5} td:nth-child(1) span")
            |> render() =~ "1"
   end
+
+  test "column's class" do
+    html =
+      render_surface do
+        ~H"""
+        <Table id="foo" data={{ person <- [%{name: "John"}] }}>
+          <Column label="Name" class="my_col">{{person.name}}</Column>
+        </Table>
+        """
+      end
+
+    assert html =~ ~S(<th class="my_col")
+  end
+
+  test "column's style" do
+    html =
+      render_surface do
+        ~H"""
+        <Table id="foo" data={{ person <- [%{name: "John"}] }}>
+          <Column label="Name" style="width: 200px">{{person.name}}</Column>
+        </Table>
+        """
+      end
+
+    assert html =~ ~S(<th style="width: 200px")
+  end
 end