Footer Renderer

1<script setup lang="ts">
2import { defineComponent, h } from "vue";
3import { SimpleTable } from "@simple-table/vue";
4import type { Theme, FooterRendererProps } from "@simple-table/vue";
5import { footerRendererConfig } from "./footer-renderer.demo-data";
6import "@simple-table/vue/styles.css";
7
8const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
9  height: "400px",
10});
11
12function getFooterColors(theme?: Theme) {
13  switch (theme) {
14    case "modern-dark":
15    case "dark":
16      return {
17        background: "#1f2937",
18        border: "#374151",
19        text: "#d1d5db",
20        buttonBg: "#374151",
21        buttonBorder: "#4b5563",
22        buttonActive: "#3b82f6",
23        buttonText: "#d1d5db",
24        buttonDisabled: "#6b7280",
25      };
26    case "light":
27    case "modern-light":
28      return {
29        background: "white",
30        border: "#f3f4f6",
31        text: "#6b7280",
32        buttonBg: "white",
33        buttonBorder: "#e5e7eb",
34        buttonActive: "#3b82f6",
35        buttonText: "#374151",
36        buttonDisabled: "#d1d5db",
37      };
38    default:
39      return {
40        background: "#f8fafc",
41        border: "#e2e8f0",
42        text: "#475569",
43        buttonBg: "white",
44        buttonBorder: "#e2e8f0",
45        buttonActive: "#3b82f6",
46        buttonText: "#64748b",
47        buttonDisabled: "#cbd5e1",
48      };
49  }
50}
51
52const FooterBar = defineComponent({
53  name: "FooterBar",
54  setup(fp: FooterRendererProps) {
55    return () => {
56      const c = getFooterColors(props.theme);
57      const btnStyle = (disabled: boolean, active = false) => ({
58        padding: "8px 16px",
59        fontSize: "14px",
60        fontWeight: "500",
61        color: active ? "white" : disabled ? c.buttonDisabled : c.buttonActive,
62        backgroundColor: active ? c.buttonActive : c.buttonBg,
63        border: `1px solid ${c.buttonBorder}`,
64        borderRadius: "6px",
65        cursor: disabled ? ("not-allowed" as const) : ("pointer" as const),
66        transition: "all 0.2s",
67        minWidth: "40px",
68      });
69      return h(
70        "div",
71        {
72          style: {
73            display: "flex",
74            alignItems: "center",
75            justifyContent: "space-between",
76            padding: "16px 20px",
77            backgroundColor: c.background,
78            borderTop: `2px solid ${c.border}`,
79          },
80        },
81        [
82          h(
83            "span",
84            { style: { fontSize: "14px", fontWeight: "600", color: c.text } },
85            `Showing ${fp.startRow}–${fp.endRow} of ${fp.totalRows} items`,
86          ),
87          h(
88            "div",
89            { style: { display: "flex", alignItems: "center", gap: "8px" } },
90            [
91              h("button", {
92                style: btnStyle(!fp.hasPrevPage),
93                disabled: !fp.hasPrevPage,
94                onClick: fp.onPrevPage,
95              }, "Previous"),
96              h(
97                "div",
98                { style: { display: "flex", gap: "4px" } },
99                Array.from({ length: fp.totalPages }, (_, i) => i + 1).map((page) =>
100                  h("button", {
101                    key: page,
102                    style: { ...btnStyle(false, page === fp.currentPage), padding: "8px 12px" },
103                    onClick: () => fp.onPageChange(page),
104                  }, String(page)),
105                ),
106              ),
107              h("button", {
108                style: btnStyle(!fp.hasNextPage),
109                disabled: !fp.hasNextPage,
110                onClick: () => {
111                  void fp.onNextPage();
112                },
113              }, "Next"),
114            ],
115          ),
116        ],
117      );
118    };
119  },
120});
121</script>
122
123<template>
124  <SimpleTable
125    :default-headers="footerRendererConfig.headers"
126    :rows="footerRendererConfig.rows"
127    :footer-renderer="FooterBar"
128    :should-paginate="true"
129    :rows-per-page="10"
130    :hide-footer="false"
131    :height="props.height"
132    :theme="props.theme"
133  />
134</template>

1import { signal } from "@angular/core";
2import type { Theme } from "@simple-table/angular";
3
4export const footerDemoThemeContext = signal<Theme | undefined>(undefined);
5
6
7// footer-pagination.component.ts
8import { Component, computed, Input } from "@angular/core";
9import type { FooterRendererProps } from "@simple-table/angular";
10import type { Theme } from "@simple-table/angular";
11import { footerDemoThemeContext } from "./footer-demo-theme-context";
12
13function palette(theme?: Theme) {
14  switch (theme) {
15    case "modern-dark":
16    case "dark":
17      return {
18        background: "#1f2937",
19        border: "#374151",
20        text: "#d1d5db",
21        buttonBg: "#374151",
22        buttonBorder: "#4b5563",
23        buttonActive: "#3b82f6",
24        buttonText: "#d1d5db",
25        buttonDisabled: "#6b7280",
26      };
27    case "light":
28    case "modern-light":
29      return {
30        background: "white",
31        border: "#f3f4f6",
32        text: "#6b7280",
33        buttonBg: "white",
34        buttonBorder: "#e5e7eb",
35        buttonActive: "#3b82f6",
36        buttonText: "#374151",
37        buttonDisabled: "#d1d5db",
38      };
39    default:
40      return {
41        background: "#f8fafc",
42        border: "#e2e8f0",
43        text: "#475569",
44        buttonBg: "white",
45        buttonBorder: "#e2e8f0",
46        buttonActive: "#3b82f6",
47        buttonText: "#64748b",
48        buttonDisabled: "#cbd5e1",
49      };
50  }
51}
52
53@Component({
54  standalone: true,
55  selector: "demo-footer-pagination",
56  template: `
57    <div
58      style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;"
59      [style.background-color]="colors().background"
60      [style.border-top]="'2px solid ' + colors().border"
61    >
62      <span style="font-size:14px;font-weight:600;" [style.color]="colors().text">
63        Showing {{ startRow }}–{{ endRow }} of {{ totalRows }} items
64      </span>
65      <div style="display:flex;align-items:center;gap:8px;">
66        <button
67          type="button"
68          [disabled]="!hasPrevPage"
69          (click)="onPrevPage()"
70          [style.padding]="'8px 16px'"
71          [style.font-size]="'14px'"
72          [style.font-weight]="'500'"
73          [style.color]="btnStylePrev().color"
74          [style.background-color]="btnStylePrev().bg"
75          [style.border]="'1px solid ' + colors().buttonBorder"
76          [style.border-radius]="'6px'"
77          [style.cursor]="hasPrevPage ? 'pointer' : 'not-allowed'"
78          [style.min-width]="'40px'"
79        >
80          Previous
81        </button>
82        <div style="display:flex;gap:4px;">
83          @for (p of pageNumbers(); track p) {
84            <button
85              type="button"
86              (click)="onPageChange(p)"
87              [style.padding]="'8px 12px'"
88              [style.font-size]="'14px'"
89              [style.font-weight]="'500'"
90              [style.color]="pageBtnStyle(p).color"
91              [style.background-color]="pageBtnStyle(p).bg"
92              [style.border]="'1px solid ' + colors().buttonBorder"
93              [style.border-radius]="'6px'"
94              style="cursor:pointer;min-width:40px;"
95            >
96              {{ p }}
97            </button>
98          }
99        </div>
100        <button
101          type="button"
102          [disabled]="!hasNextPage"
103          (click)="onNext()"
104          [style.padding]="'8px 16px'"
105          [style.font-size]="'14px'"
106          [style.font-weight]="'500'"
107          [style.color]="btnStyleNext().color"
108          [style.background-color]="btnStyleNext().bg"
109          [style.border]="'1px solid ' + colors().buttonBorder"
110          [style.border-radius]="'6px'"
111          [style.cursor]="hasNextPage ? 'pointer' : 'not-allowed'"
112          [style.min-width]="'40px'"
113        >
114          Next
115        </button>
116      </div>
117    </div>
118  `,
119})
120export class FooterPaginationComponent {
121  @Input({ required: true }) currentPage!: FooterRendererProps["currentPage"];
122  @Input({ required: true }) endRow!: FooterRendererProps["endRow"];
123  @Input({ required: true }) hasNextPage!: FooterRendererProps["hasNextPage"];
124  @Input({ required: true }) hasPrevPage!: FooterRendererProps["hasPrevPage"];
125  @Input({ required: true }) onNextPage!: FooterRendererProps["onNextPage"];
126  @Input({ required: true }) onPageChange!: FooterRendererProps["onPageChange"];
127  @Input({ required: true }) onPrevPage!: FooterRendererProps["onPrevPage"];
128  @Input({ required: true }) rowsPerPage!: FooterRendererProps["rowsPerPage"];
129  @Input({ required: true }) startRow!: FooterRendererProps["startRow"];
130  @Input({ required: true }) totalPages!: FooterRendererProps["totalPages"];
131  @Input({ required: true }) totalRows!: FooterRendererProps["totalRows"];
132
133  readonly colors = computed(() => palette(footerDemoThemeContext()));
134
135  pageNumbers(): number[] {
136    return Array.from({ length: this.totalPages }, (_, i) => i + 1);
137  }
138
139  btnStylePrev(): { color: string; bg: string } {
140    const c = this.colors();
141    return {
142      color: !this.hasPrevPage ? c.buttonDisabled : c.buttonActive,
143      bg: c.buttonBg,
144    };
145  }
146
147  btnStyleNext(): { color: string; bg: string } {
148    const c = this.colors();
149    return {
150      color: !this.hasNextPage ? c.buttonDisabled : c.buttonActive,
151      bg: c.buttonBg,
152    };
153  }
154
155  pageBtnStyle(p: number): { color: string; bg: string } {
156    const c = this.colors();
157    const active = p === this.currentPage;
158    return {
159      color: active ? "white" : c.buttonActive,
160      bg: active ? c.buttonActive : c.buttonBg,
161    };
162  }
163
164  onNext(): void {
165    void this.onNextPage();
166  }
167}
168
169
170// footer-renderer-demo.component.ts
171import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from "@angular/core";
172import { SimpleTableComponent } from "@simple-table/angular";
173import type { AngularHeaderObject, Row, Theme } from "@simple-table/angular";
174import { footerDemoThemeContext } from "./footer-demo-theme-context";
175import { FooterPaginationComponent } from "./footer-pagination.component";
176import { footerRendererConfig } from "./footer-renderer.demo-data";
177import "@simple-table/angular/styles.css";
178
179@Component({
180  selector: "footer-renderer-demo",
181  standalone: true,
182  imports: [SimpleTableComponent],
183  template: `
184    <simple-table
185      [rows]="rows"
186      [defaultHeaders]="headers"
187      [footerRenderer]="footerRenderer"
188      [shouldPaginate]="true"
189      [rowsPerPage]="10"
190      [hideFooter]="false"
191      [height]="height"
192      [theme]="theme"
193    ></simple-table>
194  `,
195})
196export class FooterRendererDemoComponent implements OnInit, OnChanges, OnDestroy {
197  @Input() height: string | number = "400px";
198  @Input() theme?: Theme;
199
200  readonly rows: Row[] = footerRendererConfig.rows;
201  readonly headers: AngularHeaderObject[] = footerRendererConfig.headers;
202  readonly footerRenderer = FooterPaginationComponent;
203
204  ngOnInit(): void {
205    footerDemoThemeContext.set(this.theme);
206  }
207
208  ngOnChanges(changes: SimpleChanges): void {
209    if (changes["theme"]) {
210      footerDemoThemeContext.set(this.theme);
211    }
212  }
213
214  ngOnDestroy(): void {
215    footerDemoThemeContext.set(undefined);
216  }
217}
218
219
220// footer-renderer.demo-data.ts
221// Self-contained demo table setup for this example.
222import type { AngularHeaderObject, Row } from "@simple-table/angular";
223
224
225export const footerRendererHeaders: AngularHeaderObject[] = [
226  { accessor: "id", label: "ID", width: 60, type: "number" },
227  { accessor: "product", label: "Product Name", width: 220, type: "string" },
228  { accessor: "category", label: "Category", width: 150, type: "string" },
229  { accessor: "price", label: "Price", width: 100, type: "number" },
230  { accessor: "stock", label: "Stock", width: 100, type: "number" },
231  { accessor: "status", label: "Status", width: "1fr", type: "string" },
232];
233
234export const footerRendererData: Row[] = [
235  { id: 1, product: "MacBook Pro 16-inch M3 Max", category: "Laptops", price: 3499, stock: 28, status: "In Stock" },
236  { id: 2, product: "Dell XPS 15 OLED Touchscreen", category: "Laptops", price: 2299, stock: 42, status: "In Stock" },
237  { id: 3, product: "ThinkPad X1 Carbon Gen 11", category: "Laptops", price: 1899, stock: 35, status: "In Stock" },
238  { id: 4, product: "HP Spectre x360 Convertible", category: "Laptops", price: 1649, stock: 51, status: "In Stock" },
239  { id: 5, product: "ASUS ROG Strix Gaming Laptop", category: "Laptops", price: 2199, stock: 19, status: "In Stock" },
240  { id: 6, product: "Logitech MX Master 3S Wireless", category: "Accessories", price: 99, stock: 342, status: "In Stock" },
241  { id: 7, product: "Apple Magic Mouse Black", category: "Accessories", price: 89, stock: 218, status: "In Stock" },
242  { id: 8, product: "Razer DeathAdder V3 Pro", category: "Accessories", price: 149, stock: 167, status: "In Stock" },
243  { id: 9, product: "Microsoft Surface Precision Mouse", category: "Accessories", price: 79, stock: 203, status: "In Stock" },
244  { id: 10, product: "Corsair K95 RGB Platinum XT", category: "Keyboards", price: 199, stock: 89, status: "In Stock" },
245  { id: 11, product: "Keychron Q1 Pro Mechanical", category: "Keyboards", price: 189, stock: 134, status: "In Stock" },
246  { id: 12, product: "Ducky One 3 TKL RGB", category: "Keyboards", price: 159, stock: 76, status: "In Stock" },
247  { id: 13, product: "Leopold FC900R PD Cherry MX", category: "Keyboards", price: 169, stock: 54, status: "In Stock" },
248  { id: 14, product: "LG UltraGear 27-inch 4K 144Hz", category: "Monitors", price: 799, stock: 31, status: "In Stock" },
249  { id: 15, product: "Samsung Odyssey G9 Curved", category: "Monitors", price: 1299, stock: 18, status: "In Stock" },
250  { id: 16, product: "Dell UltraSharp U2723DE 27in", category: "Monitors", price: 649, stock: 47, status: "In Stock" },
251  { id: 17, product: "BenQ PD3220U Designer 32in", category: "Monitors", price: 1099, stock: 23, status: "In Stock" },
252  { id: 18, product: "ASUS ProArt Display PA279CRV", category: "Monitors", price: 549, stock: 39, status: "In Stock" },
253  { id: 19, product: "Sony WH-1000XM5 Noise Cancelling", category: "Audio", price: 399, stock: 127, status: "In Stock" },
254  { id: 20, product: "Bose QuietComfort Ultra", category: "Audio", price: 429, stock: 98, status: "In Stock" },
255  { id: 21, product: "Apple AirPods Max Space Gray", category: "Audio", price: 549, stock: 82, status: "In Stock" },
256  { id: 22, product: "Sennheiser Momentum 4 Wireless", category: "Audio", price: 349, stock: 104, status: "In Stock" },
257  { id: 23, product: "Logitech C920 HD Pro Webcam", category: "Video", price: 79, stock: 245, status: "In Stock" },
258  { id: 24, product: "Elgato Facecam Pro 4K60", category: "Video", price: 299, stock: 67, status: "In Stock" },
259  { id: 25, product: "Razer Kiyo Pro Ultra 4K", category: "Video", price: 329, stock: 41, status: "In Stock" },
260  { id: 26, product: "Herman Miller Aeron Ergonomic", category: "Furniture", price: 1695, stock: 12, status: "Low Stock" },
261  { id: 27, product: "Steelcase Leap V2 Office Chair", category: "Furniture", price: 1299, stock: 15, status: "In Stock" },
262  { id: 28, product: "Autonomous SmartDesk Pro", category: "Furniture", price: 899, stock: 28, status: "In Stock" },
263  { id: 29, product: "Uplift V2 Standing Desk Frame", category: "Furniture", price: 749, stock: 34, status: "In Stock" },
264  { id: 30, product: "FlexiSpot E7 Plus Adjustable", category: "Furniture", price: 649, stock: 45, status: "In Stock" },
265  { id: 31, product: "Anker PowerCore 20000mAh", category: "Power", price: 49, stock: 412, status: "In Stock" },
266  { id: 32, product: "RAVPower 60W USB-C Charger", category: "Power", price: 39, stock: 387, status: "In Stock" },
267  { id: 33, product: "Belkin BoostCharge Pro 3-in-1", category: "Power", price: 149, stock: 156, status: "In Stock" },
268  { id: 34, product: "Samsung T7 Shield 2TB SSD", category: "Storage", price: 199, stock: 234, status: "In Stock" },
269  { id: 35, product: "SanDisk Extreme Pro 1TB Portable", category: "Storage", price: 159, stock: 189, status: "In Stock" },
270  { id: 36, product: "WD My Passport 5TB External", category: "Storage", price: 139, stock: 276, status: "In Stock" },
271  { id: 37, product: "Crucial X9 Pro 4TB Rugged", category: "Storage", price: 289, stock: 143, status: "In Stock" },
272  { id: 38, product: "CalDigit TS4 Thunderbolt 4 Dock", category: "Hubs & Docks", price: 399, stock: 52, status: "In Stock" },
273  { id: 39, product: "Anker 577 Thunderbolt Docking", category: "Hubs & Docks", price: 299, stock: 78, status: "In Stock" },
274  { id: 40, product: "HyperDrive Gen2 16-Port USB-C", category: "Hubs & Docks", price: 249, stock: 91, status: "In Stock" },
275  { id: 41, product: "Blue Yeti X Professional USB", category: "Audio", price: 169, stock: 123, status: "In Stock" },
276  { id: 42, product: "Shure MV7 Podcast Microphone", category: "Audio", price: 249, stock: 87, status: "In Stock" },
277  { id: 43, product: "Elgato Wave:3 Premium USB", category: "Audio", price: 159, stock: 104, status: "In Stock" },
278  { id: 44, product: "Rode NT-USB Mini Studio", category: "Audio", price: 99, stock: 167, status: "In Stock" },
279  { id: 45, product: "Audio-Technica AT2020USB+", category: "Audio", price: 149, stock: 145, status: "In Stock" },
280];
281
282export const footerRendererConfig = {
283  headers: footerRendererHeaders,
284  rows: footerRendererData,
285  tableProps: {
286    shouldPaginate: true,
287    rowsPerPage: 10,
288  },
289} as const;
290

1<script lang="ts">
2  import { get } from "svelte/store";
3  import type { FooterRendererProps, Theme } from "@simple-table/svelte";
4  import { footerDemoTheme } from "./footer-demo-theme";
5
6  let fp: FooterRendererProps = $props();
7
8  function getFooterColors(t?: Theme) {
9    switch (t) {
10      case "modern-dark":
11      case "dark":
12        return {
13          background: "#1f2937",
14          border: "#374151",
15          text: "#d1d5db",
16          buttonBg: "#374151",
17          buttonBorder: "#4b5563",
18          buttonActive: "#3b82f6",
19          buttonDisabled: "#6b7280",
20        };
21      case "light":
22      case "modern-light":
23        return {
24          background: "white",
25          border: "#f3f4f6",
26          text: "#6b7280",
27          buttonBg: "white",
28          buttonBorder: "#e5e7eb",
29          buttonActive: "#3b82f6",
30          buttonDisabled: "#d1d5db",
31        };
32      default:
33        return {
34          background: "#f8fafc",
35          border: "#e2e8f0",
36          text: "#475569",
37          buttonBg: "white",
38          buttonBorder: "#e2e8f0",
39          buttonActive: "#3b82f6",
40          buttonDisabled: "#cbd5e1",
41        };
42    }
43  }
44
45  let c = $state(getFooterColors(get(footerDemoTheme)));
46  $effect(() => {
47    c = getFooterColors($footerDemoTheme);
48  });
49
50  function btnStyle(disabled: boolean, active = false): string {
51    const color = active ? "white" : disabled ? c.buttonDisabled : c.buttonActive;
52    const bg = active ? c.buttonActive : c.buttonBg;
53    return [
54      `padding:8px 16px`,
55      `font-size:14px`,
56      `font-weight:500`,
57      `color:${color}`,
58      `background-color:${bg}`,
59      `border:1px solid ${c.buttonBorder}`,
60      `border-radius:6px`,
61      `cursor:${disabled ? "not-allowed" : "pointer"}`,
62      `transition:all 0.2s`,
63      `min-width:40px`,
64    ].join(";");
65  }
66</script>
67
68<div
69  style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background-color:{c.background};border-top:2px solid {c.border};"
70>
71  <span style="font-size:14px;font-weight:600;color:{c.text};">
72    Showing {fp.startRow}–{fp.endRow} of {fp.totalRows} items
73  </span>
74  <div style="display:flex;align-items:center;gap:8px;">
75    <button type="button" style={btnStyle(!fp.hasPrevPage)} disabled={!fp.hasPrevPage} onclick={() => fp.onPrevPage()}>
76      Previous
77    </button>
78    <div style="display:flex;gap:4px;">
79      {#each Array.from({ length: fp.totalPages }, (_, i) => i + 1) as page (page)}
80        <button
81          type="button"
82          style="{btnStyle(false, page === fp.currentPage)};padding:8px 12px;"
83          onclick={() => fp.onPageChange(page)}
84        >
85          {page}
86        </button>
87      {/each}
88    </div>
89    <button
90      type="button"
91      style={btnStyle(!fp.hasNextPage)}
92      disabled={!fp.hasNextPage}
93      onclick={() => void fp.onNextPage()}
94    >
95      Next
96    </button>
97  </div>
98</div>
99
100
101// FooterRendererDemo.svelte
102<script lang="ts">
103  import { SimpleTable } from "@simple-table/svelte";
104  import type { Theme } from "@simple-table/svelte";
105  import { footerRendererConfig } from "./footer-renderer.demo-data";
106  import { footerDemoTheme } from "./footer-demo-theme";
107  import FooterDemoBar from "./FooterDemoBar.svelte";
108  import "@simple-table/svelte/styles.css";
109
110  let { height = "400px", theme }: { height?: string | number; theme?: Theme } = $props();
111
112  $effect.pre(() => {
113    footerDemoTheme.set(theme);
114  });
115</script>
116
117<SimpleTable
118  defaultHeaders={footerRendererConfig.headers}
119  rows={footerRendererConfig.rows}
120  footerRenderer={FooterDemoBar}
121  shouldPaginate={true}
122  rowsPerPage={10}
123  hideFooter={false}
124  {height}
125  {theme}
126/>
127