Loading State

1import { Component, Input, OnInit, OnDestroy } from "@angular/core";
2import {SimpleTableComponent} from "@simple-table/angular";import type { AngularColumnDef, GetRowIdParams, Theme } from "@simple-table/angular";
3import { loadingStateConfig } from "./loading-state.demo-data";
4import "@simple-table/angular/styles.css";
5import type { LoadingStateEmployee } from "./loading-state.demo-data";
6
7@Component({
8  selector: "loading-state-demo",
9  standalone: true,
10  imports: [SimpleTableComponent],
11  template: `
12    <div>
13      <div style="margin-bottom: 12px">
14        <button
15          (click)="loadData()"
16          [disabled]="isLoading"
17          [style.padding]="'6px 16px'"
18          [style.cursor]="isLoading ? 'not-allowed' : 'pointer'"
19        >
20          {{ isLoading ? 'Loading\u2026' : 'Reload Data' }}
21        </button>
22      </div>
23      <simple-table
24      [getRowId]="getRowId"
25        [rows]="data"
26        [columns]="headers"
27        [height]="height"
28        [theme]="theme"
29        [isLoading]="isLoading"
30      ></simple-table>
31    </div>
32  `,
33})
34export class LoadingStateDemoComponent implements OnInit, OnDestroy {
35  @Input() height: string | number = "400px";
36  @Input() theme?: Theme;
37
38  readonly headers: AngularColumnDef<LoadingStateEmployee>[] = loadingStateConfig.headers;
39  data: LoadingStateEmployee[] = [];
40  isLoading = true;
41  private timer: ReturnType<typeof setTimeout> | null = null;
42
43  ngOnInit(): void {
44    this.loadData();
45  }
46
47  ngOnDestroy(): void {
48    if (this.timer) clearTimeout(this.timer);
49  }
50
51  loadData(): void {
52    this.isLoading = true;
53    this.data = [];
54    if (this.timer) clearTimeout(this.timer);
55    this.timer = setTimeout(() => {
56      this.data = loadingStateConfig.rows ;
57      this.isLoading = false;
58    }, 2000);
59  }
60}
61
62
63// loading-state.demo-data.ts
64// Self-contained demo table setup for this example.
65import type { AngularColumnDef, ValueFormatterProps } from "@simple-table/angular";
66
67export interface LoadingStateEmployee {
68  id: number;
69  name: string;
70  age: number;
71  department: string;
72  salary: number;
73  status: string;
74}
75
76export const loadingStateData: LoadingStateEmployee[] = [
77  { id: 1, name: "Dr. Elena Vasquez", age: 42, department: "AI Research", salary: 145000, status: "Active" },
78  { id: 2, name: "Kai Tanaka", age: 29, department: "UX Design", salary: 95000, status: "Active" },
79  { id: 3, name: "Amara Okafor", age: 35, department: "DevOps", salary: 125000, status: "On Leave" },
80  { id: 4, name: "Santiago Rodriguez", age: 27, department: "Marketing", salary: 82000, status: "Active" },
81  { id: 5, name: "Priya Chakraborty", age: 33, department: "Engineering", salary: 118000, status: "Active" },
82  { id: 6, name: "Magnus Eriksson", age: 38, department: "Product", salary: 110000, status: "Inactive" },
83  { id: 7, name: "Zara Al-Rashid", age: 31, department: "Sales", salary: 98000, status: "Active" },
84  { id: 8, name: "Luca Rossi", age: 26, department: "Marketing", salary: 75000, status: "Active" },
85];
86
87export const loadingStateHeaders: AngularColumnDef<LoadingStateEmployee, any>[] = [
88  { accessor: "name", label: "Name", width: "1fr", minWidth: 120 },
89  { accessor: "age", label: "Age", width: 80, type: "number" },
90  { accessor: "department", label: "Department", width: 150 },
91  {
92    accessor: "salary",
93    label: "Salary",
94    width: 120,
95    type: "number",
96    align: "right",
97    valueFormatter: ({ value }: ValueFormatterProps<LoadingStateEmployee, number>) => `$${value.toLocaleString()}`,
98  },
99  { accessor: "status", label: "Status", width: 120 },
100];
101
102export const loadingStateConfig = {
103  headers: loadingStateHeaders,
104  rows: loadingStateData,
105};
106

1<script setup lang="ts">
2import { ref, onMounted } from "vue";
3import { SimpleTable } from "@simple-table/vue";
4import type { Theme, GetRowIdParams } from "@simple-table/vue";
5import { loadingStateConfig } from "./loading-state.demo-data";
6import type { LoadingStateEmployee } from "./loading-state.demo-data";
7import "@simple-table/vue/styles.css";
8
9const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
10  height: "400px",
11});
12
13const isLoading = ref(true);
14const data = ref<LoadingStateEmployee[]>([]);
15
16const getRowId = ({ row }: GetRowIdParams<LoadingStateEmployee>) => row.id;
17
18function loadData() {
19  isLoading.value = true;
20  data.value = [];
21  setTimeout(() => {
22    data.value = [...loadingStateConfig.rows];
23    isLoading.value = false;
24  }, 2000);
25}
26
27onMounted(() => {
28  loadData();
29});
30</script>
31
32<template>
33  <div>
34    <div style="margin-bottom: 12px">
35      <button
36        @click="loadData"
37        :disabled="isLoading"
38        :style="{ padding: '6px 16px', cursor: isLoading ? 'not-allowed' : 'pointer' }"
39      >
40        {{ isLoading ? 'Loading\u2026' : 'Reload Data' }}
41      </button>
42    </div>
43    <SimpleTable
44      :columns="loadingStateConfig.headers"
45      :get-row-id="getRowId"
46      :rows="data"
47      :is-loading="isLoading"
48      :height="props.height"
49      :theme="props.theme"
50    />
51  </div>
52</template>

1<script lang="ts">
2  import { SimpleTable } from "@simple-table/svelte";
3  import type { Theme, GetRowIdParams } from "@simple-table/svelte";
4  import { onMount } from "svelte";
5  import { loadingStateConfig } from "./loading-state.demo-data";
6  import type { LoadingStateEmployee } from "./loading-state.demo-data";
7  import "@simple-table/svelte/styles.css";
8
9  let { height = "400px", theme }: { height?: string | number; theme?: Theme } = $props();
10
11  let isLoading = $state(true);
12  let data = $state<LoadingStateEmployee[]>([]);
13
14  const getRowId = ({ row }: GetRowIdParams<LoadingStateEmployee>) => row.id;
15
16  function loadData() {
17    isLoading = true;
18    data = [];
19    setTimeout(() => {
20      data = [...loadingStateConfig.rows];
21      isLoading = false;
22    }, 2000);
23  }
24
25  onMount(() => {
26    loadData();
27  });
28</script>
29
30<div>
31  <div style="margin-bottom: 12px">
32    <button
33      onclick={loadData}
34      disabled={isLoading}
35      style="padding: 6px 16px; cursor: {isLoading ? 'not-allowed' : 'pointer'}"
36    >
37      {isLoading ? "Loading\u2026" : "Reload Data"}
38    </button>
39  </div>
40  <SimpleTable
41    columns={loadingStateConfig.headers}
42    rows={data}
43    getRowId={getRowId}
44    {isLoading}
45    {height}
46    {theme}
47  />
48</div>

1import { createSignal, onMount, onCleanup } from "solid-js";
2import { SimpleTable } from "@simple-table/solid";
3import type { Theme } from "@simple-table/solid";
4import { loadingStateConfig, type LoadingStateEmployee } from "./loading-state.demo-data";
5import "@simple-table/solid/styles.css";
6
7export default function LoadingStateDemo(props: { height?: string | number; theme?: Theme }) {
8  const [isLoading, setIsLoading] = createSignal(true);
9  const [data, setData] = createSignal<LoadingStateEmployee[]>([]);
10  let timer: ReturnType<typeof setTimeout> | null = null;
11
12  const loadData = () => {
13    setIsLoading(true);
14    setData([]);
15    if (timer) clearTimeout(timer);
16    timer = setTimeout(() => {
17      setData([...loadingStateConfig.rows]);
18      setIsLoading(false);
19    }, 2000);
20  };
21
22  onMount(() => loadData());
23  onCleanup(() => {
24    if (timer) clearTimeout(timer);
25  });
26
27  return (
28    <div>
29      <div style={{ "margin-bottom": "12px" }}>
30        <button
31          onClick={loadData}
32          disabled={isLoading()}
33          style={{ padding: "6px 16px", cursor: isLoading() ? "not-allowed" : "pointer" }}
34        >
35          {isLoading() ? "Loading\u2026" : "Reload Data"}
36        </button>
37      </div>
38      <SimpleTable
39        columns={loadingStateConfig.headers}
40        getRowId={({ row }) => row.id}
41        rows={data()}
42        isLoading={isLoading()}
43        height={props.height ?? "400px"}
44        theme={props.theme}
45      />
46    </div>
47  );
48}

1import { SimpleTableVanilla } from "simple-table-core";
2import type { LoadingStateEmployee } from "./loading-state.demo-data";
3import type { Theme, Row, GetRowIdParams } from "simple-table-core";
4import { loadingStateConfig } from "./loading-state.demo-data";
5import "simple-table-core/styles.css";
6
7
8const getRowId = ({ row }: GetRowIdParams<LoadingStateEmployee>) => row.id;
9export function renderLoadingStateDemo(
10  container: HTMLElement,
11  options?: { height?: string | number; theme?: Theme }
12): { mount: () => void; destroy: () => void } {
13  const wrapper = document.createElement("div");
14
15  const controls = document.createElement("div");
16  controls.style.marginBottom = "12px";
17
18  const reloadBtn = document.createElement("button");
19  reloadBtn.textContent = "Loading\u2026";
20  reloadBtn.disabled = true;
21  Object.assign(reloadBtn.style, { padding: "6px 16px", cursor: "not-allowed" });
22  controls.appendChild(reloadBtn);
23
24  const tableContainer = document.createElement("div");
25  wrapper.appendChild(controls);
26  wrapper.appendChild(tableContainer);
27  container.appendChild(wrapper);
28
29  let timer: ReturnType<typeof setTimeout> | null = null;
30
31  const table = new SimpleTableVanilla(tableContainer, {
32    getRowId,
33    columns: loadingStateConfig.headers,
34    rows: [] ,
35    height: options?.height ?? "400px",
36    theme: options?.theme,
37    isLoading: true,
38  });
39
40  function loadData() {
41    reloadBtn.textContent = "Loading\u2026";
42    reloadBtn.disabled = true;
43    reloadBtn.style.cursor = "not-allowed";
44    table.update({ rows: [] , isLoading: true });
45
46    if (timer) clearTimeout(timer);
47    timer = setTimeout(() => {
48      table.update({ rows: loadingStateConfig.rows , isLoading: false });
49      reloadBtn.textContent = "Reload Data";
50      reloadBtn.disabled = false;
51      reloadBtn.style.cursor = "pointer";
52    }, 2000);
53  }
54
55  reloadBtn.addEventListener("click", loadData);
56  loadData();
57
58  return {
59    mount: () => table.mount(),
60    destroy: () => {
61      if (timer) clearTimeout(timer);
62      table.destroy();
63    },
64  };
65}
66
67
68// loading-state.demo-data.ts
69// Self-contained demo table setup for this example.
70import type { ColumnDef } from "simple-table-core";
71
72export interface LoadingStateEmployee {
73  id: number;
74  name: string;
75  age: number;
76  department: string;
77  salary: number;
78  status: string;
79}
80
81export const loadingStateData: LoadingStateEmployee[] = [
82  { id: 1, name: "Dr. Elena Vasquez", age: 42, department: "AI Research", salary: 145000, status: "Active" },
83  { id: 2, name: "Kai Tanaka", age: 29, department: "UX Design", salary: 95000, status: "Active" },
84  { id: 3, name: "Amara Okafor", age: 35, department: "DevOps", salary: 125000, status: "On Leave" },
85  { id: 4, name: "Santiago Rodriguez", age: 27, department: "Marketing", salary: 82000, status: "Active" },
86  { id: 5, name: "Priya Chakraborty", age: 33, department: "Engineering", salary: 118000, status: "Active" },
87  { id: 6, name: "Magnus Eriksson", age: 38, department: "Product", salary: 110000, status: "Inactive" },
88  { id: 7, name: "Zara Al-Rashid", age: 31, department: "Sales", salary: 98000, status: "Active" },
89  { id: 8, name: "Luca Rossi", age: 26, department: "Marketing", salary: 75000, status: "Active" },
90];
91
92export const loadingStateHeaders: ColumnDef<LoadingStateEmployee>[] = [
93  { accessor: "name", label: "Name", width: "1fr", minWidth: 120 },
94  { accessor: "age", label: "Age", width: 80, type: "number" },
95  { accessor: "department", label: "Department", width: 150 },
96  {
97    accessor: "salary",
98    label: "Salary",
99    width: 120,
100    type: "number",
101    align: "right",
102    valueFormatter: ({ value }) => `$${Number(value).toLocaleString()}`,
103  },
104  { accessor: "status", label: "Status", width: 120 },
105];
106
107export const loadingStateConfig = {
108  headers: loadingStateHeaders,
109  rows: loadingStateData,
110};
111