Pagination

TkPagination component description.

import { TkPagination } from '@takeoff-ui/react'

import { TkPagination } from '@takeoff-ui/vue'

import { TkPagination } from '@takeoff-ui/angular'

<TkPagination  type="outlined"
  totalItems={100}
  rowsPerPage={10}
  currentPage={1}
/>

<TkPagination  type="outlined"
  :totalItems="100"
  :rowsPerPage="10"
  :currentPage="1"
/>

<tk-pagination  type="outlined"
  [totalItems]="100"
  [rowsPerPage]="10"
  [currentPage]="1"
/>

Type:

Mode:

Total Items:

Rows Per Page:

Current Page:

Basic

The basic usage of TkPagination.

View Code

<TkPagination totalItems={50} rowsPerPage={10} />

<TkPagination totalItems="50" rowsPerPage="10" />

<tk-pagination [totalItems]="50" [rowsPerPage]="10" />

grouped, outlined, and text are available.

View Code

<TkPagination totalItems={50} rowsPerPage={10} type="outlined" />

<TkPagination :totalItems="50" :rowsPerPage="10" type="outlined" />

<tk-pagination [totalItems]="50" [rowsPerPage]="10" type="outlined" />

compact, compact-expanded are available.

View Code

<TkPagination totalItems={50} rowsPerPage={10} mode="compact" />

<TkPagination :totalItems="50" :rowsPerPage="10" mode="compact" />

<tk-pagination [totalItems]="50" [rowsPerPage]="10" mode="compact" />

Type	Default	Description
`number`	1	The current page of the pagination.
`string`	`'item: { startItem}-{ endItem}of{ totalItems}'`	Template string for items report in pagination. Available placeholders: {startItem}, {endItem}, {totalItems}
`"compact", "compact-expanded"`	null	The mode of the pagination
`string`	`'page: { currentPage}of{ totalPages}'`	Template string for current page report in pagination. Available placeholders: {currentPage}, {totalPages}
`boolean`	false	Whether the pagination elements should have rounded corners
`number`	10	Number of items per page.
`number[]`	[5, 10, 20, 50]	Number of items per page options
`number`	0	Number of total items.
`"grouped", "outlined", "text"`	'outlined'	The type of the pagination

Name	Description
tk-next-page	Pagination next button click event
tk-page-change	Pagination page change event
tk-prev-page	Pagination prev button click event
tk-rows-per-page-change	RowsPerPage change event