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

TypeScriptts

// 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);
}

Vuevue

<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>

Reacttsx

// 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;

Angularts

// 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];
}

Complete remote filter state

loadData keeps the original fourth argument for compatibility and passes the complete advanced filter model as an optional fifth argument:

grid.pagination = {
  itemsPerPage: 50,
  initialPage: 0,
  total: 0,
  loadData: async (
    skip,
    take,
    order,
    singleConditionFilters,
    multiConditionFilters,
  ) => {
    return fetch('/api/orders', {
      method: 'POST',
      body: JSON.stringify({
        skip,
        take,
        order,
        filters: multiConditionFilters,
      }),
    }).then(response => response.json());
  },
};

Use multiConditionFilters for new integrations because it preserves every condition and same-column relation. singleConditionFilters contains only the first condition for each column.