Wrapping Flop.Phoenix.table/1, how to avoid missing required slot warning

Phoenix Forum Questions / Help
, , ,
1

I’m using the excellent Flop and Flop.Phoenix libraries to handle sorting/filtering/etc, but I’ve run into an annoying warning I haven’t been able to solve.

I want to wrap the provided Flop.Phoenix.table/1 component together with some pagination and styling so that I can re-use it in multiple places throughout my app. I’ve come up with the following, which works well:

  def flop_table(assigns) do
    ~H"""
    <div class="flex flex-col items-center gap-4">
      <Flop.Phoenix.table
        opts={[table_attrs: [class: "table table-zebra w-full"]]}
        {assigns}
      >
      </Flop.Phoenix.table>
      <.pagination meta={@meta} path={@path} />
    </div>
    """
  end

The only problem is that I get this warning:

warning: missing required slot "col" for component Flop.Phoenix.table/1

That makes sense – I’m not explicitly setting the col slot there, but I don’t know a way around this. Is there an idiomatic way to tackle this?

2

After thinking on this a bit, I ended up with something that I think works, but I’m open to other ideas!

  def flop_table_and_pagination(assigns) do
    ~H"""
    <div class="flex flex-col items-center gap-4">
      {render_slot(@inner_block)}
      <.pagination meta={@meta} path={@path} />
    </div>
    """
  end

  def flop_table_opts(pointer_on_hover? \\ true) do
    [
      table_attrs: [class: "table table-zebra w-full"],
      tbody_tr_attrs: [
        class:
          Enum.join(["hover:bg-base-content/10 ", pointer_on_hover? && "hover:cursor-pointer"])
      ]
    ]
  end

Then usage is something like

<.flop_table_and_pagination meta={meta} path={~p"/foo"}>
  <Flop.Phoenix.table opts={flop_table_opts()} ...>
    <:col let={foo} label="Bar" field={:bar}>{foo.bar}</:col>
    ...
  </Flop.Phoenix.table>
</.flop_table_and_pagination>