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

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

4
import {
5
  PaginationPlugin,
6
  ColumnStretchPlugin,
7
  type PaginationFullConfig
8
} from '@revolist/revogrid-pro';
9

10
import { fetch, type PaginatedResponse } from '../composables/remoteData';
11
import { currentTheme } from '../composables/useRandomData';
12
import type { Person } from '../composables/makeData';
13

14
const { isDark } = currentTheme();
15

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

19
  /**
20
   * Handles pagination for a grid component.
21
   * Takes in parameters:
22
   * - config (pagination configuration)
23
   * - revogrid (the grid element).
24
   */
25
  const paginationService = async ({
26
    config: cfg,
27
    revogrid,
28
  }: {
29
    config: PaginationFullConfig;
30
    revogrid: HTMLRevoGridElement;
31
  }) => {
32
    /**
33
     * Set the initial skip and take values
34
     */
35
    let skip = 0;
36
    let config = { ...cfg };
37

38
    /**
39
     * Request data from remote server
40
     */
41
    async function updateGridItems({
42
      skip,
43
      take,
44
      count,
45
    }: {
46
      skip: number;
47
      take: number;
48
      count: boolean;
49
    }) {
50
      // Show loader
51
      revogrid.classList.add('busy');
52
      // Send request to remote server to get data
53
      try {
54
        const url = `/api/users?skip=${skip}&take=${take}&count=${count}`;
55
        const response = await fetch(url);
56
        if (!response.ok) {
57
          const errorData = await response.json();
58
          throw new Error(`Error ${response.status}: ${errorData.message}`);
59
        }
60
        const result: PaginatedResponse<Person> = await response.json();
61

62
        // Hide loader
63
        revogrid.classList.remove('busy');
64
        return result;
65

66
      } catch (error) {
67
        // Hide loader
68
        revogrid.classList.remove('busy');
69
        console.error('Failed to fetch users with pagination:', error);
70
        throw error;
71
      }
72
    }
73

74

75
    /**
76
     * Event handler for page change and update the skip and take values
77
     */
78
    grid.addEventListener('pagechange', ({ detail }) => {
79
      /**
80
       * Update the skip and take values
81
       */
82
      skip = detail.skip;
83
      /**
84
       * Request new data
85
       */
86
      updateGridItems({
87
        skip: detail.skip * config.itemsPerPage,
88
        take: config.itemsPerPage,
89
        count: false,
90
      }).then((result) => {
91
        revogrid.source = result.data;
92
      });
93
    });
94
    /**
95
     * Request the data source of the grid
96
     */
97
    const { data, count } = await updateGridItems({
98
      skip,
99
      take: config.itemsPerPage,
100
      count: true,
101
    });
102

103

104
    /**
105
     * Update pagination plugin data if count is present
106
     */
107
    if (count) {
108
      config.total = count;
109
      revogrid.getPlugins().then((plugins) => {
110
        /**
111
         * Find the pagination plugin
112
         */
113
        const paginationPlugin = plugins.find(
114
          (plugin) => plugin instanceof PaginationPlugin,
115
        );
116
        (paginationPlugin as PaginationPlugin)?.setConfig(config);
117
      });
118
    }
119
    revogrid.source = data;
120
  };
121

122
  /**
123
   * Set the columns of the grid
124
   */
125
  grid.columns = [
126
    {
127
      name: 'First Name',
128
      prop: 'firstName',
129
    },
130
    {
131
      name: 'Last Name',
132
      prop: 'lastName',
133
    },
134
    {
135
      name: 'Relationship',
136
      prop: 'status',
137
    }
138
  ];
139
  /**
140
   * Set the additional data for the grid
141
   */
142
  grid.additionalData = {
143
    /**
144
     * Add stretch config to the grid
145
     */
146
    stretch: 'all',
147
  };
148
  // Define pagination plugin
149
  grid.plugins = [PaginationPlugin, ColumnStretchPlugin];
150

151
  /**
152
   * Run pagination service
153
   */
154
  paginationService({
155
    config: {
156
      itemsPerPage: 10,
157
      initialPage: 0,
158
      total: 0,
159
      buttonCount: 5,
160
    },
161
    revogrid: grid,
162
  });
163

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

1
<template>
2
  <VGrid
3
    class="overflow-hidden cell-border"
4
    ref="grid"
5
    :theme="isDark ? 'darkMaterial' : 'material'"
6
    :columns="columns"
7
    :source="rows"
8
    :plugins="plugins"
9
    :additionalData="additionalData"
10
    :class="{ busy }"
11
    hide-attribution
12
    @pagechange="handlePageChange"
13
  />
14
</template>
15

16
<script setup lang="ts">
17
import { ref, onMounted } from 'vue';
18
import { currentThemeVue } from '../composables/useRandomData';
19
import {
20
  fetch as fetchData,
21
  type PaginatedResponse,
22
} from '../composables/remoteData';
23
import type { Person } from '../composables/makeData';
24

25
import { VGrid } from '@revolist/vue3-datagrid';
26

27
import {
28
  PaginationPlugin,
29
  ColumnStretchPlugin,
30
  RowOddPlugin,
31
  RowSelectPlugin
32
} from '@revolist/revogrid-pro';
33

34
const { isDark } = currentThemeVue();
35

36

37
const grid = ref<{ $el: HTMLRevoGridElement } | null>(null);
38
const busy = ref(false);
39

40
const columns = ref([
41
  { name: 'Full Name', prop: 'fullName' },
42
  { name: 'Relationship', prop: 'status' },
43
]);
44

45
const plugins = [PaginationPlugin, ColumnStretchPlugin, RowOddPlugin, RowSelectPlugin];
46

47
const rows = ref<Person[]>([]);
48
const additionalData = ref({
49
  stretch: 'all',
50
  pagination: {
51
  itemsPerPage: 10,
52
  initialPage: 0,
53
  total: 0,
54
  buttonCount: 5,
55
}
56
});
57

58

59
const getGridItems = async ({
60
  skip: s,
61
  take,
62
  count,
63
}: {
64
  skip: number;
65
  take: number;
66
  count: boolean;
67
}): Promise<PaginatedResponse<Person>> => {
68
  busy.value = true;
69
  try {
70
    const url = `/api/users?skip=${s}&take=${take}&count=${count}`;
71
    const response = await fetchData(url);
72
    if (!response.ok) {
73
      const errorData = await response.json();
74
      throw new Error(`Error ${response.status}: ${errorData.message}`);
75
    }
76
    const result: PaginatedResponse<Person> = await response.json();
77
    busy.value = false;
78
    return result;
79
  } catch (error) {
80
    busy.value = false;
81
    console.error('Failed to fetch users with pagination:', error);
82
    throw error;
83
  }
84
};
85

86
const handlePageChange = async ({
87
  detail: { skip = 0, count = false },
88
}: {
89
  detail: {
90
    skip?: number;
91
    count?: boolean;
92
  };
93
}) => {
94
  const items = await getGridItems({
95
    skip: skip * additionalData.value.pagination.itemsPerPage,
96
    take: additionalData.value.pagination.itemsPerPage,
97
    count,
98
  });
99
  if (count) {
100
    additionalData.value = {
101
      ...additionalData.value,
102
      pagination: {
103
        ...additionalData.value.pagination,
104
        total: items.count ?? 0
105
      },
106
    };
107
  }
108
  rows.value = items.data;
109
};
110

111
onMounted(() => handlePageChange({ detail: { count: true } }));
112
</script>

1
import { useState, useMemo, useRef, useEffect } from 'react';
2
import { RevoGrid } from '@revolist/react-datagrid';
3
import {
4
  PaginationPlugin,
5
  ColumnStretchPlugin,
6
  type PaginationFullConfig,
7
} from '@revolist/revogrid-pro';
8
import {
9
  fetch as fetchRemote,
10
  type PaginatedResponse,
11
} from '../composables/remoteData';
12
import { currentTheme } from '../composables/useRandomData';
13
import type { Person } from '../composables/makeData';
14
import React from 'react';
15

16
function PaginationRemote() {
17
  const { isDark } = currentTheme();
18
  const gridRef = useRef<HTMLRevoGridElement>(null);
19
  const [loading, setLoading] = useState(false);
20
  const [source, setSource] = useState<Person[]>([]);
21
  const [additionalData, setAdditionalData] = useState<{
22
    stretch: string;
23
    pagination?: Partial<PaginationFullConfig>;
24
  }>({
25
    stretch: 'all',
26
    pagination: {
27
      itemsPerPage: 10,
28
      initialPage: 0,
29
      total: 0,
30
      buttonCount: 5,
31
    },
32
  });
33

34
  const columns = useMemo(
35
    () => [
36
      { name: 'First Name', prop: 'firstName' },
37
      { name: 'Last Name', prop: 'lastName' },
38
      { name: 'Relationship', prop: 'status' },
39
    ],
40
    [],
41
  );
42

43
  const updateGridItems = async ({
44
    skip,
45
    take,
46
    count,
47
  }: {
48
    skip: number;
49
    take: number;
50
    count: boolean;
51
  }) => {
52
    const grid = gridRef.current;
53
    setLoading(true);
54
    try {
55
      const url = `/api/users?skip=${skip}&take=${take}&count=${count}`;
56
      const response = await fetchRemote(url);
57
      if (!response.ok) {
58
        const errorData = await response.json();
59
        throw new Error(`Error ${response.status}: ${errorData.message}`);
60
      }
61
      const result: PaginatedResponse<Person> = await response.json();
62
      setLoading(false);
63
      return result;
64
    } catch (error) {
65
      setLoading(false);
66
      console.error('Failed to fetch users with pagination:', error);
67
      throw error;
68
    }
69
  };
70

71
  const handlePageChange = async (event: CustomEvent<{ skip: number }>) => {
72
    const skip = event.detail.skip;
73
    try {
74
      const result = await updateGridItems({
75
        skip: skip * (additionalData.pagination?.itemsPerPage || 0),
76
        take: additionalData.pagination?.itemsPerPage || 0,
77
        count: false,
78
      });
79
      setSource(result.data);
80
    } catch (error) {
81
      // Handle error as needed
82
    }
83
  };
84

85
  const fetchInitialData = async () => {
86
    try {
87
      const result = await updateGridItems({
88
        skip: 0,
89
        take: additionalData.pagination?.itemsPerPage || 0,
90
        count: true,
91
      });
92
      if (result.count !== undefined) {
93
        setAdditionalData((prev) => ({
94
          ...prev,
95
          pagination: { ...prev.pagination, total: result.count },
96
        }));
97
      }
98
      setSource(result.data);
99
    } catch (error) {
100
      // Handle error as needed
101
    }
102
  };
103

104
  useEffect(() => {
105
    fetchInitialData();
106
  }, []);
107

108
  return (
109
    <RevoGrid
110
      ref={gridRef}
111
      class={loading ? 'busy' : ''}
112
      columns={columns}
113
      source={source}
114
      additionalData={additionalData}
115
      hide-attribution
116
      theme={isDark() ? 'darkCompact' : 'compact'}
117
      plugins={[PaginationPlugin, ColumnStretchPlugin]}
118
      onPagechange={handlePageChange}
119
    />
120
  );
121
}
122

123
export default PaginationRemote;

1
import { Component, ViewEncapsulation, ViewChild, ElementRef, type OnInit } from '@angular/core';
2
import { RevoGrid } from "@revolist/angular-datagrid";
3
import { PaginationPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
4
import { fetch as fetchRemote, type PaginatedResponse } from '../composables/remoteData';
5
import { currentTheme } from '../composables/useRandomData';
6
import type { Person } from '../composables/makeData';
7

8
@Component({
9
  selector: 'pagination-remote-grid',
10
  standalone: true,
11
  imports: [RevoGrid],
12
  template: `<revo-grid
13
    #gridRef
14
    [ngClass]="{ busy: busy }"
15
    [columns]="columns"
16
    [source]="source"
17
    [additionalData]="additionalData"
18
    [hideAttribution]="true"
19
    [theme]="theme"
20
    [plugins]="plugins"
21
    style="height: 400px;"
22
    (pagechange)="handlePageChange($event)"
23
  ></revo-grid>`,
24
  encapsulation: ViewEncapsulation.None,
25
})
26
export class PaginationRemoteGridComponent implements OnInit {
27
  @ViewChild('gridRef', { static: true }) gridRef!: ElementRef<HTMLRevoGridElement>;
28
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
29
  source: Person[] = [];
30
  busy = false;
31

32
  additionalData = {
33
    stretch: 'all',
34
    pagination: {
35
      itemsPerPage: 10,
36
      initialPage: 0,
37
      total: 0,
38
      buttonCount: 5,
39
    },
40
  };
41

42
  columns = [
43
    { name: 'First Name', prop: 'firstName' },
44
    { name: 'Last Name', prop: 'lastName' },
45
    { name: 'Relationship', prop: 'status' },
46
  ];
47

48
  plugins = [PaginationPlugin, ColumnStretchPlugin];
49

50
  async updateGridItems(skip: number, take: number, count: boolean) {
51
    const grid = this.gridRef.nativeElement;
52
    this.busy = true;
53

54
    try {
55
      const url = `/api/users?skip=${skip}&take=${take}&count=${count}`;
56
      const response = await fetchRemote(url);
57

58
      if (!response.ok) {
59
        const errorData = await response.json();
60
        throw new Error(`Error ${response.status}: ${errorData.message}`);
61
      }
62

63
      const result = await response.json() as PaginatedResponse<Person>;
64

65
      this.busy = false;
66
      return result;
67
    } catch (error) {
68
      this.busy = false;
69
      console.error('Failed to fetch users with pagination:', error);
70
      throw error;
71
    }
72
  }
73

74
  async handlePageChange(event: any) {
75
    const skip = event.detail.skip * this.additionalData.pagination.itemsPerPage;
76

77
    try {
78
      const result = await this.updateGridItems(skip, this.additionalData.pagination.itemsPerPage, false);
79
      this.source = result.data;
80
    } catch (error) {
81
      // Handle error as needed
82
    }
83
  }
84

85
  async fetchInitialData() {
86
    try {
87
      const result = await this.updateGridItems(0, this.additionalData.pagination.itemsPerPage, true);
88

89
      if (result.count !== undefined) {
90
        this.additionalData.pagination.total = result.count;
91
      }
92

93
      this.source = result.data;
94
    } catch (error) {
95
      console.error('Failed to fetch users with pagination:', error);
96
    }
97
  }
98

99
  ngOnInit() {
100
    this.fetchInitialData();
101
  }
102
}