Catalog Pagination

<.paginated>

ConnieUI.Pagination

Title Status
1. Director Agreement — L. Hansen
 Signed
2. Talent Release — M. Olsen
 Pending
3. Location Permit — Nyhavn
 Pending
4. Composer Agreement — A. Riis
 Signed
5. NDA — Post-production House
 Expired
6. Crew Contract — Gaffer
 Draft
7. Director Agreement — L. Hansen
 Signed
8. Talent Release — M. Olsen
 Pending
9. Location Permit — Nyhavn
 Pending
10. Composer Agreement — A. Riis
 Signed
HEEx 
<div class="flex h-96 w-2xl flex-col">
  <ConnieUI.Pagination.paginated
    :let={%{entries: rows, load_more: load_more}}
    id="catalog-paginated-table" cursor_fields={[id: :asc]} limit={10}
    query={@query}
    class="flex min-h-0 flex-1 flex-col"
  >
    <.document_table id="catalog-paginated-table-rows" rows={rows} load_more={load_more} />
  </ConnieUI.Pagination.paginated>
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string
:integer
:atom
:string

Set by the example

query cursor_fields group empty_groups group_sort group_key class

Docs

No @doc for this component.

Attribute Type Default Description
id * :string
query * :any
cursor_fields * :list
limit * :integer
primary_key :atom :id
insert :string "end"
start | end
group :any nil
a 1-arity function from an entry to its group, any term (a folder, or nil for none). Groups the stream; see Groups above. The query must sort by group first.
empty_groups :list []
the groups known to have no entries that the list still shows (an empty folder), placed by `group_sort`; see Groups above
group_sort :any nil
a 1-arity function from a group to the term the groups are ordered by, which places the `empty_groups`. Defaults to `group_key`.
group_key :any &ConnieUI.Pagination.Group.key/1
a 1-arity function from a group to the term that identifies it and its DOM id. Defaults to a map's `:id`, or the group itself.
class :any nil
classes for the element wrapping the block, which is the one thing between the caller's layout and the list it draws
Slot Slot attributes Description
inner_block *