AppTablePagination
The pager under a table: a page-size menu, page links, and previous / next arrows.
<app-table-pagination page="2" page-size="10" total="47" base-href="/projects" />When a list is longer than one screenful, a pager breaks it into pages. <app-table-pagination> is the footer that sits flush under a table: a page-size menu ("10 per page") and numbered page links between previous / next arrows. It shows no row range and no total, because the page links already say where you are. Give it total and page-size for the page-size menu; omit them and it pages without the menu.
Its look comes entirely from the shared @webority/theme, so the Razor <app-table-pagination> and the React <AppTablePagination> render identically — the pager is the same on every Webority surface.
Playground
Every attribute, live. Each change re-renders the real tag helper on the server, and clicking a nav arrow or a page-size option in the preview is itself a real navigation — it reloads this page with the new page/pageSize in the URL, same as it would against a real list.
showPageSize={false} has no Razor equivalent — full mode (page-size + total both set) always renders the "N per page" menu. Set page-size or total to 0 to try the compact fallback instead: no menu, and total-pages then takes over.The pager
Give the current page, the page size, the total row count, and a base URL — the pager renders a page-size menu ("10 per page"), numbered page links, and previous / next arrows. Every control navigates by query string.
Show code
<app-table-pagination page="2" page-size="10" total="47" base-href="/projects" />
page=1 — the row you were on no longer maps to a page. Pages are one-indexed; controls resolve to {base-href}?{page-param}={n}&{page-size-param}={size}. Set page-param / page-size-param if your query string differs.Under a table
The pager is designed to sit directly beneath a table. Render the current page's rows above it and the pager below.
| Building | Status |
|---|---|
| Building 6 | Draft |
| Building 7 | Compliant |
| Building 8 | Compliant |
Show code
<app-data-table>
<thead>…</thead>
<tbody>… current page's rows …</tbody>
</app-data-table>
<app-table-pagination page="2" page-size="10" total="47" base-href="/projects" />
page query value, fetch just that page's rows, and pass the total page count back — don't load the whole list and hide the rest.Numbered and prev-next modes
The default, mode="numbered", puts windowed page links between the prev/next arrows: first and last page, the pages around the current one, and a single ellipsis over any run of hidden pages. mode="prev-next" keeps just the arrows and adds a "Page N of M" readout beside them.
Show code
<app-table-pagination page="6" page-size="10" total="200" base-href="/projects" />
Show code
<app-table-pagination page="2" page-size="10" total="47" mode="prev-next" base-href="/projects" />
When to use
Use it when
- A list is long enough that showing everything at once is unwieldy.
- The user needs to move between pages of a long list.
- You are paging a table and want a standard footer with page links and previous / next arrows.
Reach for something else when
- The list is short and fits comfortably on one screen. → no pager
- You want the page size to change without a page reload. → a client-side data grid
- The user should keep scrolling instead of paging. → infinite scroll
Best practices
| Building |
|---|
| Building 6 |
| Building 7 |
| Building |
|---|
| Building 6 |
| Building 7 |
Every option
The whole surface of the component, one cell per value — nav-link disabled states, the numbered window at every edge, the prev-next readout, and the empty/zero-row case.
nav state — where page sits relative to total-pages
page="1" (previous disabled)page="3" (both enabled)page="5" (next disabled — last page)total="4" page-size="10" (single page, both disabled)mode="numbered" (default): window position
page="1" of 20 (window flush left, one ellipsis)page="6" of 20 (window centered, two ellipses)page="20" of 20 (window flush right, one ellipsis)total="47" (every page fits, no ellipsis)mode="prev-next": the "Page N of M" readout
page="1" of 5 (previous disabled)page="3" of 5 (both enabled)showPageSize / page-sizes
page-size/total omitted → compact, no page-size menupage-sizes="20,40" — custom option listshowPageSize — no Razor attributepage-size/total for the menu-less fallback instead.empty result set
total="0"Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
| page | int | 1 | The current page, one-indexed. Highlighted in the page links and shown in the prev-next "Page N of M" readout. |
| page-size | int | — | How many rows each page holds. Set with total to render the "N per page" menu. |
| total | int | — | Total row count across all pages. Set with page-size to enable the page-size menu (page count is derived from these). |
| total-pages | int | 1 | Total page count — used only in the compact fallback (no page-size menu) when total/page-size are omitted. |
| base-href | string | — | The base URL each control links at. |
| page-param | string | page | The query-string parameter name carrying the page number. |
| page-size-param | string | pageSize | The query-string parameter name carrying the page size. |
| page-sizes | string | 5,10,25,50 | Comma-separated options for the page-size menu, each shown as "N per page". |
| mode | numbered | prev-next | numbered | numbered puts windowed page links (first/last plus an ellipsis over any run of hidden pages) between the arrows. prev-next is the arrows with a "Page N of M" readout beside them. |
| showPageSize | bool | — | React-only. Razor has no equivalent attribute — full mode always shows the page-size menu; omit page-size/total to fall back to the menu-less compact mode instead. |