React Data GridPlugin: Pagination

Description
Options
- pagination
Methods

Description

The plugin adds full-featured pagination capabilities to a table component. It manages splitting rows into pages, rendering navigation controls, and exposing methods and configuration for initializing and updating pagination state.

Core responsibilities:

Calculate which rows should be visible based on current page and pageSize.
Render a toolbar area containing:
- a page size dropdown section (if showPageSize = true)
- a row counter section ("1 - 10 of 50", if showCounter = true)
- page navigation section (if showNavigation = true)
Emit hooks when:
- the user navigates to a different page
- the user changes the number of rows per page
- the user changes the visibility of any sections
Allow external code to programmatically:
- jump to a specific page
- change the page size
- change the visibility of UI sections

Example

<HotTable
  data={getData()}
  pagination={{
    pageSize: 10,
    pageSizeList: ['auto', 5, 10, 20, 50, 100],
    initialPage: 1,
    showPageSize: true,
    showCounter: true,
    showNavigation: true,
  }}
/>

Options

pagination

Source code

pagination.pagination : boolean

The pagination option configures the Pagination plugin.

You can set the pagination option to one of the following:

Setting	Description
`false`	Disable the `Pagination` plugin
`true`	Enable the `Pagination` plugin

pagination: Additional options

If you set the pagination option to an object, you can set the following Pagination plugin options:

Option	Possible settings	Description
`pageSize`	A number or `auto` (default: `10`)	Sets the number of rows displayed per page. If `'auto'` is set, the page size will be calculated to match all rows to the currently set table's viewport height
`pageSizeList`	An array (default: `['auto', 5, 10, 20, 50, 100]`)	Defines the selectable values for page size in the UI
`initialPage`	A number (default: `1`)	Specifies which page to display on initial load
`showPageSize`	Boolean (default: `true`)	Controls visibility of the "page size" section
`showCounter`	Boolean (default: `true`)	Controls visibility of the "page counter" section (e.g., "1 - 10 of 50");
`showNavigation`	Boolean (default: `true`)	Controls visibility of the "page navigation" section
`uiContainer`	An HTML element (default: `null`)	The container element where the pagination UI will be installed. If not provided, the pagination container will be injected below the root table element.

Default: undefined
Since: 16.1.0
Example

// enable the `Pagination` plugin
pagination: true,

Methods

destroy

Source code

pagination.destroy()

Destroys the plugin instance.

disablePlugin

Source code

pagination.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

enablePlugin

Source code

pagination.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

firstPage

Source code

pagination.firstPage()

Switches the page to the first one.

getCurrentPageData

Source code

pagination.getCurrentPageData() ⇒ Array<Array>

Gets the visual data for the current page. The returned data may be longer than the defined page size as the data may contain hidden rows (rows that are not rendered in the table).

Returns: Array<Array> - Returns the data for the current page.

getPaginationData

Source code

pagination.getPaginationData() ⇒ Object

Gets the pagination current state. Returns an object with the following properties:

currentPage: The current page number.
totalPages: The total number of pages.
pageSize: The page size.
pageSizeList: The list of page sizes.
autoPageSize: Whether the page size is calculated automatically.
numberOfRenderedRows: The number of rendered rows.
firstVisibleRowIndex: The index of the first visible row.
lastVisibleRowIndex: The index of the last visible row.

hasNextPage

Source code

pagination.hasNextPage() ⇒ boolean

Checks, based on the current internal state, if there is a next page.

hasPreviousPage

Source code

pagination.hasPreviousPage() ⇒ boolean

Checks, based on the current internal state, if there is a previous page.

hidePageCounterSection

Source code

pagination.hidePageCounterSection()

Hides the page counter section in the pagination UI.

Emits: Hooks#event:afterPageCounterVisibilityChange

hidePageNavigationSection

Source code

pagination.hidePageNavigationSection()

Hides the page navigation section in the pagination UI.

Emits: Hooks#event:afterPageNavigationVisibilityChange

hidePageSizeSection

Source code

pagination.hidePageSizeSection()

Hides the page size section in the pagination UI.

Emits: Hooks#event:afterPageSizeVisibilityChange

isEnabled

Source code

pagination.isEnabled() ⇒ boolean

Checks if the plugin is enabled in the handsontable settings. This method is executed in Hooks#beforeInit hook and if it returns true than the Pagination#enablePlugin method is called.

lastPage

Source code

pagination.lastPage()

Switches the page to the last one.

Source code

pagination.nextPage()

Switches the page to the next one.

Source code

pagination.prevPage()

Switches the page to the previous one.

resetPage

Source code

pagination.resetPage()

Resets the current page to the initial page (initialValue) defined in the settings.

resetPageSize

Source code

pagination.resetPageSize()

Resets the page size to the initial value (pageSize) defined in the settings.

resetPagination

Source code

pagination.resetPagination()

Resets the pagination state to the initial values defined in the settings.

setPage

Source code

pagination.setPage(pageNumber)

Allows changing the page for specified page number.

Emits: Hooks#event:beforePageChange, Hooks#event:afterPageChange

Param	Type	Description
pageNumber	`number`	The page number to set (from 1 to N). If `0` is passed, it will be transformed to `1`.

setPageSize

Source code

pagination.setPageSize(pageSize)

Changes the page size for the pagination. The method recalculates the state based on the new page size and re-renders the table. If 'auto' is passed, the plugin will calculate the page size based on the viewport size and row heights to make sure that there will be no vertical scrollbar in the table.

Emits: Hooks#event:beforePageSizeChange, Hooks#event:afterPageSizeChange