-
|
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
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. Thank you! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
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>
"""
endUsing 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> |
Beta Was this translation helpful? Give feedback.
-
|
Oh no, that's really quite simple. I tried several things but not this. Thank you other Mathias! |
Beta Was this translation helpful? Give feedback.
-
|
Hey @woylie, 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>
"""
endIs this approach still the right one or would you do it differently nowadays? |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
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:
Using the wrapper component: