Pagination Remote

This example shows how to use pagination with remote data in the grid. To enable pagination you’ll need to use the PaginationPlugin. This plugin provides the necessary functionality to paginate data within the grid.

Source code

TypeScript ts

// src/components/pagination/PaginationRemote.ts

import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();

import {
  AdvanceFilterPlugin,
  PaginationPlugin,
  ColumnStretchPlugin,
  RowOddPlugin,
} from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';
import { loadRemoteUsersPage } from './pagination.remote.utils';

const { isDark } = currentTheme();

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

  grid.columns = [
    {
      name: 'First Name',
      prop: 'firstName',
      sortable: true,
    },
    {
      name: 'Last Name',
      prop: 'lastName',
      sortable: true,
    },
    {
      name: 'Relationship',
      prop: 'status',
      sortable: true,
    },
  ];
  grid.filter = true;
  Object.assign(grid, {
    stretch: 'all',
    pagination: {
      itemsPerPage: 10,
      initialPage: 0,
      total: 0,
      buttonCount: 5,
      loadData: loadRemoteUsersPage,
    },
  })
  grid.plugins = [PaginationPlugin, AdvanceFilterPlugin, ColumnStretchPlugin, RowOddPlugin];
  grid.theme = isDark() ? 'darkMaterial' : 'material';
  grid.hideAttribution = true;

  document.querySelector(parentSelector)?.appendChild(grid);
}

Vue vue

<template>
  <VGrid
    class="overflow-hidden cell-border"
    :theme="isDark ? 'darkMaterial' : 'material'"
    :columns="columns"
    :source="source"
    filter
    :plugins="plugins"
    :additionalData="additionalData"
    hide-attribution
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VGrid } from '@revolist/vue3-datagrid';
import {
  AdvanceFilterPlugin,
  PaginationPlugin,
  ColumnStretchPlugin,
  RowOddPlugin,
  RowSelectPlugin,
} from '@revolist/revogrid-pro';
import { currentThemeVue } from '../composables/useRandomData';
import type { Person } from '../composables/makeData';
import { loadRemoteUsersPage } from './pagination.remote.utils';

const { isDark } = currentThemeVue();

const source: Person[] = [];
const columns = ref([
  { name: 'Full Name', prop: 'fullName', sortable: true },
  { name: 'Relationship', prop: 'status', sortable: true },
]);
const plugins = [PaginationPlugin, AdvanceFilterPlugin, ColumnStretchPlugin, RowOddPlugin, RowSelectPlugin];
const additionalData = {
  stretch: 'all',
  pagination: {
    itemsPerPage: 10,
    initialPage: 0,
    total: 0,
    buttonCount: 5,
    loadData: loadRemoteUsersPage,
  },
};
</script>

React tsx

// src/components/pagination/PaginationRemote.tsx

import { useMemo } from 'react';
import React from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import {
  AdvanceFilterPlugin,
  PaginationPlugin,
  ColumnStretchPlugin,
  RowOddPlugin,
  type PaginationFullConfig,
} from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';
import type { Person } from '../composables/makeData';
import { loadRemoteUsersPage } from './pagination.remote.utils';

function PaginationRemote() {
  const { isDark } = currentTheme();
  const source = useMemo<Person[]>(() => [], []);
  const plugins = useMemo(() => [PaginationPlugin, AdvanceFilterPlugin, ColumnStretchPlugin, RowOddPlugin], []);
  const additionalData = useMemo<{
    stretch: string;
    pagination?: Partial<PaginationFullConfig>;
  }>(() => ({
    stretch: 'all',
    pagination: {
      itemsPerPage: 10,
      initialPage: 0,
      total: 0,
      buttonCount: 5,
      loadData: loadRemoteUsersPage,
    },
  }), []);

  const columns = useMemo(
    () => [
      { name: 'First Name', prop: 'firstName', sortable: true },
      { name: 'Last Name', prop: 'lastName', sortable: true },
      { name: 'Relationship', prop: 'status', sortable: true },
    ],
    [],
  );

  return (
    <RevoGrid
      columns={columns}
      source={source}
      filter
      additionalData={additionalData}
      hide-attribution
      theme={isDark() ? 'darkMaterial' : 'material'}
      plugins={plugins}
    />
  );
}

export default PaginationRemote;

Angular ts

// src/components/pagination/PaginationRemoteAngular.ts

import { Component, ViewEncapsulation, NO_ERRORS_SCHEMA } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { AdvanceFilterPlugin, PaginationPlugin, ColumnStretchPlugin, RowOddPlugin } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';
import type { Person } from '../composables/makeData';
import { loadRemoteUsersPage } from './pagination.remote.utils';

@Component({
  selector: 'pagination-remote-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `<revo-grid
    [columns]="columns"
    [source]="source"
    [filter]="true"
    [stretch]="additionalData.stretch"
    [pagination]="additionalData.pagination"
    hide-attribution
    [theme]="theme"
    [plugins]="plugins"
    style="min-height: 400px;"
  ></revo-grid>`,
  encapsulation: ViewEncapsulation.None,
  // Allows Angular demos to bind RevoGrid plugin props that are not wrapper inputs.
  schemas: [NO_ERRORS_SCHEMA],
})
export class PaginationRemoteGridComponent {
  theme = currentTheme().isDark() ? 'darkMaterial' : 'material';
  source: Person[] = [];

  additionalData = {
    stretch: 'all',
    pagination: {
      itemsPerPage: 10,
      initialPage: 0,
      total: 0,
      buttonCount: 5,
      loadData: loadRemoteUsersPage,
    },
  };

  columns = [
    { name: 'First Name', prop: 'firstName', sortable: true },
    { name: 'Last Name', prop: 'lastName', sortable: true },
    { name: 'Relationship', prop: 'status', sortable: true },
  ];

  plugins = [PaginationPlugin, AdvanceFilterPlugin, ColumnStretchPlugin, RowOddPlugin];
}