Documentation

Collapsible Columns

Hide and show column groups to save space — click the header arrow to collapse or expand.

Enable collapsible groups

Set collapsible: true on a parent with children. Users click the header arrow to hide or show the group.

TypeScript

Copy

{
  accessor: "sales",
  label: "Sales",
  collapsible: true,
  children: [
    { accessor: "q1", label: "Q1", width: 90, type: "number" },
    { accessor: "q2", label: "Q2", width: 90, type: "number" },
    { accessor: "q3", label: "Q3", width: 90, type: "number" },
    { accessor: "q4", label: "Q4", width: 90, type: "number" },
  ],
}

Start collapsed

Use collapseDefault so the group loads collapsed — useful when details should stay optional.

TypeScript

Copy

{
  accessor: "details",
  label: "Details",
  collapsible: true,
  collapseDefault: true,
  children: [
    { accessor: "note", label: "Note", width: 160 },
    { accessor: "owner", label: "Owner", width: 120 },
  ],
}

Control child visibility

Use showWhen on child columns: parentExpanded (default), parentCollapsed, or always. Common pattern: summary when collapsed, detail when expanded.

TypeScript

Copy

{
  accessor: "sales",
  label: "Sales",
  collapsible: true,
  children: [
    { accessor: "total", label: "Total", showWhen: "parentCollapsed" },
    { accessor: "q1", label: "Q1", showWhen: "parentExpanded" },
    { accessor: "q2", label: "Q2", showWhen: "parentExpanded" },
  ],
}

Single-row children

Set singleRowChildren: true so the parent header sits beside its children (same row) instead of above them — the parent acts like a column that collapses its neighbors.

TypeScript

Copy

{
  accessor: "personalInfo",
  label: "Personal Info",
  collapsible: true,
  singleRowChildren: true,
  children: [
    { accessor: "firstName", label: "First Name", width: 120 },
    { accessor: "lastName", label: "Last Name", width: 120 },
    { accessor: "email", label: "Email", width: 200 },
  ],
}

Example

React TSX

Copy

1import { SimpleTable } from "@simple-table/react";
2import type { Theme } from "@simple-table/react";
3import {
4  collapsibleColumnsConfig,
5  type CollapsibleSalesRep
6} from "./collapsible-columns.demo-data";
7import "@simple-table/react/styles.css";
8
9const CollapsibleColumnsDemo = ({
10  height = "400px",
11  theme
12}: {
13  height?: string | number;
14  theme?: Theme;
15}) => {
16  return (
17    <SimpleTable
18      columns={collapsibleColumnsConfig.headers}
19      getRowId={({ row }) => row.id}
20      rows={collapsibleColumnsConfig.rows}
21      columnResizing
22      enableColumnEditor
23      selectableCells
24      columnReordering
25      height={height}
26      theme={theme}
27    />
28  );
29};
30
31export default CollapsibleColumnsDemo;

Angularcollapsible-columns-demo.component.ts

Copy

1import { Component, Input } from "@angular/core";
2import {SimpleTableComponent} from "@simple-table/angular";import type { AngularColumnDef, GetRowIdParams, Theme } from "@simple-table/angular";
3import { collapsibleColumnsConfig } from "./collapsible-columns.demo-data";
4import "@simple-table/angular/styles.css";
5import type { CollapsibleSalesRep } from "./collapsible-columns.demo-data";
6
7@Component({
8  selector: "collapsible-columns-demo",
9  standalone: true,
10  imports: [SimpleTableComponent],
11  template: `
12    <simple-table
13      [getRowId]="getRowId"
14      [rows]="rows"
15      [columns]="headers"
16      [columnResizing]="true"
17      [enableColumnEditor]="true"
18      [selectableCells]="true"
19      [columnReordering]="true"
20      [height]="height"
21      [theme]="theme"
22    ></simple-table>
23  `,
24})
25export class CollapsibleColumnsDemoComponent {
26  @Input() height: string | number = "400px";
27  @Input() theme?: Theme;
28
29  readonly rows: CollapsibleSalesRep[] = collapsibleColumnsConfig.rows;
30  readonly headers: AngularColumnDef<CollapsibleSalesRep>[] = collapsibleColumnsConfig.headers;
31
32  getRowId = ({ row }: GetRowIdParams<CollapsibleSalesRep>) => row.id;
33}
34
35
36// collapsible-columns.demo-data.ts
37// Self-contained demo table setup for this example.
38import type { CellRenderer, AngularColumnDef } from "@simple-table/angular";
39
40export interface CollapsibleSalesRep {
41  id: number;
42  name: string;
43  region: string;
44  q1Sales: number;
45  q2Sales: number;
46  q3Sales: number;
47  q4Sales: number;
48  totalSales: number;
49  avgQuarterly: number;
50  jan: number;
51  feb: number;
52  mar: number;
53  apr: number;
54  may: number;
55  jun: number;
56  jul: number;
57  aug: number;
58  sep: number;
59  oct: number;
60  nov: number;
61  dec: number;
62  avgMonthly: number;
63  bestMonth: number;
64  softwareSales: number;
65  hardwareSales: number;
66  servicesSales: number;
67  topCategory: string;
68  categoryCount: number;
69}
70
71export const collapsibleColumnsData: CollapsibleSalesRep[] = [
72  { id: 1, name: "Alice Thompson", region: "North America", q1Sales: 245000, q2Sales: 289000, q3Sales: 312000, q4Sales: 298000, totalSales: 1144000, avgQuarterly: 286000, jan: 78000, feb: 82000, mar: 85000, apr: 89000, may: 95000, jun: 105000, jul: 98000, aug: 102000, sep: 112000, oct: 108000, nov: 95000, dec: 95000, avgMonthly: 95333, bestMonth: 112000, softwareSales: 456000, hardwareSales: 342000, servicesSales: 346000, topCategory: "Software", categoryCount: 3 },
73  { id: 2, name: "Marcus Chen", region: "Asia Pacific", q1Sales: 189000, q2Sales: 234000, q3Sales: 287000, q4Sales: 276000, totalSales: 986000, avgQuarterly: 246500, jan: 58000, feb: 62000, mar: 69000, apr: 72000, may: 78000, jun: 84000, jul: 89000, aug: 95000, sep: 103000, oct: 98000, nov: 89000, dec: 89000, avgMonthly: 82166, bestMonth: 103000, softwareSales: 398000, hardwareSales: 298000, servicesSales: 290000, topCategory: "Software", categoryCount: 3 },
74  { id: 3, name: "Sofia Rodriguez", region: "Europe", q1Sales: 198000, q2Sales: 245000, q3Sales: 267000, q4Sales: 289000, totalSales: 999000, avgQuarterly: 249750, jan: 62000, feb: 66000, mar: 70000, apr: 78000, may: 82000, jun: 85000, jul: 85000, aug: 88000, sep: 94000, oct: 96000, nov: 97000, dec: 96000, avgMonthly: 83250, bestMonth: 97000, softwareSales: 389000, hardwareSales: 312000, servicesSales: 298000, topCategory: "Software", categoryCount: 3 },
75  { id: 4, name: "David Kim", region: "North America", q1Sales: 167000, q2Sales: 198000, q3Sales: 234000, q4Sales: 267000, totalSales: 866000, avgQuarterly: 216500, jan: 52000, feb: 55000, mar: 60000, apr: 63000, may: 66000, jun: 69000, jul: 75000, aug: 78000, sep: 81000, oct: 87000, nov: 89000, dec: 91000, avgMonthly: 72166, bestMonth: 91000, softwareSales: 346000, hardwareSales: 267000, servicesSales: 253000, topCategory: "Software", categoryCount: 3 },
76  { id: 5, name: "Emma Wilson", region: "Australia", q1Sales: 134000, q2Sales: 167000, q3Sales: 198000, q4Sales: 234000, totalSales: 733000, avgQuarterly: 183250, jan: 42000, feb: 45000, mar: 47000, apr: 52000, may: 55000, jun: 60000, jul: 63000, aug: 66000, sep: 69000, oct: 75000, nov: 78000, dec: 81000, avgMonthly: 61083, bestMonth: 81000, softwareSales: 293000, hardwareSales: 220000, servicesSales: 220000, topCategory: "Software", categoryCount: 3 },
77  { id: 6, name: "James Anderson", region: "South America", q1Sales: 156000, q2Sales: 178000, q3Sales: 201000, q4Sales: 223000, totalSales: 758000, avgQuarterly: 189500, jan: 48000, feb: 52000, mar: 56000, apr: 58000, may: 60000, jun: 60000, jul: 65000, aug: 67000, sep: 69000, oct: 72000, nov: 75000, dec: 76000, avgMonthly: 63166, bestMonth: 76000, softwareSales: 303000, hardwareSales: 227000, servicesSales: 228000, topCategory: "Software", categoryCount: 3 },
78  { id: 7, name: "Lisa Chang", region: "Asia Pacific", q1Sales: 145000, q2Sales: 178000, q3Sales: 201000, q4Sales: 234000, totalSales: 758000, avgQuarterly: 189500, jan: 45000, feb: 48000, mar: 52000, apr: 58000, may: 60000, jun: 60000, jul: 65000, aug: 67000, sep: 69000, oct: 75000, nov: 78000, dec: 81000, avgMonthly: 63166, bestMonth: 81000, softwareSales: 303000, hardwareSales: 227000, servicesSales: 228000, topCategory: "Software", categoryCount: 3 },
79  { id: 8, name: "Michael Brown", region: "Europe", q1Sales: 178000, q2Sales: 201000, q3Sales: 234000, q4Sales: 256000, totalSales: 869000, avgQuarterly: 217250, jan: 56000, feb: 60000, mar: 62000, apr: 65000, may: 67000, jun: 69000, jul: 75000, aug: 78000, sep: 81000, oct: 83000, nov: 86000, dec: 87000, avgMonthly: 72416, bestMonth: 87000, softwareSales: 347000, hardwareSales: 260000, servicesSales: 262000, topCategory: "Software", categoryCount: 3 },
80  { id: 9, name: "Sarah Johnson", region: "North America", q1Sales: 201000, q2Sales: 234000, q3Sales: 267000, q4Sales: 289000, totalSales: 991000, avgQuarterly: 247750, jan: 63000, feb: 67000, mar: 71000, apr: 75000, may: 78000, jun: 81000, jul: 85000, aug: 89000, sep: 93000, oct: 95000, nov: 97000, dec: 97000, avgMonthly: 82583, bestMonth: 97000, softwareSales: 396000, hardwareSales: 297000, servicesSales: 298000, topCategory: "Software", categoryCount: 3 },
81  { id: 10, name: "Robert Davis", region: "Australia", q1Sales: 123000, q2Sales: 145000, q3Sales: 167000, q4Sales: 189000, totalSales: 624000, avgQuarterly: 156000, jan: 38000, feb: 42000, mar: 43000, apr: 46000, may: 48000, jun: 51000, jul: 53000, aug: 56000, sep: 58000, oct: 60000, nov: 63000, dec: 66000, avgMonthly: 52000, bestMonth: 66000, softwareSales: 249000, hardwareSales: 187000, servicesSales: 188000, topCategory: "Software", categoryCount: 3 },
82  { id: 11, name: "Jennifer Martinez", region: "South America", q1Sales: 134000, q2Sales: 156000, q3Sales: 178000, q4Sales: 201000, totalSales: 669000, avgQuarterly: 167250, jan: 42000, feb: 45000, mar: 47000, apr: 50000, may: 52000, jun: 54000, jul: 57000, aug: 59000, sep: 62000, oct: 65000, nov: 67000, dec: 69000, avgMonthly: 55750, bestMonth: 69000, softwareSales: 267000, hardwareSales: 201000, servicesSales: 201000, topCategory: "Software", categoryCount: 3 },
83  { id: 12, name: "Christopher Lee", region: "Europe", q1Sales: 167000, q2Sales: 189000, q3Sales: 212000, q4Sales: 234000, totalSales: 802000, avgQuarterly: 200500, jan: 52000, feb: 55000, mar: 60000, apr: 61000, may: 63000, jun: 65000, jul: 68000, aug: 71000, sep: 73000, oct: 76000, nov: 78000, dec: 80000, avgMonthly: 66833, bestMonth: 80000, softwareSales: 320000, hardwareSales: 241000, servicesSales: 241000, topCategory: "Software", categoryCount: 3 },
84];
85
86const fmtCurrency: CellRenderer<CollapsibleSalesRep, number> = ({ value }) =>
87  `$${(value ?? 0).toLocaleString()}`;
88
89type MonthKey =
90  | "jan"
91  | "feb"
92  | "mar"
93  | "apr"
94  | "may"
95  | "jun"
96  | "jul"
97  | "aug"
98  | "sep"
99  | "oct"
100  | "nov"
101  | "dec";
102
103const monthCol = (
104  accessor: MonthKey,
105  label: string,
106): AngularColumnDef<CollapsibleSalesRep, number> => ({
107  accessor,
108  label,
109  width: 100,
110  showWhen: "parentExpanded",
111  sortable: true,
112  align: "right",
113  type: "number",
114  cellRenderer: fmtCurrency,
115});
116
117export const collapsibleColumnsHeaders: AngularColumnDef<CollapsibleSalesRep>[] = [
118  { accessor: "id", label: "ID", width: 60, sortable: true },
119  { accessor: "name", label: "Sales Rep", minWidth: 150, width: "1fr", sortable: true },
120  { accessor: "region", label: "Region", width: 140, sortable: true },
121  {
122    accessor: "quarterlySales",
123    label: "Quarterly Sales",
124    width: 500,
125    collapsible: true,
126    collapseDefault: true,
127    children: [
128      { accessor: "totalSales", label: "Total Sales", width: 140, showWhen: "parentCollapsed", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
129      { accessor: "q1Sales", label: "Q1", width: 120, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
130      { accessor: "q2Sales", label: "Q2", width: 120, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
131      { accessor: "q3Sales", label: "Q3", width: 120, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
132      { accessor: "q4Sales", label: "Q4", width: 120, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
133    ],
134  },
135  {
136    accessor: "monthlyPerformance",
137    label: "Monthly Performance",
138    width: 800,
139    collapsible: true,
140    collapseDefault: true,
141    children: [
142      { accessor: "avgMonthly", label: "Avg Monthly", width: 130, showWhen: "parentCollapsed", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
143      { accessor: "bestMonth", label: "Best Month", width: 130, showWhen: "parentCollapsed", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
144      monthCol("jan", "Jan"), monthCol("feb", "Feb"), monthCol("mar", "Mar"),
145      monthCol("apr", "Apr"), monthCol("may", "May"), monthCol("jun", "Jun"),
146      monthCol("jul", "Jul"), monthCol("aug", "Aug"), monthCol("sep", "Sep"),
147      monthCol("oct", "Oct"), monthCol("nov", "Nov"), monthCol("dec", "Dec"),
148    ],
149  },
150  {
151    accessor: "productCategories",
152    label: "Product Categories",
153    width: 450,
154    collapsible: true,
155    collapseDefault: true,
156    children: [
157      { accessor: "topCategory", label: "Top Category", width: 140, showWhen: "parentCollapsed", sortable: true, type: "string" },
158      { accessor: "softwareSales", label: "Software", width: 130, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
159      { accessor: "hardwareSales", label: "Hardware", width: 130, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
160      { accessor: "servicesSales", label: "Services", width: 130, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
161    ],
162  },
163];
164
165export const collapsibleColumnsConfig = {
166  headers: collapsibleColumnsHeaders,
167  rows: collapsibleColumnsData,
168  tableProps: {
169    columnResizing: true,
170    enableColumnEditor: true,
171    selectableCells: true,
172    columnReordering: true,
173  },
174};
175

TypeScriptCollapsibleColumnsDemo.ts

Copy

1import { SimpleTableVanilla } from "simple-table-core";
2import type { CollapsibleSalesRep } from "./collapsible-columns.demo-data";
3import type { Theme, GetRowIdParams } from "simple-table-core";
4import { collapsibleColumnsConfig } from "./collapsible-columns.demo-data";
5import "simple-table-core/styles.css";
6
7
8const getRowId = ({ row }: GetRowIdParams<CollapsibleSalesRep>) => row.id;
9export function renderCollapsibleColumnsDemo(
10  container: HTMLElement,
11  options?: { height?: string | number; theme?: Theme }
12): SimpleTableVanilla<CollapsibleSalesRep> {
13  const table = new SimpleTableVanilla(container, {
14    getRowId,
15    columns: collapsibleColumnsConfig.headers,
16    rows: collapsibleColumnsConfig.rows,
17    columnResizing: true,
18    enableColumnEditor: true,
19    selectableCells: true,
20    columnReordering: true,
21    height: options?.height ?? "400px",
22    theme: options?.theme,
23  });
24  return table;
25}
26
27
28// collapsible-columns.demo-data.ts
29// Self-contained demo table setup for this example.
30import type { CellRenderer, ColumnDef } from "simple-table-core";
31
32export interface CollapsibleSalesRep {
33  id: number;
34  name: string;
35  region: string;
36  q1Sales: number;
37  q2Sales: number;
38  q3Sales: number;
39  q4Sales: number;
40  totalSales: number;
41  avgQuarterly: number;
42  jan: number;
43  feb: number;
44  mar: number;
45  apr: number;
46  may: number;
47  jun: number;
48  jul: number;
49  aug: number;
50  sep: number;
51  oct: number;
52  nov: number;
53  dec: number;
54  avgMonthly: number;
55  bestMonth: number;
56  softwareSales: number;
57  hardwareSales: number;
58  servicesSales: number;
59  topCategory: string;
60  categoryCount: number;
61}
62
63export const collapsibleColumnsData: CollapsibleSalesRep[] = [
64  { id: 1, name: "Alice Thompson", region: "North America", q1Sales: 245000, q2Sales: 289000, q3Sales: 312000, q4Sales: 298000, totalSales: 1144000, avgQuarterly: 286000, jan: 78000, feb: 82000, mar: 85000, apr: 89000, may: 95000, jun: 105000, jul: 98000, aug: 102000, sep: 112000, oct: 108000, nov: 95000, dec: 95000, avgMonthly: 95333, bestMonth: 112000, softwareSales: 456000, hardwareSales: 342000, servicesSales: 346000, topCategory: "Software", categoryCount: 3 },
65  { id: 2, name: "Marcus Chen", region: "Asia Pacific", q1Sales: 189000, q2Sales: 234000, q3Sales: 287000, q4Sales: 276000, totalSales: 986000, avgQuarterly: 246500, jan: 58000, feb: 62000, mar: 69000, apr: 72000, may: 78000, jun: 84000, jul: 89000, aug: 95000, sep: 103000, oct: 98000, nov: 89000, dec: 89000, avgMonthly: 82166, bestMonth: 103000, softwareSales: 398000, hardwareSales: 298000, servicesSales: 290000, topCategory: "Software", categoryCount: 3 },
66  { id: 3, name: "Sofia Rodriguez", region: "Europe", q1Sales: 198000, q2Sales: 245000, q3Sales: 267000, q4Sales: 289000, totalSales: 999000, avgQuarterly: 249750, jan: 62000, feb: 66000, mar: 70000, apr: 78000, may: 82000, jun: 85000, jul: 85000, aug: 88000, sep: 94000, oct: 96000, nov: 97000, dec: 96000, avgMonthly: 83250, bestMonth: 97000, softwareSales: 389000, hardwareSales: 312000, servicesSales: 298000, topCategory: "Software", categoryCount: 3 },
67  { id: 4, name: "David Kim", region: "North America", q1Sales: 167000, q2Sales: 198000, q3Sales: 234000, q4Sales: 267000, totalSales: 866000, avgQuarterly: 216500, jan: 52000, feb: 55000, mar: 60000, apr: 63000, may: 66000, jun: 69000, jul: 75000, aug: 78000, sep: 81000, oct: 87000, nov: 89000, dec: 91000, avgMonthly: 72166, bestMonth: 91000, softwareSales: 346000, hardwareSales: 267000, servicesSales: 253000, topCategory: "Software", categoryCount: 3 },
68  { id: 5, name: "Emma Wilson", region: "Australia", q1Sales: 134000, q2Sales: 167000, q3Sales: 198000, q4Sales: 234000, totalSales: 733000, avgQuarterly: 183250, jan: 42000, feb: 45000, mar: 47000, apr: 52000, may: 55000, jun: 60000, jul: 63000, aug: 66000, sep: 69000, oct: 75000, nov: 78000, dec: 81000, avgMonthly: 61083, bestMonth: 81000, softwareSales: 293000, hardwareSales: 220000, servicesSales: 220000, topCategory: "Software", categoryCount: 3 },
69  { id: 6, name: "James Anderson", region: "South America", q1Sales: 156000, q2Sales: 178000, q3Sales: 201000, q4Sales: 223000, totalSales: 758000, avgQuarterly: 189500, jan: 48000, feb: 52000, mar: 56000, apr: 58000, may: 60000, jun: 60000, jul: 65000, aug: 67000, sep: 69000, oct: 72000, nov: 75000, dec: 76000, avgMonthly: 63166, bestMonth: 76000, softwareSales: 303000, hardwareSales: 227000, servicesSales: 228000, topCategory: "Software", categoryCount: 3 },
70  { id: 7, name: "Lisa Chang", region: "Asia Pacific", q1Sales: 145000, q2Sales: 178000, q3Sales: 201000, q4Sales: 234000, totalSales: 758000, avgQuarterly: 189500, jan: 45000, feb: 48000, mar: 52000, apr: 58000, may: 60000, jun: 60000, jul: 65000, aug: 67000, sep: 69000, oct: 75000, nov: 78000, dec: 81000, avgMonthly: 63166, bestMonth: 81000, softwareSales: 303000, hardwareSales: 227000, servicesSales: 228000, topCategory: "Software", categoryCount: 3 },
71  { id: 8, name: "Michael Brown", region: "Europe", q1Sales: 178000, q2Sales: 201000, q3Sales: 234000, q4Sales: 256000, totalSales: 869000, avgQuarterly: 217250, jan: 56000, feb: 60000, mar: 62000, apr: 65000, may: 67000, jun: 69000, jul: 75000, aug: 78000, sep: 81000, oct: 83000, nov: 86000, dec: 87000, avgMonthly: 72416, bestMonth: 87000, softwareSales: 347000, hardwareSales: 260000, servicesSales: 262000, topCategory: "Software", categoryCount: 3 },
72  { id: 9, name: "Sarah Johnson", region: "North America", q1Sales: 201000, q2Sales: 234000, q3Sales: 267000, q4Sales: 289000, totalSales: 991000, avgQuarterly: 247750, jan: 63000, feb: 67000, mar: 71000, apr: 75000, may: 78000, jun: 81000, jul: 85000, aug: 89000, sep: 93000, oct: 95000, nov: 97000, dec: 97000, avgMonthly: 82583, bestMonth: 97000, softwareSales: 396000, hardwareSales: 297000, servicesSales: 298000, topCategory: "Software", categoryCount: 3 },
73  { id: 10, name: "Robert Davis", region: "Australia", q1Sales: 123000, q2Sales: 145000, q3Sales: 167000, q4Sales: 189000, totalSales: 624000, avgQuarterly: 156000, jan: 38000, feb: 42000, mar: 43000, apr: 46000, may: 48000, jun: 51000, jul: 53000, aug: 56000, sep: 58000, oct: 60000, nov: 63000, dec: 66000, avgMonthly: 52000, bestMonth: 66000, softwareSales: 249000, hardwareSales: 187000, servicesSales: 188000, topCategory: "Software", categoryCount: 3 },
74  { id: 11, name: "Jennifer Martinez", region: "South America", q1Sales: 134000, q2Sales: 156000, q3Sales: 178000, q4Sales: 201000, totalSales: 669000, avgQuarterly: 167250, jan: 42000, feb: 45000, mar: 47000, apr: 50000, may: 52000, jun: 54000, jul: 57000, aug: 59000, sep: 62000, oct: 65000, nov: 67000, dec: 69000, avgMonthly: 55750, bestMonth: 69000, softwareSales: 267000, hardwareSales: 201000, servicesSales: 201000, topCategory: "Software", categoryCount: 3 },
75  { id: 12, name: "Christopher Lee", region: "Europe", q1Sales: 167000, q2Sales: 189000, q3Sales: 212000, q4Sales: 234000, totalSales: 802000, avgQuarterly: 200500, jan: 52000, feb: 55000, mar: 60000, apr: 61000, may: 63000, jun: 65000, jul: 68000, aug: 71000, sep: 73000, oct: 76000, nov: 78000, dec: 80000, avgMonthly: 66833, bestMonth: 80000, softwareSales: 320000, hardwareSales: 241000, servicesSales: 241000, topCategory: "Software", categoryCount: 3 },
76];
77
78const fmtCurrency: CellRenderer<CollapsibleSalesRep, number> = ({ value }) =>
79  `$${(value ?? 0).toLocaleString()}`;
80
81type MonthKey =
82  | "jan"
83  | "feb"
84  | "mar"
85  | "apr"
86  | "may"
87  | "jun"
88  | "jul"
89  | "aug"
90  | "sep"
91  | "oct"
92  | "nov"
93  | "dec";
94
95const monthCol = (
96  accessor: MonthKey,
97  label: string,
98): ColumnDef<CollapsibleSalesRep, number> => ({
99  accessor,
100  label,
101  width: 100,
102  showWhen: "parentExpanded",
103  sortable: true,
104  align: "right",
105  type: "number",
106  cellRenderer: fmtCurrency,
107});
108
109export const collapsibleColumnsHeaders: ColumnDef<CollapsibleSalesRep>[] = [
110  { accessor: "id", label: "ID", width: 60, sortable: true },
111  { accessor: "name", label: "Sales Rep", minWidth: 150, width: "1fr", sortable: true },
112  { accessor: "region", label: "Region", width: 140, sortable: true },
113  {
114    accessor: "quarterlySales",
115    label: "Quarterly Sales",
116    width: 500,
117    collapsible: true,
118    collapseDefault: true,
119    children: [
120      { accessor: "totalSales", label: "Total Sales", width: 140, showWhen: "parentCollapsed", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
121      { accessor: "q1Sales", label: "Q1", width: 120, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
122      { accessor: "q2Sales", label: "Q2", width: 120, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
123      { accessor: "q3Sales", label: "Q3", width: 120, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
124      { accessor: "q4Sales", label: "Q4", width: 120, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
125    ],
126  },
127  {
128    accessor: "monthlyPerformance",
129    label: "Monthly Performance",
130    width: 800,
131    collapsible: true,
132    collapseDefault: true,
133    children: [
134      { accessor: "avgMonthly", label: "Avg Monthly", width: 130, showWhen: "parentCollapsed", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
135      { accessor: "bestMonth", label: "Best Month", width: 130, showWhen: "parentCollapsed", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
136      monthCol("jan", "Jan"), monthCol("feb", "Feb"), monthCol("mar", "Mar"),
137      monthCol("apr", "Apr"), monthCol("may", "May"), monthCol("jun", "Jun"),
138      monthCol("jul", "Jul"), monthCol("aug", "Aug"), monthCol("sep", "Sep"),
139      monthCol("oct", "Oct"), monthCol("nov", "Nov"), monthCol("dec", "Dec"),
140    ],
141  },
142  {
143    accessor: "productCategories",
144    label: "Product Categories",
145    width: 450,
146    collapsible: true,
147    collapseDefault: true,
148    children: [
149      { accessor: "topCategory", label: "Top Category", width: 140, showWhen: "parentCollapsed", sortable: true, type: "string" },
150      { accessor: "softwareSales", label: "Software", width: 130, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
151      { accessor: "hardwareSales", label: "Hardware", width: 130, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
152      { accessor: "servicesSales", label: "Services", width: 130, showWhen: "parentExpanded", sortable: true, align: "right", type: "number", cellRenderer: fmtCurrency },
153    ],
154  },
155];
156
157export const collapsibleColumnsConfig = {
158  headers: collapsibleColumnsHeaders,
159  rows: collapsibleColumnsData,
160  tableProps: {
161    columnResizing: true,
162    enableColumnEditor: true,
163    selectableCells: true,
164    columnReordering: true,
165  },
166};
167

StackBlitz

Single-row children example

Parent header sits in the same row as its children.

React TSX

Copy

1import {SimpleTable} from "@simple-table/react";import type { Theme } from "@simple-table/react";
2import { singleRowChildrenConfig } from "./single-row-children.demo-data";
3import "@simple-table/react/styles.css";
4
5const SingleRowChildrenDemo = ({ height = "400px", theme }: { height?: string | number; theme?: Theme }) => {
6  return (
7    <SimpleTable
8      columns={singleRowChildrenConfig.headers}
9      rows={singleRowChildrenConfig.rows}
10      columnResizing={singleRowChildrenConfig.tableProps.columnResizing}
11      selectableCells={singleRowChildrenConfig.tableProps.selectableCells}
12      height={height}
13      theme={theme}
14      getRowId={({ row }) => row.id}
15    />
16  );
17};
18
19export default SingleRowChildrenDemo;

Angularsingle-row-children-demo.component.ts

Copy

1import { Component, Input } from "@angular/core";
2import {SimpleTableComponent} from "@simple-table/angular";import type { AngularColumnDef, GetRowIdParams, Theme } from "@simple-table/angular";
3import { singleRowChildrenConfig } from "./single-row-children.demo-data";
4import "@simple-table/angular/styles.css";
5import type { StudentRecord } from "./single-row-children.demo-data";
6
7@Component({
8  selector: "single-row-children-demo",
9  standalone: true,
10  imports: [SimpleTableComponent],
11  template: `
12    <simple-table
13      [getRowId]="getRowId"
14      [columns]="headers"
15      [rows]="rows"
16      [columnResizing]="true"
17      [selectableCells]="true"
18      [height]="height"
19      [theme]="theme"
20    ></simple-table>
21  `,
22})
23export class SingleRowChildrenDemoComponent {
24  @Input() height: string | number = "400px";
25  @Input() theme?: Theme;
26
27  readonly headers: AngularColumnDef<StudentRecord>[] = singleRowChildrenConfig.headers;
28  readonly rows: StudentRecord[] = singleRowChildrenConfig.rows;
29
30  getRowId = ({ row }: GetRowIdParams<StudentRecord>) => row.id;
31}
32
33
34// single-row-children.demo-data.ts
35// Self-contained demo table setup for this example.
36import type { AngularColumnDef, ValueFormatterProps } from "@simple-table/angular";
37
38export interface StudentRecord {
39  id: number;
40  studentId: string;
41  studentName: string;
42  gradeLevel: string;
43  overallGPA: number;
44  mathGrade: number;
45  scienceGrade: number;
46  englishGrade: number;
47  historyGrade: number;
48}
49
50export const singleRowChildrenData: StudentRecord[] = [
51  { id: 1, studentId: "STU-2024-001", studentName: "Alexandra Martinez", gradeLevel: "10th Grade", overallGPA: 3.85, mathGrade: 92, scienceGrade: 88, englishGrade: 91, historyGrade: 89 },
52  { id: 2, studentId: "STU-2024-002", studentName: "Benjamin Foster", gradeLevel: "11th Grade", overallGPA: 3.65, mathGrade: 85, scienceGrade: 87, englishGrade: 89, historyGrade: 86 },
53  { id: 3, studentId: "STU-2024-003", studentName: "Chloe Nakamura", gradeLevel: "12th Grade", overallGPA: 3.95, mathGrade: 96, scienceGrade: 94, englishGrade: 95, historyGrade: 93 },
54  { id: 4, studentId: "STU-2024-004", studentName: "Diego Ramirez", gradeLevel: "9th Grade", overallGPA: 3.45, mathGrade: 82, scienceGrade: 84, englishGrade: 85, historyGrade: 83 },
55  { id: 5, studentId: "STU-2024-005", studentName: "Emma Lindberg", gradeLevel: "10th Grade", overallGPA: 3.75, mathGrade: 88, scienceGrade: 90, englishGrade: 92, historyGrade: 87 },
56  { id: 6, studentId: "STU-2024-006", studentName: "Finn O'Connor", gradeLevel: "11th Grade", overallGPA: 3.55, mathGrade: 84, scienceGrade: 85, englishGrade: 87, historyGrade: 86 },
57  { id: 7, studentId: "STU-2024-007", studentName: "Grace Wellington", gradeLevel: "12th Grade", overallGPA: 4.0, mathGrade: 98, scienceGrade: 97, englishGrade: 99, historyGrade: 98 },
58  { id: 8, studentId: "STU-2024-008", studentName: "Hassan Al-Rashid", gradeLevel: "9th Grade", overallGPA: 3.35, mathGrade: 80, scienceGrade: 82, englishGrade: 83, historyGrade: 81 },
59  { id: 9, studentId: "STU-2024-009", studentName: "Isabella Kowalski", gradeLevel: "10th Grade", overallGPA: 3.8, mathGrade: 90, scienceGrade: 89, englishGrade: 93, historyGrade: 88 },
60  { id: 10, studentId: "STU-2024-010", studentName: "Jackson Mbele", gradeLevel: "11th Grade", overallGPA: 3.7, mathGrade: 87, scienceGrade: 88, englishGrade: 90, historyGrade: 89 },
61  { id: 11, studentId: "STU-2024-011", studentName: "Keiko Tanaka", gradeLevel: "12th Grade", overallGPA: 3.9, mathGrade: 94, scienceGrade: 93, englishGrade: 96, historyGrade: 92 },
62];
63
64export const singleRowChildrenHeaders: AngularColumnDef<StudentRecord>[] = [
65  { accessor: "studentId", label: "Student ID", width: 160, sortable: true, type: "string" },
66  { accessor: "gradeLevel", label: "Grade Level", width: 150, sortable: true, type: "string" },
67  {
68    accessor: "studentName",
69    label: "Student Name",
70    width: 200,
71    collapsible: true,
72    type: "string",
73    sortable: true,
74    singleRowChildren: true,
75    children: [
76      { accessor: "overallGPA", label: "GPA", width: 90, sortable: true, type: "number", align: "right", showWhen: "parentCollapsed", valueFormatter: ({ value }: ValueFormatterProps<StudentRecord, number>) => value.toFixed(2) },
77      { accessor: "mathGrade", label: "Math", width: 90, sortable: true, type: "number", align: "right", showWhen: "parentExpanded" },
78      { accessor: "scienceGrade", label: "Science", width: 90, sortable: true, type: "number", align: "right", showWhen: "parentExpanded" },
79      { accessor: "englishGrade", label: "English", width: 90, sortable: true, type: "number", align: "right", showWhen: "parentExpanded" },
80      { accessor: "historyGrade", label: "History", width: 90, sortable: true, type: "number", align: "right", showWhen: "parentExpanded" },
81    ],
82  },
83];
84
85export const singleRowChildrenConfig = {
86  headers: singleRowChildrenHeaders,
87  rows: singleRowChildrenData,
88  tableProps: {
89    columnResizing: true,
90    selectableCells: true,
91  },
92};
93

TypeScriptSingleRowChildrenDemo.ts

Copy

1import { SimpleTableVanilla } from "simple-table-core";
2import type { StudentRecord } from "./single-row-children.demo-data";
3import type { Theme, GetRowIdParams } from "simple-table-core";
4import { singleRowChildrenConfig } from "./single-row-children.demo-data";
5import "simple-table-core/styles.css";
6
7
8const getRowId = ({ row }: GetRowIdParams<StudentRecord>) => row.id;
9export function renderSingleRowChildrenDemo(
10  container: HTMLElement,
11  options?: { height?: string | number; theme?: Theme }
12): SimpleTableVanilla<StudentRecord> {
13  return new SimpleTableVanilla(container, {
14    getRowId,
15    columns: singleRowChildrenConfig.headers,
16    rows: singleRowChildrenConfig.rows,
17    columnResizing: singleRowChildrenConfig.tableProps.columnResizing,
18    selectableCells: singleRowChildrenConfig.tableProps.selectableCells,
19    height: options?.height ?? "400px",
20    theme: options?.theme,
21  });
22}
23
24
25// single-row-children.demo-data.ts
26// Self-contained demo table setup for this example.
27import type { ColumnDef } from "simple-table-core";
28
29export interface StudentRecord {
30  id: number;
31  studentId: string;
32  studentName: string;
33  gradeLevel: string;
34  overallGPA: number;
35  mathGrade: number;
36  scienceGrade: number;
37  englishGrade: number;
38  historyGrade: number;
39}
40
41export const singleRowChildrenData: StudentRecord[] = [
42  { id: 1, studentId: "STU-2024-001", studentName: "Alexandra Martinez", gradeLevel: "10th Grade", overallGPA: 3.85, mathGrade: 92, scienceGrade: 88, englishGrade: 91, historyGrade: 89 },
43  { id: 2, studentId: "STU-2024-002", studentName: "Benjamin Foster", gradeLevel: "11th Grade", overallGPA: 3.65, mathGrade: 85, scienceGrade: 87, englishGrade: 89, historyGrade: 86 },
44  { id: 3, studentId: "STU-2024-003", studentName: "Chloe Nakamura", gradeLevel: "12th Grade", overallGPA: 3.95, mathGrade: 96, scienceGrade: 94, englishGrade: 95, historyGrade: 93 },
45  { id: 4, studentId: "STU-2024-004", studentName: "Diego Ramirez", gradeLevel: "9th Grade", overallGPA: 3.45, mathGrade: 82, scienceGrade: 84, englishGrade: 85, historyGrade: 83 },
46  { id: 5, studentId: "STU-2024-005", studentName: "Emma Lindberg", gradeLevel: "10th Grade", overallGPA: 3.75, mathGrade: 88, scienceGrade: 90, englishGrade: 92, historyGrade: 87 },
47  { id: 6, studentId: "STU-2024-006", studentName: "Finn O'Connor", gradeLevel: "11th Grade", overallGPA: 3.55, mathGrade: 84, scienceGrade: 85, englishGrade: 87, historyGrade: 86 },
48  { id: 7, studentId: "STU-2024-007", studentName: "Grace Wellington", gradeLevel: "12th Grade", overallGPA: 4.0, mathGrade: 98, scienceGrade: 97, englishGrade: 99, historyGrade: 98 },
49  { id: 8, studentId: "STU-2024-008", studentName: "Hassan Al-Rashid", gradeLevel: "9th Grade", overallGPA: 3.35, mathGrade: 80, scienceGrade: 82, englishGrade: 83, historyGrade: 81 },
50  { id: 9, studentId: "STU-2024-009", studentName: "Isabella Kowalski", gradeLevel: "10th Grade", overallGPA: 3.8, mathGrade: 90, scienceGrade: 89, englishGrade: 93, historyGrade: 88 },
51  { id: 10, studentId: "STU-2024-010", studentName: "Jackson Mbele", gradeLevel: "11th Grade", overallGPA: 3.7, mathGrade: 87, scienceGrade: 88, englishGrade: 90, historyGrade: 89 },
52  { id: 11, studentId: "STU-2024-011", studentName: "Keiko Tanaka", gradeLevel: "12th Grade", overallGPA: 3.9, mathGrade: 94, scienceGrade: 93, englishGrade: 96, historyGrade: 92 },
53];
54
55export const singleRowChildrenHeaders: ColumnDef<StudentRecord>[] = [
56  { accessor: "studentId", label: "Student ID", width: 160, sortable: true, type: "string" },
57  { accessor: "gradeLevel", label: "Grade Level", width: 150, sortable: true, type: "string" },
58  {
59    accessor: "studentName",
60    label: "Student Name",
61    width: 200,
62    collapsible: true,
63    type: "string",
64    sortable: true,
65    singleRowChildren: true,
66    children: [
67      { accessor: "overallGPA", label: "GPA", width: 90, sortable: true, type: "number", align: "right", showWhen: "parentCollapsed", valueFormatter: ({ value }) => Number(value).toFixed(2) },
68      { accessor: "mathGrade", label: "Math", width: 90, sortable: true, type: "number", align: "right", showWhen: "parentExpanded" },
69      { accessor: "scienceGrade", label: "Science", width: 90, sortable: true, type: "number", align: "right", showWhen: "parentExpanded" },
70      { accessor: "englishGrade", label: "English", width: 90, sortable: true, type: "number", align: "right", showWhen: "parentExpanded" },
71      { accessor: "historyGrade", label: "History", width: 90, sortable: true, type: "number", align: "right", showWhen: "parentExpanded" },
72    ],
73  },
74];
75
76export const singleRowChildrenConfig = {
77  headers: singleRowChildrenHeaders,
78  rows: singleRowChildrenData,
79  tableProps: {
80    columnResizing: true,
81    selectableCells: true,
82  },
83};
84

StackBlitz

Props

Collapsible Columns Configuration

Property	Required	Description	Example
Property	Required	Description	Example
`ColumnDef.collapsible` boolean	Optional	Enables expand/collapse on a parent column that has children.
`ColumnDef.collapseDefault` boolean	Optional	Starts the group collapsed. Only applies when collapsible is true.
`ColumnDef.showWhen` enum	Optional	When a child column is visible relative to the parent's collapse state. Options: parentExpanded parentCollapsed always
`ColumnDef.singleRowChildren` boolean	Optional	Renders the parent header beside its children in one row instead of nested above them.
`icons.headerExpand` ReactNode	Optional	Custom expand icon for collapsible headers.
`icons.headerCollapse` ReactNode	Optional	Custom collapse icon for collapsible headers.