Themes

1<template>
2  <div>
3    <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px">
4      <button
5        v-for="t in AVAILABLE_THEMES"
6        :key="t.value"
7        @click="selectedTheme = t.value"
8        :style="{
9          padding: '6px 14px',
10          borderRadius: '6px',
11          border: selectedTheme === t.value ? '2px solid #3b82f6' : '1px solid #d1d5db',
12          background: selectedTheme === t.value ? '#eff6ff' : '#fff',
13          color: selectedTheme === t.value ? '#1d4ed8' : '#374151',
14          fontWeight: selectedTheme === t.value ? 600 : 400,
15          cursor: 'pointer',
16          fontSize: '13px',
17        }"
18      >
19        {{ t.label }}
20      </button>
21    </div>
22    <SimpleTable
23      :columns="themesConfig.headers"
24      :rows="themesConfig.rows"
25      :height="height"
26      :theme="selectedTheme"
27    />
28  </div>
29</template>
30
31<script setup lang="ts">
32import { ref } from "vue";
33import {SimpleTable} from "@simple-table/vue";import type { Theme } from "@simple-table/vue";
34import { themesConfig, AVAILABLE_THEMES } from "./themes.demo-data";
35import "@simple-table/vue/styles.css";
36
37const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
38  height: "400px",
39});
40
41const selectedTheme = ref<Theme>(props.theme ?? "light");
42</script>

1import { Component, Input } from "@angular/core";
2import { NgFor } from "@angular/common";
3import {SimpleTableComponent} from "@simple-table/angular";import type { AngularColumnDef, Row, Theme } from "@simple-table/angular";
4import { themesConfig, AVAILABLE_THEMES } from "./themes.demo-data";
5import "@simple-table/angular/styles.css";
6
7@Component({
8  selector: "themes-demo",
9  standalone: true,
10  imports: [SimpleTableComponent, NgFor],
11  template: `
12    <div>
13      <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px">
14        <button
15          *ngFor="let t of themes"
16          (click)="selectedTheme = t.value"
17          [style.padding]="'6px 14px'"
18          [style.borderRadius]="'6px'"
19          [style.border]="selectedTheme === t.value ? '2px solid #3b82f6' : '1px solid #d1d5db'"
20          [style.background]="selectedTheme === t.value ? '#eff6ff' : '#fff'"
21          [style.color]="selectedTheme === t.value ? '#1d4ed8' : '#374151'"
22          [style.fontWeight]="selectedTheme === t.value ? 600 : 400"
23          [style.cursor]="'pointer'"
24          [style.fontSize]="'13px'"
25        >
26          {{ t.label }}
27        </button>
28      </div>
29      <simple-table
30        [rows]="rows"
31        [columns]="headers"
32        [height]="height"
33        [theme]="selectedTheme"
34      ></simple-table>
35    </div>
36  `,
37})
38export class ThemesDemoComponent {
39  @Input() height: string | number = "400px";
40  @Input() theme?: Theme;
41
42  readonly rows: Row[] = themesConfig.rows;
43  readonly headers: AngularColumnDef[] = themesConfig.headers;
44  readonly themes = AVAILABLE_THEMES;
45  selectedTheme: Theme = "light";
46
47  ngOnInit() {
48    if (this.theme) this.selectedTheme = this.theme;
49  }
50}
51
52
53// themes.demo-data.ts
54// Self-contained demo table setup for this example.
55import type { AngularColumnDef, Theme } from "@simple-table/angular";
56
57
58export const AVAILABLE_THEMES: { value: Theme; label: string }[] = [
59  { value: "light", label: "Light" },
60  { value: "dark", label: "Dark" },
61  { value: "modern-light", label: "Modern Light" },
62  { value: "modern-dark", label: "Modern Dark" },
63  { value: "neutral", label: "Neutral" },
64];
65
66export const themesHeaders: AngularColumnDef[] = [
67  { accessor: "id", label: "ID", width: 80, type: "number" },
68  { accessor: "name", label: "Name", minWidth: 100, width: "1fr", type: "string" },
69  { accessor: "email", label: "Email", width: 220, type: "string" },
70  { accessor: "department", label: "Department", width: 150, type: "string" },
71  { accessor: "status", label: "Status", width: 120, type: "string" },
72];
73
74export const themesData = [
75  { id: 1, name: "Dr. Sarah Mitchell", email: "s.mitchell@cityhospital.org", department: "Cardiology", status: "Active" },
76  { id: 2, name: "Nurse Emily Chen", email: "e.chen@cityhospital.org", department: "Emergency", status: "Active" },
77  { id: 3, name: "Dr. Marcus Williams", email: "m.williams@cityhospital.org", department: "Neurology", status: "Active" },
78  { id: 4, name: "Therapist Ana Rodriguez", email: "a.rodriguez@cityhospital.org", department: "Physical Therapy", status: "Active" },
79  { id: 5, name: "Dr. Yuki Tanaka", email: "y.tanaka@cityhospital.org", department: "Pediatrics", status: "On Call" },
80  { id: 6, name: "Technician Omar Hassan", email: "o.hassan@cityhospital.org", department: "Radiology", status: "Active" },
81  { id: 7, name: "Dr. Priya Patel", email: "p.patel@cityhospital.org", department: "Oncology", status: "Active" },
82  { id: 8, name: "Coordinator Lisa Kim", email: "l.kim@cityhospital.org", department: "Patient Care", status: "Active" },
83  { id: 9, name: "Dr. Giovanni Rossi", email: "g.rossi@cityhospital.org", department: "Surgery", status: "Active" },
84  { id: 10, name: "Pharmacist David Lee", email: "d.lee@cityhospital.org", department: "Pharmacy", status: "Active" },
85  { id: 11, name: "Nurse Zara Singh", email: "z.singh@cityhospital.org", department: "ICU", status: "Active" },
86  { id: 12, name: "Dr. Felix Martinez", email: "f.martinez@cityhospital.org", department: "Orthopedics", status: "Active" },
87];
88
89export const themesConfig = {
90  headers: themesHeaders,
91  rows: themesData,
92} as const;
93

1<script lang="ts">
2  import {SimpleTable} from "@simple-table/svelte";  import type { Theme } from "@simple-table/svelte";
3  import { themesConfig, AVAILABLE_THEMES } from "./themes.demo-data";
4  import "@simple-table/svelte/styles.css";
5
6  let { height = "400px", theme }: { height?: string | number; theme?: Theme } = $props();
7  let userThemePick = $state<Theme | undefined>(undefined);
8  const selectedTheme: Theme = $derived(userThemePick ?? theme ?? "light");
9</script>
10
11<div>
12  <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px">
13    {#each AVAILABLE_THEMES as t}
14      <button
15        onclick={() => (userThemePick = t.value)}
16        style="padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; border: {selectedTheme === t.value ? '2px solid #3b82f6' : '1px solid #d1d5db'}; background: {selectedTheme === t.value ? '#eff6ff' : '#fff'}; color: {selectedTheme === t.value ? '#1d4ed8' : '#374151'}; font-weight: {selectedTheme === t.value ? 600 : 400}"
17      >
18        {t.label}
19      </button>
20    {/each}
21  </div>
22  <SimpleTable
23    columns={themesConfig.headers}
24    rows={themesConfig.rows}
25    {height}
26    theme={selectedTheme}
27  />
28</div>

1import { createSignal, For } from "solid-js";
2import {SimpleTable} from "@simple-table/solid";import type { Theme } from "@simple-table/solid";
3import { themesConfig, AVAILABLE_THEMES } from "./themes.demo-data";
4import "@simple-table/solid/styles.css";
5
6export default function ThemesDemo(props: { height?: string | number; theme?: Theme }) {
7  const [selectedTheme, setSelectedTheme] = createSignal<Theme>(props.theme ?? "light");
8
9  return (
10    <div>
11      <div style={{ display: "flex", "flex-wrap": "wrap", gap: "8px", "margin-bottom": "12px" }}>
12        <For each={AVAILABLE_THEMES}>
13          {(t) => (
14            <button
15              onClick={() => setSelectedTheme(t.value)}
16              style={{
17                padding: "6px 14px",
18                "border-radius": "6px",
19                border: selectedTheme() === t.value ? "2px solid #3b82f6" : "1px solid #d1d5db",
20                background: selectedTheme() === t.value ? "#eff6ff" : "#fff",
21                color: selectedTheme() === t.value ? "#1d4ed8" : "#374151",
22                "font-weight": selectedTheme() === t.value ? 600 : 400,
23                cursor: "pointer",
24                "font-size": "13px",
25              }}
26            >
27              {t.label}
28            </button>
29          )}
30        </For>
31      </div>
32      <SimpleTable
33        columns={themesConfig.headers}
34        rows={themesConfig.rows}
35        height={props.height ?? "400px"}
36        theme={selectedTheme()}
37      />
38    </div>
39  );
40}

1import { SimpleTableVanilla } from "simple-table-core";
2import type { Theme } from "simple-table-core";
3import { themesConfig, AVAILABLE_THEMES } from "./themes.demo-data";
4import "simple-table-core/styles.css";
5
6export function renderThemesDemo(
7  container: HTMLElement,
8  options?: { height?: string | number; theme?: Theme }
9): SimpleTableVanilla {
10  let selectedTheme: Theme = options?.theme ?? "light";
11
12  const wrapper = document.createElement("div");
13
14  const buttonRow = document.createElement("div");
15  buttonRow.style.cssText = "display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px";
16
17  const tableContainer = document.createElement("div");
18  wrapper.appendChild(buttonRow);
19  wrapper.appendChild(tableContainer);
20  container.appendChild(wrapper);
21
22  const table = new SimpleTableVanilla(tableContainer, {
23    columns: themesConfig.headers,
24    rows: themesConfig.rows,
25    height: options?.height ?? "400px",
26    theme: selectedTheme,
27  });
28
29  function renderButtons() {
30    buttonRow.innerHTML = "";
31    for (const t of AVAILABLE_THEMES) {
32      const btn = document.createElement("button");
33      btn.textContent = t.label;
34      const active = selectedTheme === t.value;
35      btn.style.cssText = `padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px;border:${active ? "2px solid #3b82f6" : "1px solid #d1d5db"};background:${active ? "#eff6ff" : "#fff"};color:${active ? "#1d4ed8" : "#374151"};font-weight:${active ? 600 : 400}`;
36      btn.addEventListener("click", () => {
37        selectedTheme = t.value;
38        table.update({ theme: selectedTheme });
39        renderButtons();
40      });
41      buttonRow.appendChild(btn);
42    }
43  }
44
45  renderButtons();
46  return table;
47}
48
49
50// themes.demo-data.ts
51// Self-contained demo table setup for this example.
52import type { ColumnDef, Theme } from "simple-table-core";
53
54
55export const AVAILABLE_THEMES: { value: Theme; label: string }[] = [
56  { value: "light", label: "Light" },
57  { value: "dark", label: "Dark" },
58  { value: "modern-light", label: "Modern Light" },
59  { value: "modern-dark", label: "Modern Dark" },
60  { value: "neutral", label: "Neutral" },
61];
62
63export const themesHeaders: ColumnDef[] = [
64  { accessor: "id", label: "ID", width: 80, type: "number" },
65  { accessor: "name", label: "Name", minWidth: 100, width: "1fr", type: "string" },
66  { accessor: "email", label: "Email", width: 220, type: "string" },
67  { accessor: "department", label: "Department", width: 150, type: "string" },
68  { accessor: "status", label: "Status", width: 120, type: "string" },
69];
70
71export const themesData = [
72  { id: 1, name: "Dr. Sarah Mitchell", email: "s.mitchell@cityhospital.org", department: "Cardiology", status: "Active" },
73  { id: 2, name: "Nurse Emily Chen", email: "e.chen@cityhospital.org", department: "Emergency", status: "Active" },
74  { id: 3, name: "Dr. Marcus Williams", email: "m.williams@cityhospital.org", department: "Neurology", status: "Active" },
75  { id: 4, name: "Therapist Ana Rodriguez", email: "a.rodriguez@cityhospital.org", department: "Physical Therapy", status: "Active" },
76  { id: 5, name: "Dr. Yuki Tanaka", email: "y.tanaka@cityhospital.org", department: "Pediatrics", status: "On Call" },
77  { id: 6, name: "Technician Omar Hassan", email: "o.hassan@cityhospital.org", department: "Radiology", status: "Active" },
78  { id: 7, name: "Dr. Priya Patel", email: "p.patel@cityhospital.org", department: "Oncology", status: "Active" },
79  { id: 8, name: "Coordinator Lisa Kim", email: "l.kim@cityhospital.org", department: "Patient Care", status: "Active" },
80  { id: 9, name: "Dr. Giovanni Rossi", email: "g.rossi@cityhospital.org", department: "Surgery", status: "Active" },
81  { id: 10, name: "Pharmacist David Lee", email: "d.lee@cityhospital.org", department: "Pharmacy", status: "Active" },
82  { id: 11, name: "Nurse Zara Singh", email: "z.singh@cityhospital.org", department: "ICU", status: "Active" },
83  { id: 12, name: "Dr. Felix Martinez", email: "f.martinez@cityhospital.org", department: "Orthopedics", status: "Active" },
84];
85
86export const themesConfig = {
87  headers: themesHeaders,
88  rows: themesData,
89} as const;
90