Tailwind CSS Pagination with Angular

Our Tailwind CSS pagination can be used to show a user how to navigate between different pages of table or a group of elements.

Below we present you our Angular Pagination example crafted with Tailwind CSS that will help you build enterprise-level applications with ease. Customize the component or add it directly to your project!

You first need to import the DUIPaginator Module into your application module

     import { DUIPaginator } from "david-ui-angular";
 
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, DUIPaginator],
    providers: [],
    bootstrap: [AppComponent],
  })
  export class AppModule {}

Simple Pagination

Use the example below to create a simple and minimal pagination.

Page 1 of 10

     
  <dui-paginator [length]="50"></dui-paginator>

Standard Pagination

Use the standard pagination variant.

     
  <dui-paginator variant="Standard" [length]="50"></dui-paginator>

Circular Pagination

Use the circular pagination variant.

     
  <dui-paginator variant="Circular" [length]="50"></dui-paginator>

Pagination First and Last Option

You can also toggle the first and last page option

Page 1 of 10

     
  <div class="flex flex-col w-95 items-center gap-2">
    <dui-paginator variant="Standard" [showFirstLastOption]="false" [length]="50"></dui-paginator>
    <dui-paginator [showFirstLastOption]="false" [length]="50"></dui-paginator>
  </div>

Pagination Properties

The following properties are available for dui-pagination component. These are the custom properties that we've added for the pagination component and you can use all the other native properties as well.

Attribute	Type	Description	Default
`variant`	`variant`	change pagination variant	`simple`
`color`	`color`	change pagination color	`gray`
`className`	`string`	Add custom className for pagination	`''`
`page`	`boolean`	Current page	`md`
`pageSize`	`number`	Shown length of data on single page pagination	`false`
`previousButtonLabel`	`string`	Label for previous page button pagination	`previous`
`nextButtonLabel`	`string`	Label for next page button pagination	`next`
`length`	`number`	Length of data to be paged in pagination	`10`
`showFirstLastOption`	`boolean`	Toggle first and last page button in pagination	`true`
`visibleRangeLength`	`number`	Visible number of pages on UI	`5`
`pageSizes`	`number array`	Change page size dynamically from list in pagination	`[5,10,15,20,25]`

Type - Variant

     
  type variant = 'simple' | 'standard' | 'circular' | 'grouped';

Type - Color

     type colors =
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

	import { DUIPaginator } from "david-ui-angular";

	@NgModule({
	declarations: [AppComponent],
	imports: [BrowserModule, DUIPaginator],
	providers: [],
	bootstrap: [AppComponent],
	})
	export class AppModule {}


	<dui-paginator variant="Standard" [length]="50"></dui-paginator>


	<dui-paginator variant="Circular" [length]="50"></dui-paginator>


	<div class="flex flex-col w-95 items-center gap-2">
	<dui-paginator variant="Standard" [showFirstLastOption]="false" [length]="50"></dui-paginator>
	<dui-paginator [showFirstLastOption]="false" [length]="50"></dui-paginator>
	</div>


	type variant = 'simple' \| 'standard' \| 'circular' \| 'grouped';

	type colors =
	\| "blue-gray"
	\| "gray"
	\| "brown"
	\| "deep-orange"
	\| "orange"
	\| "amber"
	\| "yellow"
	\| "lime"
	\| "light-green"
	\| "green"
	\| "teal"
	\| "cyan"
	\| "light-blue"
	\| "blue"
	\| "indigo"
	\| "deep-purple"
	\| "purple"
	\| "pink"
	\| "red";