Skip to content
RevoGrid [Pro]

Pagination

Module Extensions

HTMLRevoGridElementEventMap (Extended from global)

interface HTMLRevoGridElementEventMap {
  /**
       * Event triggered when the page is changed
       *
       * @example
       * ```typescript
       * grid.addEventListener(PAGE_CHANGE_EVENT, (e) => {
       *   console.log(e);
       * });
       * ```
       */
      [PAGE_CHANGE_EVENT]: PageChangeEvent
}

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
  /**
       * Additional data property for pagination
       *
       * @example
       * ```typescript
       * const grid = document.createElement('revo-grid');
       * grid.additionalData = {
       *   pagination: {
       *     itemsPerPage: 10,
       *     initialPage: 1, // default: 0
       *     total: 100, // default: 0
       *   },
       * };
       * ```
       */
      pagination?: PaginationConfig & PaginationPanelConfig
}

Plugin API

PaginationPlugin

The PaginationPlugin introduces pagination functionality to the RevoGrid, allowing for efficient navigation through large datasets by dividing data into manageable pages. This plugin provides a visual pagination panel and emits events to notify the application of page changes, facilitating dynamic data loading and UI updates.

Key Features:

  • Integrates a PaginationPanel for user interaction, enabling page navigation through intuitive controls.
  • Emits PAGE_CHANGE_EVENT upon page changes, providing a skip property indicating the number of pages to skip.
  • Listens to additionaldatachanged events to update pagination settings automatically when user configurations change.
  • Configurable through additional data properties such as itemsPerPage, initialPage, and total for tailored pagination behavior.

Usage:

  • Include the plugin in the RevoGrid’s plugin array to activate pagination.
  • Configure pagination through the grid’s additionalData property, specifying itemsPerPage, initialPage, and total.

Usage Example:

import { PaginationPlugin } from './pagination';


const grid = document.createElement('revo-grid');
grid.plugins = [PaginationPlugin];


grid.additionalData = {
  pagination: {
    itemsPerPage: 20,
    initialPage: 0,
    total: 100,
  },
};

By using this plugin, developers can efficiently manage large datasets within RevoGrid, enhancing user experience through improved data navigation and interaction capabilities.

class PaginationPlugin {
  setConfig(config: Partial<PaginationConfig & PaginationPanelConfig> | undefined);
}

PaginationConfig

This file defines TypeScript types used for configuring pagination in RevoGrid. These types encapsulate both the core pagination logic and user interface settings for the PaginationPanel.

Key Types:

  • PaginationConfig: Specifies core pagination properties including the number of items per page (itemsPerPage), the initial page (initialPage), and the total number of items (total).

  • PaginationPanelConfig: Configures the appearance and behavior of the pagination UI, including the number of numeric buttons (buttonCount), page information display (info and totalInfo), page size options (pageSizes), and button navigation (navigation). It also allows customization of UI text through PaginationLocales.

  • PaginationFullConfig: Combines PaginationConfig and PaginationPanelConfig for comprehensive pagination setup.

  • PageChangeEvent: Represents the event structure when a page is changed, containing the skip property indicating the number of items to skip.

Usage: These types are used to configure pagination behavior and appearance within the RevoGrid, enabling developers to customize how data is paginated and presented in the grid interface.

Example

const paginationConfig: PaginationFullConfig = {
  itemsPerPage: 10,
  initialPage: 1,
  total: 100,
  buttonCount: 5,
  navigation: true,
  locales: {
    previous: 'Prev',
    next: 'Next',
  },
};

By utilizing these types, developers can create a tailored pagination experience, optimizing data navigation and presentation in RevoGrid applications.

Pagination configuration

/**
 * This file defines TypeScript types used for configuring pagination in RevoGrid.
 * These types encapsulate both the core pagination logic and user interface
 * settings for the PaginationPanel.
 *
 * Key Types:
 * - `PaginationConfig`: Specifies core pagination properties including the number
 *   of items per page (`itemsPerPage`), the initial page (`initialPage`), and the
 *   total number of items (`total`).
 *
 * - `PaginationPanelConfig`: Configures the appearance and behavior of the pagination
 *   UI, including the number of numeric buttons (`buttonCount`), page information
 *   display (`info` and `totalInfo`), page size options (`pageSizes`), and button
 *   navigation (`navigation`). It also allows customization of UI text through
 *   `PaginationLocales`.
 *
 * - `PaginationFullConfig`: Combines `PaginationConfig` and `PaginationPanelConfig`
 *   for comprehensive pagination setup.
 *
 * - `PageChangeEvent`: Represents the event structure when a page is changed, containing
 *   the `skip` property indicating the number of items to skip.
 *
 * **Usage**:
 * These types are used to configure pagination behavior and appearance within the
 * RevoGrid, enabling developers to customize how data is paginated and presented in
 * the grid interface.
 *
 * ### Example
 * ```typescript
 * const paginationConfig: PaginationFullConfig =  {
 *   itemsPerPage: 10,
 *   initialPage: 1,
 *   total: 100,
 *   buttonCount: 5,
 *   navigation: true,
 *   locales: {
 *     previous: 'Prev',
 *     next: 'Next',
 *   },
 * };
 * ```
 *
 * By utilizing these types, developers can create a tailored pagination experience,
 * optimizing data navigation and presentation in RevoGrid applications.
 */


/**
 * Pagination configuration
 */
export type PaginationConfig = {
  /**
   * Number of items per page
   */
  itemsPerPage: number;
  /**
   * Initial page number (1 based)
   */
  initialPage: number;
  /**
   * Total number of items
   */
  total: number;
};

PaginationLocales

export type PaginationLocales =  {
  previous?: string;
  next?: string;
  first?: string;
  last?: string;
  page?: string;
  of?: string;
  items?: string;
};

PaginationPanelConfig

export type PaginationPanelConfig =  {
  /**
   * Maximum numeric buttons count before the buttons are collapsed.
   * @default undefined
   */
  buttonCount?: number;


  /**
   *   Toggles the information about the current page.
   */
  info?: boolean;


  /**
   *   Toggles the information about the total number of records.
   */
  totalInfo?: boolean;


  /** Shows a menu for selecting the page size. */
  pageSizes?: boolean | number[];


  /**
   *  Pager position relative to the Grid data table.
   */
  position?: 'top' | 'bottom';


  /**
   * Toggles the navigation buttons.
   */
  navigation?: boolean;


  locales?: PaginationLocales;
};

PaginationFullConfig (Extended from index.ts)

export type PaginationFullConfig =  PaginationConfig & PaginationPanelConfig;

PageChangeEvent

Event triggered when the page is changed

/**
 * Event triggered when the page is changed
 */
export type PageChangeEvent =  {
  /**
   * Number of items to be skipped
   */
  skip: number;
};

PaginationPanel

The PaginationPanel class provides a UI component for navigating through data pages in a RevoGrid instance. It generates a set of buttons and a select dropdown for page navigation, allowing users to efficiently traverse large datasets.

Key Features:

  • Supports customizable navigation with first, previous, next, and last buttons.
  • Displays current page information and total number of pages.
  • Configurable through PaginationConfig and PaginationPanelConfig for flexible pagination behavior.
  • Localizable UI elements with default texts like ‘Page’, ‘of’, ‘items’, etc., which can be overridden through the locales property.
  • Automatically updates the pagination panel on configuration changes, ensuring consistency with the dataset size and user preferences.

Usage:

  • Instantiate the PaginationPanel by providing a configuration object and a callback for page changes. Integrate it into the RevoGrid by rendering it in the grid’s additional nodes.

Example

const paginationConfig: PaginationConfig = {
  itemsPerPage: 10,
  initialPage: 0,
  total: 100,
};
const onPageChange = (page: number) => {
  console.log(`Page changed to: ${page}`);
};
const paginationPanel = new PaginationPanel(paginationConfig, onPageChange);


// Render method can be called to integrate into the UI
const panelNode = paginationPanel.render();

By integrating the PaginationPanel, RevoGrid users can enhance their data navigation capabilities, offering an intuitive and responsive interface for interacting with paginated datasets.

class PaginationPanel {
  setRefresh(refresh?: () => void);


  render();


  update(config: Config);
}