Pagination

Set query: false to bypass Query when the loader owns fetching/cache policy.

For query usage, polling, shared sources and typed configuration defaults, see Server Data Queries. For signal, context?.signal and transport cancellation, see loader parameters and cancellation. For shared sources, see sharing reads; for consistency, see server ordering; for reconcile and onStatus, see pending edits and status.

The query concepts are explained individually:

• Pages, blocks, routes and observers
• Polling, mount, focus and reconnect refetch
• staleTime freshness and gcTime cache retention
• enabled, offline pauses and networkMode
• retry, retryDelay and retryOnMount
• meta and callback policies
• Contexts, sources, resources, deduplication and concurrency
• Invalidation, accepted writes and acceptance fences
• Eventual/snapshot consistency and deterministic ordering
• Pending edits, reconciliation, hydration and status
• Cancellation and destruction

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, beforequickfilterapply, beforesortingapply, beforesourcesortingapply: Integrates with filter and quick-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

Existing positional loader. Optional cancellation context is appended at position ten.

@see Loader parameters and cancellation

/**
 * Existing positional loader. Optional cancellation context is appended at position ten.
 * @see [Loader parameters and cancellation](https://pro.rv-grid.com/guides/server-data-queries/#loader-parameters-and-cancellation)
 */
export type PaginationLoadData<T = any> = (
  /** Number of remote rows to skip. */
  skip: number,
  /** Number of remote rows to request. */
  take: number,
  /** Current remote sorting state. */
  order?: SortingOrder,
  /** Backward-compatible model containing at most the first filter condition per column. */
  singleConditionFilters?: Record<ColumnProp, FilterCollectionItem>,
  /** Complete advanced filter model, including every same-column condition and relation. */
  multiConditionFilters?: MultiFilterItem,
  /** Normalized global quick-filter payload. */
  quickFilter?: QuickFilter,
  /** Resolved temporal semantics for this request. */
  temporalContext?: TemporalFilterContext,
  /** Canonical filter tree, including nested groups and custom structured operators. */
  filterAst?: FilterAst,
  /** Captured clock and timezone context used to evaluate the canonical tree. */
  executionContext?: FilterExecutionContext,
  /** Shared loading engine cancellation context; old callbacks may ignore it. */
  context?: { readonly signal: AbortSignal },
) => Promise<T[] | PaginationLoadDataResult<T>>;

---

PaginationConfig

@see Query configuration types and defaults

/** @see [Query configuration types and defaults](https://pro.rv-grid.com/guides/server-data-queries/#configuration-types) */
export type PaginationConfig = {
  itemsPerPage: number;
  initialPage: number;
  total: number;
  loadData?: PaginationLoadData;
  /**
   * Optional native polling, freshness, retry, shared-source and reconciliation options.
   * @see [Query configuration types and defaults](https://pro.rv-grid.com/guides/server-data-queries/#configuration-types)
   */
  query?:
    | import('@revolist/data-query').LoadQueryOptions<
        any[] | PaginationLoadDataResult
      >
    | false;
};

---

PaginationLocales

export type PaginationLocales = {
  previous?: string;
  next?: string;
  first?: string;
  last?: string;
  page?: string;
  of?: string;
  items?: string;
  loading?: 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);
}