Pagination

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

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    :get-row-id="getRowId"
9    :rows-per-page="PAGINATION_ROWS_PER_PAGE"
10    :enable-pagination="true"
11    :theme="theme"
12  />
13</template>
14
15<script setup lang="ts">
16import { ref } from "vue";
17import { SimpleTable } from "@simple-table/vue";
18import type { Theme, GetRowIdParams } from "@simple-table/vue";
19import { paginationConfig, paginationData, PAGINATION_ROWS_PER_PAGE } from "./pagination.demo-data";
20import type { HotelStaff } from "./pagination.demo-data";
21import "@simple-table/vue/styles.css";
22
23withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {});
24
25const getRowId = ({ row }: GetRowIdParams<HotelStaff>) => row.id;
26
27const rows = ref<HotelStaff[]>(paginationData.slice(0, PAGINATION_ROWS_PER_PAGE));
28const isLoading = ref(false);
29
30const onNextPage = async (pageIndex: number) => {
31  const startIndex = pageIndex * PAGINATION_ROWS_PER_PAGE;
32  const endIndex = startIndex + PAGINATION_ROWS_PER_PAGE;
33
34  isLoading.value = true;
35  await new Promise((resolve) => setTimeout(resolve, 800));
36  const newPageData = paginationData.slice(startIndex, endIndex);
37
38  if (newPageData.length === 0 || rows.value.length > startIndex) {
39    isLoading.value = false;
40    return false;
41  }
42
43  rows.value = [...rows.value, ...newPageData];
44  isLoading.value = false;
45  return true;
46};
47</script>

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

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, type HotelStaff } 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<HotelStaff[]>(
11    paginationData.slice(0, PAGINATION_ROWS_PER_PAGE),
12  );
13  const [isLoading, setIsLoading] = createSignal(false);
14
15  const onNextPage = async (pageIndex: number) => {
16    const startIndex = pageIndex * PAGINATION_ROWS_PER_PAGE;
17    const endIndex = startIndex + PAGINATION_ROWS_PER_PAGE;
18
19    setIsLoading(true);
20    await new Promise((resolve) => setTimeout(resolve, 800));
21    const newPageData = paginationData.slice(startIndex, endIndex);
22
23    if (newPageData.length === 0 || rows().length > startIndex) {
24      setIsLoading(false);
25      return false;
26    }
27
28    setRows((prev) => [...prev, ...newPageData]);
29    setIsLoading(false);
30    return true;
31  };
32
33  return (
34    <SimpleTable
35      columns={paginationConfig.headers}
36      height={props.height ?? "auto"}
37      isLoading={isLoading()}
38      onNextPage={onNextPage}
39      getRowId={({ row }) => row.id}
40      rows={rows()}
41      rowsPerPage={PAGINATION_ROWS_PER_PAGE}
42      enablePagination={true}
43      theme={props.theme}
44    />
45  );
46}

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