Infinite Scroll

1import { Component, Input } from "@angular/core";
2import { SimpleTableImports } from "@simple-table/angular";
3import type { AngularColumnDef, GetRowIdParams, Theme } from "@simple-table/angular";
4import { infiniteScrollConfig, generateInfiniteScrollData } from "./infinite-scroll.demo-data";
5import "@simple-table/angular/styles.css";
6import type { InfiniteScrollEmployee } from "./infinite-scroll.demo-data";
7
8const MAX_ROWS = 200;
9const BATCH_SIZE = 15;
10
11@Component({
12  selector: "infinite-scroll-demo",
13  standalone: true,
14  imports: [SimpleTableImports],
15  template: `
16    <div>
17      <div style="margin-bottom: 8px; font-size: 13px; color: #666">
18        {{ rows.length }} rows loaded{{ hasMore ? '' : ' (all loaded)' }}
19      </div>
20      <simple-table
21      [getRowId]="getRowId"
22        [rows]="rows"
23        [columns]="headers"
24        [isLoading]="loading"
25        [height]="height"
26        [theme]="theme"
27        (loadMore)="handleLoadMore()"
28      ></simple-table>
29    </div>
30  `,
31})
32export class InfiniteScrollDemoComponent {
33  @Input() height: string | number = "400px";
34  @Input() theme?: Theme;
35
36  readonly headers: AngularColumnDef<InfiniteScrollEmployee>[] = infiniteScrollConfig.headers;
37  rows: InfiniteScrollEmployee[] = generateInfiniteScrollData(0, 30) ;
38  loading = false;
39  hasMore = true;
40
41  handleLoadMore = () => {
42    if (this.loading || !this.hasMore) return;
43    this.loading = true;
44    setTimeout(() => {
45      const newRows = generateInfiniteScrollData(this.rows.length, BATCH_SIZE) ;
46      this.rows = [...this.rows, ...newRows];
47      if (this.rows.length >= MAX_ROWS) this.hasMore = false;
48      this.loading = false;
49    }, 500);
50  };
51
52  getRowId = ({ row }: GetRowIdParams<InfiniteScrollEmployee>) => row.id;
53}
54
55
56// infinite-scroll.demo-data.ts
57// Self-contained demo table setup for this example.
58import type { AngularColumnDef, ValueFormatterProps } from "@simple-table/angular";
59
60export interface InfiniteScrollEmployee {
61  id: number;
62  name: string;
63  email: string;
64  department: string;
65  salary: number;
66}
67
68const FIRST_NAMES = ["Elena", "Kai", "Amara", "Santiago", "Priya", "Magnus", "Zara", "Luca", "Sarah", "Olumide", "Isabella", "Dmitri"];
69const LAST_NAMES = ["Vasquez", "Tanaka", "Okafor", "Rodriguez", "Chakraborty", "Eriksson", "Al-Rashid", "Rossi", "Kim", "Adebayo", "Chen", "Volkov"];
70const DEPARTMENTS = ["Engineering", "AI Research", "UX Design", "DevOps", "Marketing", "Product", "Sales", "Finance"];
71
72export function generateInfiniteScrollData(startIndex: number, count: number): InfiniteScrollEmployee[] {
73  const rows: InfiniteScrollEmployee[] = [];
74  for (let i = 0; i < count; i++) {
75    const idx = startIndex + i;
76    const first = FIRST_NAMES[idx % FIRST_NAMES.length];
77    const last = LAST_NAMES[idx % LAST_NAMES.length];
78    rows.push({
79      id: idx + 1,
80      name: `${first} ${last}`,
81      email: `${first.toLowerCase()}.${last.toLowerCase()}@techcorp.com`,
82      department: DEPARTMENTS[idx % DEPARTMENTS.length],
83      salary: 60000 + Math.floor(((idx * 7919) % 100000)),
84    });
85  }
86  return rows;
87}
88
89export const infiniteScrollHeaders: AngularColumnDef<InfiniteScrollEmployee, any>[] = [
90  { accessor: "id", label: "ID", width: 80, type: "number" },
91  { accessor: "name", label: "Name", width: "1fr", minWidth: 120 },
92  { accessor: "email", label: "Email", width: 250 },
93  { accessor: "department", label: "Department", width: 150 },
94  {
95    accessor: "salary",
96    label: "Salary",
97    width: 120,
98    type: "number",
99    align: "right",
100    valueFormatter: ({ value }: ValueFormatterProps<InfiniteScrollEmployee, number>) => `$${value.toLocaleString()}`,
101  },
102];
103
104export const infiniteScrollConfig = {
105  headers: infiniteScrollHeaders,
106  rows: generateInfiniteScrollData(0, 30),
107};
108

1<script setup lang="ts">
2import { ref, computed } from "vue";
3import { SimpleTable } from "@simple-table/vue";
4import type { Theme, GetRowIdParams } from "@simple-table/vue";
5import { infiniteScrollConfig, generateInfiniteScrollData } from "./infinite-scroll.demo-data";
6import type { InfiniteScrollEmployee } from "./infinite-scroll.demo-data";
7import "@simple-table/vue/styles.css";
8
9const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
10  height: "400px",
11});
12
13const MAX_ROWS = 200;
14const BATCH_SIZE = 15;
15
16const rows = ref<InfiniteScrollEmployee[]>(generateInfiniteScrollData(0, 30));
17const loading = ref(false);
18const hasMore = ref(true);
19
20const getRowId = ({ row }: GetRowIdParams<InfiniteScrollEmployee>) => row.id;
21
22const statusText = computed(() =>
23  `${rows.value.length} rows loaded${hasMore.value ? "" : " (all loaded)"}`,
24);
25
26function handleLoadMore() {
27  if (loading.value || !hasMore.value) return;
28  loading.value = true;
29  setTimeout(() => {
30    const newRows = generateInfiniteScrollData(rows.value.length, BATCH_SIZE);
31    rows.value = [...rows.value, ...newRows];
32    if (rows.value.length >= MAX_ROWS) hasMore.value = false;
33    loading.value = false;
34  }, 500);
35}
36</script>
37
38<template>
39  <div>
40    <div style="margin-bottom: 8px; font-size: 13px; color: #666">{{ statusText }}</div>
41    <SimpleTable
42      :columns="infiniteScrollConfig.headers"
43      :get-row-id="getRowId"
44      :rows="rows"
45      :is-loading="loading"
46      :on-load-more="handleLoadMore"
47      :height="props.height"
48      :theme="props.theme"
49    />
50  </div>
51</template>

1<script lang="ts">
2  import { SimpleTable } from "@simple-table/svelte";
3  import type { Theme, GetRowIdParams } from "@simple-table/svelte";
4  import { infiniteScrollConfig, generateInfiniteScrollData } from "./infinite-scroll.demo-data";
5  import type { InfiniteScrollEmployee } from "./infinite-scroll.demo-data";
6  import "@simple-table/svelte/styles.css";
7
8  let { height = "400px", theme }: { height?: string | number; theme?: Theme } = $props();
9
10  const MAX_ROWS = 200;
11  const BATCH_SIZE = 15;
12
13  let rows = $state<InfiniteScrollEmployee[]>(generateInfiniteScrollData(0, 30));
14  let loading = $state(false);
15  let hasMore = $state(true);
16
17  const getRowId = ({ row }: GetRowIdParams<InfiniteScrollEmployee>) => row.id;
18
19  function handleLoadMore() {
20    if (loading || !hasMore) return;
21    loading = true;
22    setTimeout(() => {
23      const newRows = generateInfiniteScrollData(rows.length, BATCH_SIZE);
24      rows = [...rows, ...newRows];
25      if (rows.length >= MAX_ROWS) hasMore = false;
26      loading = false;
27    }, 500);
28  }
29</script>
30
31<div>
32  <div style="margin-bottom: 8px; font-size: 13px; color: #666">
33    {rows.length} rows loaded{hasMore ? "" : " (all loaded)"}
34  </div>
35  <SimpleTable
36    columns={infiniteScrollConfig.headers}
37    {rows}
38    {getRowId}
39    isLoading={loading}
40    onLoadMore={handleLoadMore}
41    {height}
42    {theme}
43  />
44</div>

1import { createSignal, createMemo } from "solid-js";
2import { SimpleTable } from "@simple-table/solid";
3import type { Theme } from "@simple-table/solid";
4import {
5  infiniteScrollConfig,
6  generateInfiniteScrollData,
7  type InfiniteScrollEmployee,
8} from "./infinite-scroll.demo-data";
9import "@simple-table/solid/styles.css";
10
11const MAX_ROWS = 200;
12const BATCH_SIZE = 15;
13
14export default function InfiniteScrollDemo(props: { height?: string | number; theme?: Theme }) {
15  const [rows, setRows] = createSignal<InfiniteScrollEmployee[]>(generateInfiniteScrollData(0, 30));
16  const [loading, setLoading] = createSignal(false);
17  const [hasMore, setHasMore] = createSignal(true);
18
19  const statusText = createMemo(() =>
20    `${rows().length} rows loaded${hasMore() ? "" : " (all loaded)"}`,
21  );
22
23  const handleLoadMore = () => {
24    if (loading() || !hasMore()) return;
25    setLoading(true);
26    setTimeout(() => {
27      setRows((prev) => {
28        const newRows = generateInfiniteScrollData(prev.length, BATCH_SIZE);
29        const updated = [...prev, ...newRows];
30        if (updated.length >= MAX_ROWS) setHasMore(false);
31        return updated;
32      });
33      setLoading(false);
34    }, 500);
35  };
36
37  return (
38    <div>
39      <div style={{ "margin-bottom": "8px", "font-size": "13px", color: "#666" }}>
40        {statusText()}
41      </div>
42      <SimpleTable
43        columns={infiniteScrollConfig.headers}
44        getRowId={({ row }) => row.id}
45        rows={rows()}
46        onLoadMore={handleLoadMore}
47        isLoading={loading()}
48        height={props.height ?? "400px"}
49        theme={props.theme}
50      />
51    </div>
52  );
53}

1import { SimpleTableVanilla } from "simple-table-core";
2import type { InfiniteScrollEmployee } from "./infinite-scroll.demo-data";
3import type { Theme, GetRowIdParams } from "simple-table-core";
4import { infiniteScrollConfig, generateInfiniteScrollData } from "./infinite-scroll.demo-data";
5import "simple-table-core/styles.css";
6
7const MAX_ROWS = 200;
8const BATCH_SIZE = 15;
9
10
11const getRowId = ({ row }: GetRowIdParams<InfiniteScrollEmployee>) => row.id;
12export function renderInfiniteScrollDemo(
13  container: HTMLElement,
14  options?: { height?: string | number; theme?: Theme }
15): SimpleTableVanilla<InfiniteScrollEmployee> {
16  const wrapper = document.createElement("div");
17
18  const status = document.createElement("div");
19  Object.assign(status.style, { marginBottom: "8px", fontSize: "13px", color: "#666" });
20
21  wrapper.appendChild(status);
22
23  const tableContainer = document.createElement("div");
24  wrapper.appendChild(tableContainer);
25  container.appendChild(wrapper);
26
27  let rows: InfiniteScrollEmployee[] = generateInfiniteScrollData(0, 30);
28  let loading = false;
29  let hasMore = true;
30
31  const updateStatus = () => {
32    status.textContent = `${rows.length} rows loaded${hasMore ? "" : " (all loaded)"}`;
33  };
34  updateStatus();
35
36  const table = new SimpleTableVanilla(tableContainer, {
37    getRowId,
38    columns: infiniteScrollConfig.headers,
39    rows,
40    height: options?.height ?? "400px",
41    theme: options?.theme,
42    onLoadMore: () => {
43      if (loading || !hasMore) return;
44      loading = true;
45      table.update({ isLoading: true });
46      setTimeout(() => {
47        const newRows = generateInfiniteScrollData(rows.length, BATCH_SIZE) ;
48        rows = [...rows, ...newRows];
49        if (rows.length >= MAX_ROWS) hasMore = false;
50        loading = false;
51        table.update({ rows, isLoading: false });
52        updateStatus();
53      }, 500);
54    },
55  });
56
57  return table;
58}
59
60
61// infinite-scroll.demo-data.ts
62// Self-contained demo table setup for this example.
63import type { ColumnDef } from "simple-table-core";
64
65export interface InfiniteScrollEmployee {
66  id: number;
67  name: string;
68  email: string;
69  department: string;
70  salary: number;
71}
72
73const FIRST_NAMES = ["Elena", "Kai", "Amara", "Santiago", "Priya", "Magnus", "Zara", "Luca", "Sarah", "Olumide", "Isabella", "Dmitri"];
74const LAST_NAMES = ["Vasquez", "Tanaka", "Okafor", "Rodriguez", "Chakraborty", "Eriksson", "Al-Rashid", "Rossi", "Kim", "Adebayo", "Chen", "Volkov"];
75const DEPARTMENTS = ["Engineering", "AI Research", "UX Design", "DevOps", "Marketing", "Product", "Sales", "Finance"];
76
77export function generateInfiniteScrollData(startIndex: number, count: number): InfiniteScrollEmployee[] {
78  const rows: InfiniteScrollEmployee[] = [];
79  for (let i = 0; i < count; i++) {
80    const idx = startIndex + i;
81    const first = FIRST_NAMES[idx % FIRST_NAMES.length];
82    const last = LAST_NAMES[idx % LAST_NAMES.length];
83    rows.push({
84      id: idx + 1,
85      name: `${first} ${last}`,
86      email: `${first.toLowerCase()}.${last.toLowerCase()}@techcorp.com`,
87      department: DEPARTMENTS[idx % DEPARTMENTS.length],
88      salary: 60000 + Math.floor(((idx * 7919) % 100000)),
89    });
90  }
91  return rows;
92}
93
94export const infiniteScrollHeaders: ColumnDef<InfiniteScrollEmployee>[] = [
95  { accessor: "id", label: "ID", width: 80, type: "number" },
96  { accessor: "name", label: "Name", width: "1fr", minWidth: 120 },
97  { accessor: "email", label: "Email", width: 250 },
98  { accessor: "department", label: "Department", width: 150 },
99  {
100    accessor: "salary",
101    label: "Salary",
102    width: 120,
103    type: "number",
104    align: "right",
105    valueFormatter: ({ value }) => `$${Number(value).toLocaleString()}`,
106  },
107];
108
109export const infiniteScrollConfig = {
110  headers: infiniteScrollHeaders,
111  rows: generateInfiniteScrollData(0, 30),
112};
113