Pagination

Enable PaginationPlugin to efficiently manage large datasets by breaking them into smaller, more manageable pages, enhancing both performance and user experience. Pagination allows you to divide your dataset into discrete pages, each containing a specified number of rows. Users can then navigate through these pages rather than scrolling through a long list of data.

Source code

TypeScript

src/components/pagination/PaginationLocal.ts

import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements(); // Define the custom element

import { currentTheme, useRandomData } from '../composables/useRandomData';
import {
  PaginationPlugin,
  ColumnStretchPlugin,
  type PaginationFullConfig,
} from '@revolist/revogrid-pro';
import type { DataType } from '@revolist/revogrid';

const { createRandomData } = useRandomData();
const { isDark } = currentTheme();

export function load(parentSelector: string) {
  const grid = document.createElement('revo-grid');

  /**
   * Create a random data source for the grid
   */
  const source = createRandomData(102);

  /**
   * Handles pagination for a grid component.
   * Takes in three parameters:
   * - data (an array of items)
   * - config (pagination configuration)
   * - revogrid (the grid element).
   */
  const paginationService = <T extends DataType>({
    data,
    config,
    revogrid,
  }: {
    data: T[];
    config: PaginationFullConfig;
    revogrid: HTMLRevoGridElement;
  }) => {
    /**
     * Set the initial skip and take values
     */
    let skip = 0;

    /**
     * Get the current items from the source array
     */
    const getGridItems = () => data.slice(skip, config.itemsPerPage + skip);
    /**
     * Update the data source of the grid
     */
    const setData = () => {
      /**
       * Get the new items for the grid
       */
      const gridDataItems = getGridItems();
      revogrid.source = gridDataItems;
    };

    /**
     * Event handler for page change and update the skip and take values
     */
    grid.addEventListener('pagechange', ({ detail }) => {
      /**
       * Update the skip and take values
       */
      skip = detail.skip;
      setData();
    });

    /**
     * Set the initial data
     */
    setData();
  };

  /**
   * Define pagination configuration
   */
  const paginationConfig: PaginationFullConfig = {
    itemsPerPage: 10,
    initialPage: 0,
    total: source.length,
    buttonCount: 5,
  };

  /**
   * Run pagination service
   */
  paginationService({
    data: source,
    config: paginationConfig,
    revogrid: grid,
  });

  /**
   * Add pagination config to the grid
   */
  const additionalData = {
    pagination: paginationConfig,
    stretch: 'all',
  };

  /**
   * Set the columns of the grid
   */
  grid.columns = [
    {
      name: '🆔 ID',
      prop: 'id',
    },
    {
      name: '🍎 Fruit',
      prop: 'name',
    },
    {
      name: '💰 Price',
      prop: 'price',
    },
  ];
  /**
   * Set the additional data for the grid
   */
  grid.additionalData = additionalData;
  // Define pagination plugin
  grid.plugins = [PaginationPlugin, ColumnStretchPlugin];


  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;
  document.querySelector(parentSelector)?.appendChild(grid);
}

Vue

src/components/pagination/PaginationLocal.vue

<template>
  <VGrid
    :theme="isDark ? 'darkCompact' : 'compact'"
    hide-attribution
    :columns="columns"
    :source="currentRows"
    :plugins="plugins"
    :additionalData="additionalData"
    @pagechange="handlePageChange"
  />
</template>

<script setup lang="ts">

import { ref, onMounted } from 'vue';
import VGrid, { type DataType, type AdditionalData } from '@revolist/vue3-datagrid';
import { currentThemeVue, useRandomData } from '../composables/useRandomData';
import { PaginationPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
const { createRandomData } = useRandomData();
const { isDark } = currentThemeVue();

const columns = ref([
  { name: '🆔 ID', prop: 'id' },
  { name: '🍎 Fruit', prop: 'name' },
  { name: '💰 Price', prop: 'price' },
]);

const plugins = ref([PaginationPlugin, ColumnStretchPlugin]);

const source = createRandomData(102);
const additionalData = ref<AdditionalData>({
  pagination: {
    itemsPerPage: 10,
    initialPage: 0,
    total: source.length,
    buttonCount: 5,
  },
  stretch: 'all',
});

const currentRows = ref<DataType[]>([]);

let skip = 0;

const getGridItems = () =>
  source.slice(skip, (additionalData.value.pagination?.itemsPerPage ?? 0) + skip);

const setData = () => {
  currentRows.value = getGridItems();
};

const handlePageChange = ({ detail }: { detail: { skip: number } }) => {
  skip = detail.skip;
  setData();
};

onMounted(() => {
  setData();
});
</script>

React

src/components/pagination/PaginationLocal.tsx

import { RevoGrid } from '@revolist/react-datagrid';
import { useState, useMemo, useRef } from 'react';
import { PaginationPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
import { useRandomData, currentTheme } from '../composables/useRandomData';
import React from 'react';

const { createRandomData } = useRandomData();
const { isDark } = currentTheme();

function PaginationGrid() {
  const gridRef = useRef<HTMLRevoGridElement>(null);
  const [data] = useState(createRandomData(102));
  const [paginationConfig] = useState({
    itemsPerPage: 10,
    initialPage: 0,
    total: data.length,
    buttonCount: 5,
  });
  const [source, setSource] = useState(
    data.slice(0, paginationConfig.itemsPerPage),
  );
  const handlePageChange = (event: CustomEvent<{ skip: number }>) => {
    const skip = event.detail.skip;
    setSource(data.slice(skip, paginationConfig.itemsPerPage + skip));
  };

  const columns = useMemo(
    () => [
      { name: '🆔 ID', prop: 'id' },
      { name: '🍎 Fruit', prop: 'name' },
      { name: '💰 Price', prop: 'price' },
    ],
    [],
  );

  const additionalData = useMemo(
    () => ({
      pagination: paginationConfig,
      stretch: 'all',
    }),
    [paginationConfig],
  );

  return (
    <RevoGrid
      ref={gridRef}
      columns={columns}
      source={source}
      theme={isDark() ? 'darkCompact' : 'compact'}
      plugins={[PaginationPlugin, ColumnStretchPlugin]}
      additionalData={additionalData}
      hideAttribution
      onPagechange={handlePageChange}
    />
  );
}

export default PaginationGrid;

Angular

src/components/pagination/PaginationLocalAngular.ts

import { Component, ViewEncapsulation } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { currentTheme, useRandomData } from '../composables/useRandomData';
import {
  PaginationPlugin,
  ColumnStretchPlugin,
  type PaginationFullConfig,
} from '@revolist/revogrid-pro';

@Component({
  selector: 'pagination-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `<revo-grid
    [columns]="columns"
    [source]="rows"
    [theme]="theme"
    [additionalData]="additionalData"
    [hideAttribution]="true"
    [plugins]="plugins"
    style="height: 400px;"
    (pagechange)="onPageChange($event)"
  ></revo-grid>`,
  encapsulation: ViewEncapsulation.None,
})
export class PaginationGridComponent {
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
  columns = [
    { name: '🆔 ID', prop: 'id' },
    { name: '🍎 Fruit', prop: 'name' },
    { name: '💰 Price', prop: 'price' },
  ];
  source = useRandomData().createRandomData(102);
  rows = [...this.source];
  plugins = [PaginationPlugin, ColumnStretchPlugin];

  paginationConfig: PaginationFullConfig = {
    itemsPerPage: 10,
    initialPage: 0,
    total: this.source.length,
    buttonCount: 5,
  };

  additionalData = {
    pagination: this.paginationConfig,
    stretch: 'all',
  };

  private skip = 0;

  private getGridItems() {
    return this.source.slice(
      this.skip,
      this.paginationConfig.itemsPerPage + this.skip,
    );
  }

  private setData() {
    this.rows = this.getGridItems();
  }

  onPageChange(event: any) {
    this.skip = event.detail.skip;
    this.setData();
  }

  ngOnInit() {
    this.setData();
  }
}

This is especially useful when dealing with large datasets where loading all rows at once could affect performance. It gives you:

• Improved Performance: By loading only a subset of data at a time, pagination helps maintain grid performance even with large datasets.
• Enhanced User Experience: Users can easily navigate through data without being overwhelmed by a large number of rows.