Pagination with Simple Table Data Grid

React TSX

Copy

1import { useState } from "react";
2import {SimpleTable} from "@simple-table/react";import type { Theme } from "@simple-table/react";
3import { paginationConfig, paginationData, PAGINATION_ROWS_PER_PAGE } from "./pagination.demo-data";
4import "@simple-table/react/styles.css";
5
6const PaginationDemo = ({
7  height,
8  theme,
9}: {
10  height?: string | number;
11  theme?: Theme;
12}) => {
13  const [rows, setRows] = useState(paginationData.slice(0, PAGINATION_ROWS_PER_PAGE));
14  const [isLoading, setIsLoading] = useState(false);
15
16  const onNextPage = async (pageIndex: number) => {
17    const startIndex = pageIndex * PAGINATION_ROWS_PER_PAGE;
18    const endIndex = startIndex + PAGINATION_ROWS_PER_PAGE;
19
20    setIsLoading(true);
21    await new Promise((resolve) => setTimeout(resolve, 800));
22    const newPageData = paginationData.slice(startIndex, endIndex);
23
24    if (newPageData.length === 0 || rows.length > startIndex) {
25      setIsLoading(false);
26      return false;
27    }
28
29    setRows((prev) => [...prev, ...newPageData]);
30    setIsLoading(false);
31    return true;
32  };
33
34  return (
35    <SimpleTable
36      columns={paginationConfig.headers}
37      height={height ?? "auto"}
38      isLoading={isLoading}
39      onNextPage={onNextPage}
40      rows={rows}
41      rowsPerPage={PAGINATION_ROWS_PER_PAGE}
42      enablePagination
43      theme={theme}
44    />
45  );
46};
47
48export default PaginationDemo;

Vue SFC

Copy

1<template>
2  <SimpleTable
3    :columns="paginationConfig.headers"
4    :height="height ?? 'auto'"
5    :is-loading="isLoading"
6    :on-next-page="onNextPage"
7    :rows="rows"
8    :rows-per-page="PAGINATION_ROWS_PER_PAGE"
9    :enable-pagination="true"
10    :theme="theme"
11  />
12</template>
13
14<script setup lang="ts">
15import { ref } from "vue";
16import {SimpleTable} from "@simple-table/vue";import type { Theme } from "@simple-table/vue";
17import { paginationConfig, paginationData, PAGINATION_ROWS_PER_PAGE } from "./pagination.demo-data";
18import "@simple-table/vue/styles.css";
19
20const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {});
21
22const rows = ref(paginationData.slice(0, PAGINATION_ROWS_PER_PAGE));
23const isLoading = ref(false);
24
25const onNextPage = async (pageIndex: number) => {
26  const startIndex = pageIndex * PAGINATION_ROWS_PER_PAGE;
27  const endIndex = startIndex + PAGINATION_ROWS_PER_PAGE;
28
29  isLoading.value = true;
30  await new Promise((resolve) => setTimeout(resolve, 800));
31  const newPageData = paginationData.slice(startIndex, endIndex);
32
33  if (newPageData.length === 0 || rows.value.length > startIndex) {
34    isLoading.value = false;
35    return false;
36  }
37
38  rows.value = [...rows.value, ...newPageData];
39  isLoading.value = false;
40  return true;
41};
42</script>

Angularpagination-demo.component.ts

Copy

1import { Component, Input } from "@angular/core";
2import {SimpleTableComponent} from "@simple-table/angular";import type { AngularColumnDef, Row, Theme } from "@simple-table/angular";
3import { paginationConfig, paginationData, PAGINATION_ROWS_PER_PAGE } from "./pagination.demo-data";
4import "@simple-table/angular/styles.css";
5
6@Component({
7  selector: "pagination-demo",
8  standalone: true,
9  imports: [SimpleTableComponent],
10  template: `
11    <simple-table
12      [rows]="rows"
13      [columns]="headers"
14      [height]="height"
15      [theme]="theme"
16      [enablePagination]="true"
17      [rowsPerPage]="rowsPerPage"
18      [isLoading]="isLoading"
19      [onNextPage]="onNextPage"
20    ></simple-table>
21  `,
22})
23export class PaginationDemoComponent {
24  @Input() height: string | number = "auto";
25  @Input() theme?: Theme;
26
27  readonly headers: AngularColumnDef[] = paginationConfig.headers;
28  readonly rowsPerPage = PAGINATION_ROWS_PER_PAGE;
29  rows: Row[] = paginationData.slice(0, PAGINATION_ROWS_PER_PAGE);
30  isLoading = false;
31
32  onNextPage = async (pageIndex: number): Promise<boolean> => {
33    const startIndex = pageIndex * PAGINATION_ROWS_PER_PAGE;
34    const endIndex = startIndex + PAGINATION_ROWS_PER_PAGE;
35
36    this.isLoading = true;
37    await new Promise((resolve) => setTimeout(resolve, 800));
38    const newPageData = paginationData.slice(startIndex, endIndex);
39
40    if (newPageData.length === 0 || this.rows.length > startIndex) {
41      this.isLoading = false;
42      return false;
43    }
44
45    this.rows = [...this.rows, ...newPageData];
46    this.isLoading = false;
47    return true;
48  };
49}
50
51
52// pagination.demo-data.ts
53// Self-contained demo table setup for this example.
54import type { AngularColumnDef, Row } from "@simple-table/angular";
55
56
57export const PAGINATION_ROWS_PER_PAGE = 9;
58
59export const paginationHeaders: AngularColumnDef[] = [
60  { accessor: "id", label: "ID", width: 60, type: "number" },
61  { accessor: "name", label: "Name", width: "1fr", minWidth: 100, type: "string" },
62  { accessor: "email", label: "Email", width: 200, type: "string" },
63  { accessor: "role", label: "Role", width: 140, type: "string" },
64  { accessor: "department", label: "Department", width: 150, type: "string" },
65  { accessor: "status", label: "Status", width: 110, type: "string" },
66];
67
68export const paginationData: Row[] = [
69  { id: 1, name: "Miguel Santos", email: "miguel.santos@grandhotel.com", role: "Guest Relations Manager", department: "Front Office", status: "Active" },
70  { id: 2, name: "Carmen Delacroix", email: "carmen.d@grandhotel.com", role: "Head Concierge", department: "Concierge", status: "Active" },
71  { id: 3, name: "Dimitri Petrov", email: "dimitri.p@grandhotel.com", role: "Executive Chef", department: "Culinary", status: "Active" },
72  { id: 4, name: "Priya Sharma", email: "priya.sharma@grandhotel.com", role: "Spa Director", department: "Wellness", status: "On Leave" },
73  { id: 5, name: "Giovanni Rossi", email: "giovanni.r@grandhotel.com", role: "Banquet Manager", department: "Events", status: "Active" },
74  { id: 6, name: "Anastasia Volkov", email: "anastasia.v@grandhotel.com", role: "Housekeeping Supervisor", department: "Housekeeping", status: "Active" },
75  { id: 7, name: "Omar Hassan", email: "omar.hassan@grandhotel.com", role: "Night Auditor", department: "Front Office", status: "Active" },
76  { id: 8, name: "Lucia Fernandez", email: "lucia.f@grandhotel.com", role: "Restaurant Manager", department: "Food & Beverage", status: "Active" },
77  { id: 9, name: "Kenji Nakamura", email: "kenji.n@grandhotel.com", role: "Guest Services Coordinator", department: "Guest Services", status: "Active" },
78  { id: 10, name: "Victoria Sterling", email: "victoria.s@grandhotel.com", role: "Sales Director", department: "Sales & Marketing", status: "Active" },
79  { id: 11, name: "Rafael Martinez", email: "rafael.m@grandhotel.com", role: "Security Chief", department: "Security", status: "Active" },
80  { id: 12, name: "Ingrid Larsson", email: "ingrid.l@grandhotel.com", role: "Event Coordinator", department: "Events", status: "Active" },
81  { id: 13, name: "Hassan Al-Rashid", email: "hassan.a@grandhotel.com", role: "Maintenance Supervisor", department: "Engineering", status: "Active" },
82  { id: 14, name: "Chloe Bennett", email: "chloe.b@grandhotel.com", role: "Front Desk Agent", department: "Front Office", status: "Active" },
83  { id: 15, name: "Akira Tanaka", email: "akira.t@grandhotel.com", role: "Sous Chef", department: "Culinary", status: "Active" },
84  { id: 16, name: "Isabella Costa", email: "isabella.c@grandhotel.com", role: "HR Specialist", department: "Human Resources", status: "Active" },
85  { id: 17, name: "Yuki Sato", email: "yuki.sato@grandhotel.com", role: "Guest Experience Manager", department: "Guest Services", status: "Active" },
86  { id: 18, name: "Marco Benedetti", email: "marco.b@grandhotel.com", role: "Sommelier", department: "Food & Beverage", status: "Active" },
87  { id: 19, name: "Fatima Al-Zahra", email: "fatima.a@grandhotel.com", role: "Revenue Manager", department: "Finance", status: "Active" },
88  { id: 20, name: "Sebastian Wagner", email: "sebastian.w@grandhotel.com", role: "Bell Captain", department: "Guest Services", status: "Active" },
89  { id: 21, name: "Mei Lin Chen", email: "mei.chen@grandhotel.com", role: "Pastry Chef", department: "Culinary", status: "Active" },
90  { id: 22, name: "Diego Morales", email: "diego.m@grandhotel.com", role: "Pool Attendant", department: "Recreation", status: "Active" },
91  { id: 23, name: "Zara Khan", email: "zara.khan@grandhotel.com", role: "Business Center Manager", department: "Business Services", status: "Active" },
92  { id: 24, name: "Matteo Ricci", email: "matteo.r@grandhotel.com", role: "Valet Manager", department: "Guest Services", status: "Active" },
93  { id: 25, name: "Camila Gonzalez", email: "camila.g@grandhotel.com", role: "Laundry Supervisor", department: "Housekeeping", status: "Active" },
94  { id: 26, name: "Bjorn Larsson", email: "bjorn.l@grandhotel.com", role: "IT Support Specialist", department: "Technology", status: "Active" },
95  { id: 27, name: "Amara Okafor", email: "amara.o@grandhotel.com", role: "Training Coordinator", department: "Human Resources", status: "On Leave" },
96];
97
98export const paginationConfig = {
99  headers: paginationHeaders,
100  rows: paginationData,
101  tableProps: {
102    rowsPerPage: PAGINATION_ROWS_PER_PAGE,
103    enablePagination: true,
104  },
105} as const;
106

Svelte

Copy

1<script lang="ts">
2  import {SimpleTable} from "@simple-table/svelte";  import type { Theme } from "@simple-table/svelte";
3  import { paginationConfig, paginationData, PAGINATION_ROWS_PER_PAGE } from "./pagination.demo-data";
4  import "@simple-table/svelte/styles.css";
5
6  let { height, theme }: { height?: string | number; theme?: Theme } = $props();
7
8  let rows = $state(paginationData.slice(0, PAGINATION_ROWS_PER_PAGE));
9  let isLoading = $state(false);
10
11  const onNextPage = async (pageIndex: number) => {
12    const startIndex = pageIndex * PAGINATION_ROWS_PER_PAGE;
13    const endIndex = startIndex + PAGINATION_ROWS_PER_PAGE;
14
15    isLoading = true;
16    await new Promise((resolve) => setTimeout(resolve, 800));
17    const newPageData = paginationData.slice(startIndex, endIndex);
18
19    if (newPageData.length === 0 || rows.length > startIndex) {
20      isLoading = false;
21      return false;
22    }
23
24    rows = [...rows, ...newPageData];
25    isLoading = false;
26    return true;
27  };
28</script>
29
30<SimpleTable
31  columns={paginationConfig.headers}
32  height={height ?? "auto"}
33  {isLoading}
34  {onNextPage}
35  {rows}
36  rowsPerPage={PAGINATION_ROWS_PER_PAGE}
37  enablePagination={true}
38  {theme}
39/>

Solid TSX

Copy

1import { createSignal } from "solid-js";
2import {SimpleTable} from "@simple-table/solid";import type { Theme } from "@simple-table/solid";
3import { paginationConfig, paginationData, PAGINATION_ROWS_PER_PAGE } from "./pagination.demo-data";
4import "@simple-table/solid/styles.css";
5
6export default function PaginationDemo(props: {
7  height?: string | number;
8  theme?: Theme;
9}) {
10  const [rows, setRows] = createSignal(paginationData.slice(0, PAGINATION_ROWS_PER_PAGE));
11  const [isLoading, setIsLoading] = createSignal(false);
12
13  const onNextPage = async (pageIndex: number) => {
14    const startIndex = pageIndex * PAGINATION_ROWS_PER_PAGE;
15    const endIndex = startIndex + PAGINATION_ROWS_PER_PAGE;
16
17    setIsLoading(true);
18    await new Promise((resolve) => setTimeout(resolve, 800));
19    const newPageData = paginationData.slice(startIndex, endIndex);
20
21    if (newPageData.length === 0 || rows().length > startIndex) {
22      setIsLoading(false);
23      return false;
24    }
25
26    setRows((prev) => [...prev, ...newPageData]);
27    setIsLoading(false);
28    return true;
29  };
30
31  return (
32    <SimpleTable
33      columns={paginationConfig.headers}
34      height={props.height ?? "auto"}
35      isLoading={isLoading()}
36      onNextPage={onNextPage}
37      rows={rows()}
38      rowsPerPage={PAGINATION_ROWS_PER_PAGE}
39      enablePagination={true}
40      theme={props.theme}
41    />
42  );
43}

TypeScriptPaginationDemo.ts

Copy

1import { SimpleTableVanilla } from "simple-table-core";
2import type { Theme } from "simple-table-core";
3import { paginationConfig, paginationData, PAGINATION_ROWS_PER_PAGE } from "./pagination.demo-data";
4import "simple-table-core/styles.css";
5
6export function renderPaginationDemo(
7  container: HTMLElement,
8  options?: { height?: string | number; theme?: Theme }
9): SimpleTableVanilla {
10  let rows = paginationData.slice(0, PAGINATION_ROWS_PER_PAGE);
11
12  const table = new SimpleTableVanilla(container, {
13    columns: paginationConfig.headers,
14    rows,
15    height: options?.height ?? "auto",
16    theme: options?.theme,
17    enablePagination: true,
18    rowsPerPage: PAGINATION_ROWS_PER_PAGE,
19    onNextPage: async (pageIndex: number) => {
20      const startIndex = pageIndex * PAGINATION_ROWS_PER_PAGE;
21      const endIndex = startIndex + PAGINATION_ROWS_PER_PAGE;
22
23      table.update({ isLoading: true });
24      await new Promise((resolve) => setTimeout(resolve, 800));
25      const newPageData = paginationData.slice(startIndex, endIndex);
26
27      if (newPageData.length === 0 || rows.length > startIndex) {
28        table.update({ isLoading: false });
29        return false;
30      }
31
32      rows = [...rows, ...newPageData];
33      table.update({ rows, isLoading: false });
34      return true;
35    },
36  });
37
38  return table;
39}
40
41
42// pagination.demo-data.ts
43// Self-contained demo table setup for this example.
44import type { ColumnDef, Row } from "simple-table-core";
45
46
47export const PAGINATION_ROWS_PER_PAGE = 9;
48
49export const paginationHeaders: ColumnDef[] = [
50  { accessor: "id", label: "ID", width: 60, type: "number" },
51  { accessor: "name", label: "Name", width: "1fr", minWidth: 100, type: "string" },
52  { accessor: "email", label: "Email", width: 200, type: "string" },
53  { accessor: "role", label: "Role", width: 140, type: "string" },
54  { accessor: "department", label: "Department", width: 150, type: "string" },
55  { accessor: "status", label: "Status", width: 110, type: "string" },
56];
57
58export const paginationData: Row[] = [
59  { id: 1, name: "Miguel Santos", email: "miguel.santos@grandhotel.com", role: "Guest Relations Manager", department: "Front Office", status: "Active" },
60  { id: 2, name: "Carmen Delacroix", email: "carmen.d@grandhotel.com", role: "Head Concierge", department: "Concierge", status: "Active" },
61  { id: 3, name: "Dimitri Petrov", email: "dimitri.p@grandhotel.com", role: "Executive Chef", department: "Culinary", status: "Active" },
62  { id: 4, name: "Priya Sharma", email: "priya.sharma@grandhotel.com", role: "Spa Director", department: "Wellness", status: "On Leave" },
63  { id: 5, name: "Giovanni Rossi", email: "giovanni.r@grandhotel.com", role: "Banquet Manager", department: "Events", status: "Active" },
64  { id: 6, name: "Anastasia Volkov", email: "anastasia.v@grandhotel.com", role: "Housekeeping Supervisor", department: "Housekeeping", status: "Active" },
65  { id: 7, name: "Omar Hassan", email: "omar.hassan@grandhotel.com", role: "Night Auditor", department: "Front Office", status: "Active" },
66  { id: 8, name: "Lucia Fernandez", email: "lucia.f@grandhotel.com", role: "Restaurant Manager", department: "Food & Beverage", status: "Active" },
67  { id: 9, name: "Kenji Nakamura", email: "kenji.n@grandhotel.com", role: "Guest Services Coordinator", department: "Guest Services", status: "Active" },
68  { id: 10, name: "Victoria Sterling", email: "victoria.s@grandhotel.com", role: "Sales Director", department: "Sales & Marketing", status: "Active" },
69  { id: 11, name: "Rafael Martinez", email: "rafael.m@grandhotel.com", role: "Security Chief", department: "Security", status: "Active" },
70  { id: 12, name: "Ingrid Larsson", email: "ingrid.l@grandhotel.com", role: "Event Coordinator", department: "Events", status: "Active" },
71  { id: 13, name: "Hassan Al-Rashid", email: "hassan.a@grandhotel.com", role: "Maintenance Supervisor", department: "Engineering", status: "Active" },
72  { id: 14, name: "Chloe Bennett", email: "chloe.b@grandhotel.com", role: "Front Desk Agent", department: "Front Office", status: "Active" },
73  { id: 15, name: "Akira Tanaka", email: "akira.t@grandhotel.com", role: "Sous Chef", department: "Culinary", status: "Active" },
74  { id: 16, name: "Isabella Costa", email: "isabella.c@grandhotel.com", role: "HR Specialist", department: "Human Resources", status: "Active" },
75  { id: 17, name: "Yuki Sato", email: "yuki.sato@grandhotel.com", role: "Guest Experience Manager", department: "Guest Services", status: "Active" },
76  { id: 18, name: "Marco Benedetti", email: "marco.b@grandhotel.com", role: "Sommelier", department: "Food & Beverage", status: "Active" },
77  { id: 19, name: "Fatima Al-Zahra", email: "fatima.a@grandhotel.com", role: "Revenue Manager", department: "Finance", status: "Active" },
78  { id: 20, name: "Sebastian Wagner", email: "sebastian.w@grandhotel.com", role: "Bell Captain", department: "Guest Services", status: "Active" },
79  { id: 21, name: "Mei Lin Chen", email: "mei.chen@grandhotel.com", role: "Pastry Chef", department: "Culinary", status: "Active" },
80  { id: 22, name: "Diego Morales", email: "diego.m@grandhotel.com", role: "Pool Attendant", department: "Recreation", status: "Active" },
81  { id: 23, name: "Zara Khan", email: "zara.khan@grandhotel.com", role: "Business Center Manager", department: "Business Services", status: "Active" },
82  { id: 24, name: "Matteo Ricci", email: "matteo.r@grandhotel.com", role: "Valet Manager", department: "Guest Services", status: "Active" },
83  { id: 25, name: "Camila Gonzalez", email: "camila.g@grandhotel.com", role: "Laundry Supervisor", department: "Housekeeping", status: "Active" },
84  { id: 26, name: "Bjorn Larsson", email: "bjorn.l@grandhotel.com", role: "IT Support Specialist", department: "Technology", status: "Active" },
85  { id: 27, name: "Amara Okafor", email: "amara.o@grandhotel.com", role: "Training Coordinator", department: "Human Resources", status: "On Leave" },
86];
87
88export const paginationConfig = {
89  headers: paginationHeaders,
90  rows: paginationData,
91  tableProps: {
92    rowsPerPage: PAGINATION_ROWS_PER_PAGE,
93    enablePagination: true,
94  },
95} as const;
96

Property	Required	Description	Example
Property	Required	Description	Example
`enablePagination` boolean	Optional	Enables pagination and shows the default footer controls.
`rowsPerPage` number	Optional	Rows per page. Defaults to 10.
`serverSidePagination` boolean	Optional	When true, disables internal slicing — supply the current page of rows yourself.
`totalRowCount` number	Optional	Total rows on the server (used with serverSidePagination to compute pages).
`onPageChange` (page: number) => void \| Promise<void>	Optional	Fires when the page changes. Use to fetch the next page for server-side mode.
`isLoading` boolean	Optional	Show loading skeletons while page data is fetching.

Documentation

Pagination

Enable pagination

Server-side pagination

Custom footer

Example

Props

Pagination Configuration