How to encapsulate the Flop.Phoenix.table component?

[MMore]

Hello Mathias,

I am still on v0.10.0 and wanted to update to the current version. Now you're using the latest Liveview slot features. Currently I've encapsulated the Flop.Phoenix.table component into my own table component for three reasons:

1. I have some styling divs around it (also gives me the possibility to control the horizontal scrolling behaviour for bigger tables).
2. I can put the Flop.Phoenix.pagination directly under the table as I need it for every table anyway.
3. Merge global stylings into my component.

I was wondering how I could upgrade to the current version and keep this structure. I saw that you introduced global config options which would much likely solve the 3rd point.
But how could I pass the different headers and data fields into my table component that uses now slots like <:col let={pet} label="Name" field={:name}><%= name %></:col> under the hood with Flop.Phoenix.table?

Thank you!

[woylie]

Hi other Mathias,

that's actually quite simple. Each named slot is available as a single assign, so you can just pass it on to another component.

The wrapper component:

def table_with_pagination(assigns) do
  ~H"""
  <div class="table-wrapper">
    <.Flop.Phoenix.table items={@items} meta={@meta} path_helper={@path_helper} col={@col} />
    <.Flop.Phoenix.pagination meta={@meta} path_helper={@path_helper} />
  </div>
  """
end

Using the wrapper component:

<.table_with_pagination
  items={@pets}
  meta={@meta}
  path_helper={{Routes, :pet_path, [@socket, :index]}}
>
  <:col let={p} label="ID" field={:id}><%= p.id %></:col>
  <:col let={p} label="Name" field={:name}><%= p.name %></:col>
</.table_with_pagination>

[MMore]

Oh no, that's really quite simple. I tried several things but not this. Thank you other Mathias!

[MMore]

Hey @woylie,
I am still using it like this. Since a while it shows a warning.

warning: missing required slot "col" for component Flop.Phoenix.table/1
  lib/app_web/live/components/flop_components.ex:76

warning: undefined attribute "col" for component Flop.Phoenix.table/1
  lib/app_web/live/components/flop_components.ex:82

It's basically defined like this:

def table_with_pagination(assigns) do
  ~H"""
  <div class="table-wrapper">
    <.Flop.Phoenix.table items={@items} meta={@meta} path={@path} col={@col} />
    <.Flop.Phoenix.pagination meta={@meta} path={@path} />
  </div>
  """
end

Is this approach still the right one or would you do it differently nowadays?

[woylie]

I wouldn't know a better way to do this. Since wrapping components is a common use case, I'd be open to a PR that removes the required attribute from the col slot.