Documentation

Nested Headers

Nested headers allow you to create hierarchical column structures by grouping related columns under a parent header, making complex data more organized and easier to understand.

React TSX

Copy

1import {SimpleTable} from "@simple-table/react";import type { Theme } from "@simple-table/react";
2import { nestedHeadersConfig } from "./nested-headers.demo-data";
3import "@simple-table/react/styles.css";
4
5const NestedHeadersDemo = ({
6  height = "400px",
7  theme,
8}: {
9  height?: string | number;
10  theme?: Theme;
11}) => {
12  return (
13    <SimpleTable
14      defaultHeaders={nestedHeadersConfig.headers}
15      rows={nestedHeadersConfig.rows}
16      height={height}
17      theme={theme}
18      columnResizing={nestedHeadersConfig.tableProps.columnResizing}
19    />
20  );
21};
22
23export default NestedHeadersDemo;

Vue SFC

Copy

1<template>
2  <SimpleTable
3    :default-headers="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>

Angularnested-headers-demo.component.ts

Copy

1import { Component, Input } from "@angular/core";
2import {SimpleTableComponent} from "@simple-table/angular";import type { AngularHeaderObject, 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      [defaultHeaders]="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: AngularHeaderObject[] = 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 { AngularHeaderObject } from "@simple-table/angular";
33
34
35export const nestedHeadersHeaders: AngularHeaderObject[] = [
36  { accessor: "id", label: "ID", width: 80, isSortable: true, type: "number" },
37  { accessor: "name", label: "Name", width: "1fr", isSortable: true, type: "string" },
38  {
39    accessor: "score",
40    label: "Test Scores",
41    width: 300,
42    isSortable: false,
43    type: "number",
44    children: [
45      { accessor: "mathScore", label: "Math", width: 100, isSortable: true, type: "number", align: "right" },
46      { accessor: "scienceScore", label: "Science", width: 100, isSortable: true, type: "number", align: "right" },
47      { accessor: "historyScore", label: "History", width: 100, isSortable: true, type: "number", align: "right" },
48    ],
49  },
50  { accessor: "grade", label: "Overall Grade", width: 120, isSortable: 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

Svelte

Copy

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  defaultHeaders={nestedHeadersConfig.headers}
11  rows={nestedHeadersConfig.rows}
12  {height}
13  {theme}
14  columnResizing={nestedHeadersConfig.tableProps.columnResizing}
15/>

Solid TSX

Copy

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      defaultHeaders={nestedHeadersConfig.headers}
9      rows={nestedHeadersConfig.rows}
10      height={props.height ?? "400px"}
11      theme={props.theme}
12      columnResizing={nestedHeadersConfig.tableProps.columnResizing}
13    />
14  );
15}

TypeScriptNestedHeadersDemo.ts

Copy

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    defaultHeaders: 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 { HeaderObject } from "simple-table-core";
24
25
26export const nestedHeadersHeaders: HeaderObject[] = [
27  { accessor: "id", label: "ID", width: 80, isSortable: true, type: "number" },
28  { accessor: "name", label: "Name", width: "1fr", isSortable: true, type: "string" },
29  {
30    accessor: "score",
31    label: "Test Scores",
32    width: 300,
33    isSortable: false,
34    type: "number",
35    children: [
36      { accessor: "mathScore", label: "Math", width: 100, isSortable: true, type: "number", align: "right" },
37      { accessor: "scienceScore", label: "Science", width: 100, isSortable: true, type: "number", align: "right" },
38      { accessor: "historyScore", label: "History", width: 100, isSortable: true, type: "number", align: "right" },
39    ],
40  },
41  { accessor: "grade", label: "Overall Grade", width: 120, isSortable: 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

StackBlitz

Implementation

To create nested headers, add a children array to your parent header object, containing the child column definitions:

Nested Headers Configuration

Property	Required	Description	Example
Property	Required	Description	Example
`HeaderObject.children` HeaderObject[]	Optional	Array of child column definitions that will be grouped under this parent header. Creates a hierarchical column structure.

Key Points About Nested Headers

Parent headers serve as container columns and typically don't display cell data
Child columns can have all the same properties as regular columns (sorting, filtering, custom renderers, etc.)
You can have multiple levels of nesting by adding children to child columns
Width of the parent column will automatically adjust to fit all child columns

Common Use Cases

Grouped Data Categories: Organize related columns like "Personal Information", "Contact Details", etc.
Time-based Data: Group columns by time periods (Q1, Q2, Q3, Q4) with child columns for specific metrics
Financial Reports: Group columns for "Revenue", "Expenses", "Profit" with subcategories
Test Scores: As shown in the example, group different subject scores under a single parent