Nested Headers

1<template>
2  <SimpleTable
3    :columns="nestedHeadersConfig.headers"
4    :rows="nestedHeadersConfig.rows"
5    :height="height"
6    :theme="theme"
7    :column-resizing="nestedHeadersConfig.tableProps.columnResizing"
8  />
9</template>
10
11<script setup lang="ts">
12import {SimpleTable} from "@simple-table/vue";import type { Theme } from "@simple-table/vue";
13import { nestedHeadersConfig } from "./nested-headers.demo-data";
14import "@simple-table/vue/styles.css";
15
16withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
17  height: "400px",
18});
19</script>

1import { Component, Input } from "@angular/core";
2import {SimpleTableComponent} from "@simple-table/angular";import type { AngularColumnDef, Row, Theme } from "@simple-table/angular";
3import { nestedHeadersConfig } from "./nested-headers.demo-data";
4import "@simple-table/angular/styles.css";
5
6@Component({
7  selector: "nested-headers-demo",
8  standalone: true,
9  imports: [SimpleTableComponent],
10  template: `
11    <simple-table
12      [rows]="rows"
13      [columns]="headers"
14      [height]="height"
15      [theme]="theme"
16      [columnResizing]="columnResizing"
17    ></simple-table>
18  `,
19})
20export class NestedHeadersDemoComponent {
21  @Input() height: string | number = "400px";
22  @Input() theme?: Theme;
23
24  readonly rows: Row[] = nestedHeadersConfig.rows;
25  readonly headers: AngularColumnDef[] = nestedHeadersConfig.headers;
26  readonly columnResizing = nestedHeadersConfig.tableProps.columnResizing;
27}
28
29
30// nested-headers.demo-data.ts
31// Self-contained demo table setup for this example.
32import type { AngularColumnDef } from "@simple-table/angular";
33
34
35export const nestedHeadersHeaders: AngularColumnDef[] = [
36  { accessor: "id", label: "ID", width: 80, sortable: true, type: "number" },
37  { accessor: "name", label: "Name", width: "1fr", sortable: true, type: "string" },
38  {
39    accessor: "score",
40    label: "Test Scores",
41    width: 300,
42    sortable: false,
43    type: "number",
44    children: [
45      { accessor: "mathScore", label: "Math", width: 100, sortable: true, type: "number", align: "right" },
46      { accessor: "scienceScore", label: "Science", width: 100, sortable: true, type: "number", align: "right" },
47      { accessor: "historyScore", label: "History", width: 100, sortable: true, type: "number", align: "right" },
48    ],
49  },
50  { accessor: "grade", label: "Overall Grade", width: 120, sortable: true, type: "string", align: "center" },
51];
52
53export const nestedHeadersData = [
54  { id: 1, name: "Aria Chen", mathScore: 94, scienceScore: 89, historyScore: 92, grade: "A" },
55  { id: 2, name: "Kai Rodriguez", mathScore: 81, scienceScore: 85, historyScore: 78, grade: "B" },
56  { id: 3, name: "Luna Nakamura", mathScore: 96, scienceScore: 94, historyScore: 93, grade: "A" },
57  { id: 4, name: "Phoenix Williams", mathScore: 72, scienceScore: 75, historyScore: 69, grade: "C" },
58  { id: 5, name: "River Martinez", mathScore: 87, scienceScore: 91, historyScore: 83, grade: "B" },
59  { id: 6, name: "Sage Thompson", mathScore: 79, scienceScore: 74, historyScore: 82, grade: "B" },
60  { id: 7, name: "Nova Patel", mathScore: 93, scienceScore: 88, historyScore: 95, grade: "A" },
61  { id: 8, name: "Atlas Kim", mathScore: 86, scienceScore: 82, historyScore: 89, grade: "B" },
62  { id: 9, name: "Zara Hassan", mathScore: 91, scienceScore: 97, historyScore: 87, grade: "A" },
63  { id: 10, name: "Orion Singh", mathScore: 77, scienceScore: 73, historyScore: 80, grade: "B" },
64  { id: 11, name: "Echo Volkov", mathScore: 95, scienceScore: 92, historyScore: 98, grade: "A" },
65];
66
67export const nestedHeadersConfig = {
68  headers: nestedHeadersHeaders,
69  rows: nestedHeadersData,
70  tableProps: { columnResizing: true },
71} as const;
72

1<script lang="ts">
2  import {SimpleTable} from "@simple-table/svelte";  import type { Theme } from "@simple-table/svelte";
3  import { nestedHeadersConfig } from "./nested-headers.demo-data";
4  import "@simple-table/svelte/styles.css";
5
6  let { height = "400px", theme }: { height?: string | number; theme?: Theme } = $props();
7</script>
8
9<SimpleTable
10  columns={nestedHeadersConfig.headers}
11  rows={nestedHeadersConfig.rows}
12  {height}
13  {theme}
14  columnResizing={nestedHeadersConfig.tableProps.columnResizing}
15/>

1import {SimpleTable} from "@simple-table/solid";import type { Theme } from "@simple-table/solid";
2import { nestedHeadersConfig } from "./nested-headers.demo-data";
3import "@simple-table/solid/styles.css";
4
5export default function NestedHeadersDemo(props: { height?: string | number; theme?: Theme }) {
6  return (
7    <SimpleTable
8      columns={nestedHeadersConfig.headers}
9      rows={nestedHeadersConfig.rows}
10      height={props.height ?? "400px"}
11      theme={props.theme}
12      columnResizing={nestedHeadersConfig.tableProps.columnResizing}
13    />
14  );
15}

1import { SimpleTableVanilla } from "simple-table-core";
2import type { Theme } from "simple-table-core";
3import { nestedHeadersConfig } from "./nested-headers.demo-data";
4import "simple-table-core/styles.css";
5
6export function renderNestedHeadersDemo(
7  container: HTMLElement,
8  options?: { height?: string | number; theme?: Theme }
9): SimpleTableVanilla {
10  const table = new SimpleTableVanilla(container, {
11    columns: nestedHeadersConfig.headers,
12    rows: nestedHeadersConfig.rows,
13    height: options?.height ?? "400px",
14    theme: options?.theme,
15    columnResizing: nestedHeadersConfig.tableProps.columnResizing,
16  });
17  return table;
18}
19
20
21// nested-headers.demo-data.ts
22// Self-contained demo table setup for this example.
23import type { ColumnDef } from "simple-table-core";
24
25
26export const nestedHeadersHeaders: ColumnDef[] = [
27  { accessor: "id", label: "ID", width: 80, sortable: true, type: "number" },
28  { accessor: "name", label: "Name", width: "1fr", sortable: true, type: "string" },
29  {
30    accessor: "score",
31    label: "Test Scores",
32    width: 300,
33    sortable: false,
34    type: "number",
35    children: [
36      { accessor: "mathScore", label: "Math", width: 100, sortable: true, type: "number", align: "right" },
37      { accessor: "scienceScore", label: "Science", width: 100, sortable: true, type: "number", align: "right" },
38      { accessor: "historyScore", label: "History", width: 100, sortable: true, type: "number", align: "right" },
39    ],
40  },
41  { accessor: "grade", label: "Overall Grade", width: 120, sortable: true, type: "string", align: "center" },
42];
43
44export const nestedHeadersData = [
45  { id: 1, name: "Aria Chen", mathScore: 94, scienceScore: 89, historyScore: 92, grade: "A" },
46  { id: 2, name: "Kai Rodriguez", mathScore: 81, scienceScore: 85, historyScore: 78, grade: "B" },
47  { id: 3, name: "Luna Nakamura", mathScore: 96, scienceScore: 94, historyScore: 93, grade: "A" },
48  { id: 4, name: "Phoenix Williams", mathScore: 72, scienceScore: 75, historyScore: 69, grade: "C" },
49  { id: 5, name: "River Martinez", mathScore: 87, scienceScore: 91, historyScore: 83, grade: "B" },
50  { id: 6, name: "Sage Thompson", mathScore: 79, scienceScore: 74, historyScore: 82, grade: "B" },
51  { id: 7, name: "Nova Patel", mathScore: 93, scienceScore: 88, historyScore: 95, grade: "A" },
52  { id: 8, name: "Atlas Kim", mathScore: 86, scienceScore: 82, historyScore: 89, grade: "B" },
53  { id: 9, name: "Zara Hassan", mathScore: 91, scienceScore: 97, historyScore: 87, grade: "A" },
54  { id: 10, name: "Orion Singh", mathScore: 77, scienceScore: 73, historyScore: 80, grade: "B" },
55  { id: 11, name: "Echo Volkov", mathScore: 95, scienceScore: 92, historyScore: 98, grade: "A" },
56];
57
58export const nestedHeadersConfig = {
59  headers: nestedHeadersHeaders,
60  rows: nestedHeadersData,
61  tableProps: { columnResizing: true },
62} as const;
63