Pagination

Preview

A working preview of Pagination in the Brickclay style. Try it.

Interactive playground

Rows per page

Showing 1 to 25 of 237 Records

1 - 2 of 10

-

• 1
• 2

Both on: showPageSize=true. Both off: showPageSize=false. Just one off: the object form, e.g. { label: false }, see the generated markup below.

Applied in two places: the flex row carrying justify-between (not the outer padding/border wrapper), controls arrangement among the top-level blocks, and the nav itself, which only has room to act on once it's the sole block left (it grows to fill the row), there the same class spreads its own two children (page count vs. page numbers) instead. Toggle off showPageSize and showRecordsText, then try justify-between here.

total: 237, pageSize: 25, activePage: 1

Copy<bk-pagination [total]="total" [pageSize]="pageSize" [activePage]="activePage"
  (pageChanged)="onPageChanged($event)"
  (changePageSize)="onPageSizeChanged($event)">
</bk-pagination>

Event log

Change the page or the page size to see emitted events.

Examples

Default, all three blocks shown

Showing 1 to 25 of 120 Records

1 - 2 of 5

[showPageSize]="false"

"Rows per page" hidden. With two blocks left, justify-between already pins the pager to the right on its own.

[showPageSize]="false" + customClass="justify-around"

Same two blocks as above (records text + nav), but customClass swaps the row's default justify-between for justify-around, each block also gets breathing room from its own edge, pushing the two further apart than the default edge-to-edge placement.

[showPageSize]="{ label: false }"

"Rows per page" text hidden, select kept, showPageSize also accepts { label?, input? } for hiding just one half.

[showPageSize]="{ input: false }"

Select hidden, "Rows per page" text kept on its own.

[showRecordsText]="false"

"Showing X to Y of Z Records" text hidden.

[showPageCount]="false"

"N-M of P" page-count text hidden; prev/next/page-number controls stay.

Compact, all three off, e.g. a modal footer

Only the nav (prev/next/page numbers) remains. With a single block left, justify-between has nothing to distribute against and the nav sits flush left, pass customClass="justify-end" (applied to the same flex row justify-between is on) to pin it right again, or justify-center to center it.

Page size + records off, page count on, spread page count from page numbers

Nav is the only block left, so it grows to fill the row, customClass="justify-between" now acts on nav's own two children instead, pushing the "N-M of P" text away from the prev/next/page-number controls rather than leaving them bunched together at the left edge.

Usage

total / pageSize / activePage drive the page count and the visible window; pageChanged and changePageSize report interaction back.

Copy<bk-pagination
  [total]="total"
  [pageSize]="pageSize"
  [activePage]="activePage"
  (pageChanged)="onPageChanged($event)"
  (changePageSize)="onPageSizeChanged($event)">
</bk-pagination>

// Hide any of the three blocks independently - each defaults to true, so
// nothing already using bk-pagination changes unless it opts in. With only
// the nav left, justify-between has nothing to distribute against and it
// sits flush left - customClass lands on that same flex row, so pass
// "justify-end" (or "justify-center") to reclaim its position:
<bk-pagination
  [total]="total"
  [pageSize]="pageSize"
  [activePage]="activePage"
  [showPageSize]="false"
  [showRecordsText]="false"
  [showPageCount]="false"
  customClass="justify-end">
</bk-pagination>