Paginator

Paginator is used to break up large amounts of content into multiple pages, enabling users to easily navigate between pages of content.

Default Paginator

Usage

Within a standalone component

To use paginator in a standalone component, import DAFF_PAGINATOR_COMPONENTS directly into your custom component:

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  standalone: true,
  imports: [
    DAFF_PAGINATOR_COMPONENTS,
  ],
})
export class CustomComponent {}

Within a module (deprecated)

To use paginator in a module, import DaffPaginatorModule into your custom module:

import { NgModule } from '@angular/core';

import { DaffPaginatorModule } from '@daffodil/design/paginator';

@NgModule({
    declarations: [
    CustomComponent,
  ],
  exports: [
    CustomComponent,
  ],
  imports: [
    DaffPaginatorModule,
  ],
})
export class CustomComponentModule { }

This method is deprecated. It's recommended to update all custom components to standalone.

Truncation

An ellipsis is used to truncate pages when the number of pages exceed the maximum display limit. Double truncation appears when the current page is separated by more than three pages from both the first and last page.

Accessibility

Use aria-label or aria-labelledby to give a meaningful label to daff-paginator that describes the content controlled by the paginator. If more than one paginator component is used on a page, each will need a unique aria-label.