Pagination

TkPagination component description.

React

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

Vue

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

Angular

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

Basic

The basic usage of TkPagination.

View Code

React

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

Vue

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

Angular

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

Design

grouped, outlined, and text are available.

View Code

React

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

Vue

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

Angular

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

Mode

compact, compact-expanded are available.

View Code

React

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

Vue

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

Angular

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

API

Props

Name	Type	Default	Description
	number	1	The current page of the pagination.
	"compact", "compact-expanded"	null	The mode of the pagination
	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

Events

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