Ignite UI for React

All
  • Public
  • Public/Protected
  • All

Class IgrPaginator

Paginator component description

Callable

  • IgrPaginator(): ReactNode

    Returns ReactNode

Accessors

Events

Methods

Properties

Accessors

isFirstPage

isFirstPage: boolean

Returns if the current page is the first page.

const lastPage = this.paginator.isFirstPage;

isLastPage

isLastPage: boolean

Returns if the current page is the last page.

const lastPage = this.paginator.isLastPage;

Events

onPageChange

onPageChange: (args: CustomEvent<number>) => void

Type declaration

onPaging

onPaging: (args: CustomEvent<IgrPageCancellableEventArgsDetail>) => void

Type declaration

onPagingDone

onPagingDone: (args: CustomEvent<IgrPageEventArgsDetail>) => void

Type declaration

onPerPageChange

onPerPageChange: (args: CustomEvent<number>) => void

Type declaration

Methods

nextPage

  • nextPage(): void

    Goes to the next page of the IgxPaginatorComponent, if the paginator is not already at the last page.

    this.paginator.nextPage();

    Memberof

    IgxPaginatorComponent

    Returns void

paginate

  • paginate(val: number): void

    Goes to the desired page index.

    this.paginator.paginate(1);

    Memberof

    IgxPaginatorComponent

    Parameters

    • val: number

    Returns void

previousPage

  • previousPage(): void

    Goes to the previous page of the IgxPaginatorComponent, if the paginator is not already at the first page.

    this.paginator.previousPage();

    Memberof

    IgxPaginatorComponent

    Returns void

Properties

overlaySettings

overlaySettings: IgrOverlaySettings

Sets custom OverlaySettings.

<igx-paginator [overlaySettings] = "customOverlaySettings"></igx-paginator>

page

page: number

Gets/Sets the current page of the paginator. The default is 0.

let page = this.paginator.page;

perPage

perPage: number

Gets/Sets the number of visible items per page in the paginator. The default is 15.

let itemsPerPage = this.paginator.perPage;

resourceStrings

resourceStrings: IgrPaginatorResourceStrings

An accessor that sets the resource strings. By default it uses EN resources.

selectOptions

selectOptions: number[]

Sets custom options in the select of the paginator

let options = this.paginator.selectOptions;

totalPages

totalPages: number

Total pages calculated from totalRecords and perPage

totalRecords

totalRecords: number

Sets the total records.

let totalRecords = this.paginator.totalRecords;