Pagination

Module Extensions

HTMLRevoGridElementEventMap (Extended from global)

interface HTMLRevoGridElementEventMap {
  [PAGE_CHANGE_EVENT]: PageChangeEvent
}

---

HTMLRevoGridElement (Extended from @revolist/revogrid)

interface HTMLRevoGridElement {
  /**
       * Direct pagination configuration.
       */
      pagination?: Partial<PaginationFullConfig>
}

---

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
  /**
       * @deprecated Use `grid.pagination` instead.
       */
      pagination?: Partial<PaginationFullConfig>
}

Plugin API

PaginationPlugin

Dependencies

• Optional sorting-capable-plugin: Integrates with a plugin exposing sorting state for remote pagination sorting.
• Event integration beforefilterapply, beforesortingapply, beforesourcesortingapply: Integrates with filter events to forward remote filter state to loadData.

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

  setPage(page: number, emitChange = true);
}

---

PaginationLoadDataResult

interface PaginationLoadDataResult {
  data: T[];
  count?: number;
  total?: number
}

---

PaginationLoadData

export type PaginationLoadData<T = any> = (
  skip: number,
  take: number,
  order?: SortingOrder,
  filter?: Record<ColumnProp, FilterCollectionItem>,
) => Promise<T[] | PaginationLoadDataResult<T>>;

---

PaginationConfig

export type PaginationConfig = {
  itemsPerPage: number;
  initialPage: number;
  total: number;
  loadData?: PaginationLoadData;
};

---

PaginationLocales

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

---

PaginationPanelConfig

export type PaginationPanelConfig = {
  buttonCount?: number;
  info?: boolean;
  totalInfo?: boolean;
  pageSizes?: boolean | number[];
  position?: 'top' | 'bottom';
  navigation?: boolean;
  locales?: PaginationLocales;
};

---

PaginationFullConfig (Extended from index.ts)

export type PaginationFullConfig = PaginationConfig & PaginationPanelConfig;

---

PageChangeEvent

export type PageChangeEvent = {
  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);

  setPage(page: number, emitChange = true);

  render();

  update(config: Config);
}