How can I use <span> in table_ops and pagination_ops?

[kuatroka]

Hi, I'm trying to replicate the table UI component with pagination from Flowbite
I want to recreate the Total Number of records and the currently shown, the previous and next buttons, but omit the page numbers. I've got the table almost done, but the pagination piece is puzzling me.

Flowbite provides the HTML and Tailwind code, but it includes spans within spans

This is more or less what I want to replicate from their code

<nav class="flex items-center flex-column flex-wrap md:flex-row justify-between pt-4" aria-label="Table navigation">
        <span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-gray-900 dark:text-white">1-10</span> of <span class="font-semibold text-gray-900 dark:text-white">1000</span></span>
        <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
            <li>
                <a href="#" class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
            </li>
  
            <li>
        <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
            </li>
        </ul>
    </nav>

All I got so far with is this

There are also different use cases where Flowbite uses <span> in the table design too.

1 - How can I use pagination_opt to achieve what I need or is there any other approach that accepts any html tag or tailwind? My current opts are:

def pagination_opts2 do
    [
      page_links: :hide,
      # The attributes for the <nav> element that wraps the pagination links
      wrapper_attrs: [class: "flex items-center justify-center flex-wrap md:flex-row justify-between pt-4"],
      previous_link_attrs: [class: "flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"],
      previous_link_content:  Phoenix.HTML.raw("Previous"),
      next_link_attrs: [class: "flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"],
      next_link_content: Phoenix.HTML.raw("Next")
    ]
  end

2 - How do I get the values or the total number of records, page_size and current page number so I can somehow construct the part ?

Thanks

[woylie]

You can add a wrapper around the pagination component and derive values from the Flop.Meta struct. Roughly:

 attr :meta, Flop.Meta, required: true
 attr :path, :any, default: nil
 attr :on_paginate, JS, default: nil
 attr :target, :any, default: nil

 def pagination(%{meta: meta} = assigns) do
   assigns =
     assign(assigns,
       from: meta.current_offset + 1,
       to: min(meta.current_offset + meta.page_size, meta.total_count)
     )

   ~H"""
   <div :if={@meta.total_pages > 1}>
     <div>Showing {@from}-{@to} of {@meta.total_count}</div>
     <Flop.Phoenix.pagination
       meta={@meta}
       path={@path}
       on_paginate={@on_paginate}
       target={@target}
     />
   </div>
   """
 end

Page links can be hidden with page_link: :hide, see https://hexdocs.pm/flop_phoenix/Flop.Phoenix.html#t:pagination_option/0.

[kuatroka]

Thanks for your code guide. I had to change the templating part a bit. within <span> it worked with <=% > tags. In case anyone stumbles on this, below is the fully working code for pagination using pagination function

//flop_components.ex

## pagination options
def pagination_opts do
    [
      page_links: :hide,
      # The attributes for the <nav> element that wraps the pagination links
      wrapper_attrs: [class: "inline-flex -space-x-px rtl:space-x-reverse text-sm h-8"],
      previous_link_attrs: [class: "flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"],
      previous_link_content:  Phoenix.HTML.raw("Previous"),
      next_link_attrs: [class: "flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"],
      next_link_content: Phoenix.HTML.raw("Next")
    ]
  end

## pagination function with html rendering
def pagination(%{meta: meta} = assigns) do
    assigns =
      assign(assigns,
        from: meta.current_offset + 1,
        to: min(meta.current_offset + meta.page_size, meta.total_count)
      )
    ~H"""
    <nav :if={@meta.total_pages > 1} class="flex items-center flex-column flex-wrap md:flex-row justify-between py-4 px-2" aria-label="Table navigation">
    <span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-gray-900 dark:text-white"><%= @from%>-<%=@to%></span> of <span class="font-semibold text-gray-900 dark:text-white"><%=@meta.total_count%></span></span>
      <Flop.Phoenix.pagination
        opts={pagination_opts()}
        meta={@meta}
        path={@path}
        on_paginate={@on_paginate}
        target={@target}
      />
    </nav>
    """
  end

//index.html.heex
<.pagination meta={@meta} path={~p"/countries"}  />

[woylie]

I usually add those kinds of wrapper components to my CoreComponents module.

The interpolation with curly braces was introduced in LiveView 1.0.0-rc.8.

[kuatroka]

I added a wrong set of lines. Now edited.
Re CoreComponents, you mean you add the pagination_ops and pagination(assigns) to CoreComponents? Won't they get wiped out if I update Phoenix of LiveView?

Thanks about the rc.8. I guess I'll update the recently released full 1.0, then

[woylie]

Phoenix won't edit any generated files during version updates. You can safely edit CoreComponents.

[kuatroka]

Thanks

[kuatroka]

In case anyone needs the table UI including streams here it goes too. NOTE: This UI needs Flowbite library installed, but it'll work with any Tailwind I guess.
flowbite

//flop_components.ex
def table_opts do
    [
      table_attrs: [class: "w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"],
      thead_attrs: [class: "text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"],
      thead_tr_attrs: [],
      thead_th_attrs: [scope: "col", class: "px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-neutral-400"],
      th_wrapper_attrs: [class: "flex items-center"],
      tbody_attrs: [class: "divide-y divide-gray-200 dark:divide-neutral-700"],
      tbody_tr_attrs: [class: " bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer"],
      tbody_td_attrs: [class: " px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-neutral-200"],
      symbol_asc: symbol_asc(),
      symbol_desc: symbol_desc(),
      symbol_unsorted: symbol_unsorted()
    ]
  end

  defp symbol_asc do
    assigns = %{}
    ~H"""
    <.icon name="hero-chevron-up" class="size-3" />
    """
  end

  defp symbol_desc do
    assigns = %{}
    ~H"""
    <.icon name="hero-chevron-down" class="size-3" />
    """
  end

  defp symbol_unsorted do
    assigns = %{}
    ~H"""
    <.icon name="hero-chevron-up-down" class="size-4" />
    """
  end

//index.html.heex
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<Flop.Phoenix.table items={@streams.countries} 
meta={@meta} 
path={~p"/countries"} 
row_click={fn {_id, country} -> JS.navigate(~p"/countries/#{country}") end}
opts={ComboboxWeb.FlopComponents.table_opts()}
>
  <:col :let={{_, country}} label="id" field={:country_id}><%= country.country_id %></:col>
  <:col :let={{_, country}} label="Code" field={:country_code}><%= country.country_code %></:col>
  <:col :let={{_, country}} label="Name" field={:country_name}><%= country.country_name %></:col>
    <:action :let={{_id, country}} label="Actions">
    <div class="sr-only">
      <.link navigate={~p"/countries/#{country}"}>Show</.link>
    </div>
    <.link patch={~p"/countries/#{country}/edit"} class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 focus:outline-none focus:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:text-blue-400 dark:focus:text-blue-400">Edit</.link>
  </:action>
  <:action :let={{id, country}} >
    <.link
      phx-click={JS.push("delete", value: %{id: country.id}) |> hide("##{id}")}
      data-confirm="Are you sure?"
    class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-red-600 hover:text-red-800 focus:outline-none focus:text-red-800 disabled:opacity-50 disabled:pointer-events-none dark:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400">
      Delete
    </.link>
  </:action>

</Flop.Phoenix.table>
<.pagination meta={@meta} path={~p"/countries"}  />
</div>

The end result looks like this