Documentation

Column Selection

Let users select columns by clicking headers — useful for analysis tools or column-scoped actions.

Enable column selection

Set selectableColumns and handle onColumnSelect. Click a header to select that column (highlights the column).

React TSX

Copy

<SimpleTable
  selectableColumns
  columns={columns}
  rows={rows}
  onColumnSelect={(column) => {
    // column.accessor, column.label, ...
  }}
/>

Example

React TSX

Copy

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

Angularcolumn-selection-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 { columnSelectionConfig } from "./column-selection.demo-data";
4import "@simple-table/angular/styles.css";
5import type { TeamMember } from "./column-selection.demo-data";
6
7@Component({
8  selector: "column-selection-demo",
9  standalone: true,
10  imports: [SimpleTableComponent],
11  template: `
12    <simple-table
13      [getRowId]="getRowId"
14      [rows]="rows"
15      [columns]="headers"
16      [height]="height"
17      [theme]="theme"
18      [selectableColumns]="selectableColumns"
19    ></simple-table>
20  `,
21})
22export class ColumnSelectionDemoComponent {
23  @Input() height: string | number = "400px";
24  @Input() theme?: Theme;
25
26  readonly rows: TeamMember[] = columnSelectionConfig.rows;
27  readonly headers: AngularColumnDef<TeamMember>[] = columnSelectionConfig.headers;
28  readonly selectableColumns = columnSelectionConfig.tableProps.selectableColumns;
29
30  getRowId = ({ row }: GetRowIdParams<TeamMember>) => row.id;
31}
32
33
34// column-selection.demo-data.ts
35// Self-contained demo table setup for this example.
36import type { AngularColumnDef } from "@simple-table/angular";
37
38export interface TeamMember {
39  id: number;
40  name: string;
41  age: number;
42  role: string;
43  department: string;
44  email: string;
45}
46
47export const columnSelectionHeaders: AngularColumnDef<TeamMember>[] = [
48  { accessor: "id", label: "ID", width: 80, sortable: true, type: "number" },
49  { accessor: "name", label: "Name", minWidth: 120, width: "1fr", sortable: true, type: "string" },
50  { accessor: "age", label: "Age", width: 100, sortable: true, type: "number" },
51  { accessor: "role", label: "Role", width: 150, sortable: true, type: "string" },
52  { accessor: "department", label: "Department", width: 150, sortable: true, type: "string" },
53  { accessor: "email", label: "Email", width: 200, sortable: true, type: "string" },
54];
55
56export const columnSelectionData = [
57  { id: 1, name: "Marcus Rodriguez", age: 29, role: "Frontend Developer", department: "Engineering", email: "marcus.rodriguez@company.com" },
58  { id: 2, name: "Sophia Chen", age: 27, role: "UX/UI Designer", department: "Design", email: "sophia.chen@company.com" },
59  { id: 3, name: "Raj Patel", age: 34, role: "Engineering Manager", department: "Management", email: "raj.patel@company.com" },
60  { id: 4, name: "Luna Martinez", age: 23, role: "Junior Developer", department: "Engineering", email: "luna.martinez@company.com" },
61  { id: 5, name: "Tyler Anderson", age: 31, role: "DevOps Engineer", department: "Operations", email: "tyler.anderson@company.com" },
62  { id: 6, name: "Zara Kim", age: 28, role: "Product Designer", department: "Design", email: "zara.kim@company.com" },
63  { id: 7, name: "Kai Thompson", age: 26, role: "Full Stack Developer", department: "Engineering", email: "kai.thompson@company.com" },
64  { id: 8, name: "Ava Singh", age: 33, role: "Product Manager", department: "Product", email: "ava.singh@company.com" },
65  { id: 9, name: "Jordan Walsh", age: 25, role: "Marketing Specialist", department: "Growth", email: "jordan.walsh@company.com" },
66  { id: 10, name: "Phoenix Lee", age: 30, role: "Backend Developer", department: "Engineering", email: "phoenix.lee@company.com" },
67  { id: 11, name: "River Jackson", age: 24, role: "Growth Designer", department: "Design", email: "river.jackson@company.com" },
68  { id: 12, name: "Atlas Morgan", age: 32, role: "Tech Lead", department: "Engineering", email: "atlas.morgan@company.com" },
69];
70
71export const columnSelectionConfig = {
72  headers: columnSelectionHeaders,
73  rows: columnSelectionData,
74  tableProps: { selectableColumns: true },
75};
76

TypeScriptColumnSelectionDemo.ts

Copy

1import { SimpleTableVanilla } from "simple-table-core";
2import type { TeamMember } from "./column-selection.demo-data";
3import type { Theme, GetRowIdParams } from "simple-table-core";
4import { columnSelectionConfig } from "./column-selection.demo-data";
5import "simple-table-core/styles.css";
6
7
8const getRowId = ({ row }: GetRowIdParams<TeamMember>) => row.id;
9export function renderColumnSelectionDemo(
10  container: HTMLElement,
11  options?: { height?: string | number; theme?: Theme }
12): SimpleTableVanilla<TeamMember> {
13  const table = new SimpleTableVanilla(container, {
14    getRowId,
15    columns: columnSelectionConfig.headers,
16    rows: columnSelectionConfig.rows,
17    height: options?.height ?? "400px",
18    theme: options?.theme,
19    selectableColumns: columnSelectionConfig.tableProps.selectableColumns,
20  });
21  return table;
22}
23
24
25// column-selection.demo-data.ts
26// Self-contained demo table setup for this example.
27import type { ColumnDef } from "simple-table-core";
28
29export interface TeamMember {
30  id: number;
31  name: string;
32  age: number;
33  role: string;
34  department: string;
35  email: string;
36}
37
38export const columnSelectionHeaders: ColumnDef<TeamMember>[] = [
39  { accessor: "id", label: "ID", width: 80, sortable: true, type: "number" },
40  { accessor: "name", label: "Name", minWidth: 120, width: "1fr", sortable: true, type: "string" },
41  { accessor: "age", label: "Age", width: 100, sortable: true, type: "number" },
42  { accessor: "role", label: "Role", width: 150, sortable: true, type: "string" },
43  { accessor: "department", label: "Department", width: 150, sortable: true, type: "string" },
44  { accessor: "email", label: "Email", width: 200, sortable: true, type: "string" },
45];
46
47export const columnSelectionData = [
48  { id: 1, name: "Marcus Rodriguez", age: 29, role: "Frontend Developer", department: "Engineering", email: "marcus.rodriguez@company.com" },
49  { id: 2, name: "Sophia Chen", age: 27, role: "UX/UI Designer", department: "Design", email: "sophia.chen@company.com" },
50  { id: 3, name: "Raj Patel", age: 34, role: "Engineering Manager", department: "Management", email: "raj.patel@company.com" },
51  { id: 4, name: "Luna Martinez", age: 23, role: "Junior Developer", department: "Engineering", email: "luna.martinez@company.com" },
52  { id: 5, name: "Tyler Anderson", age: 31, role: "DevOps Engineer", department: "Operations", email: "tyler.anderson@company.com" },
53  { id: 6, name: "Zara Kim", age: 28, role: "Product Designer", department: "Design", email: "zara.kim@company.com" },
54  { id: 7, name: "Kai Thompson", age: 26, role: "Full Stack Developer", department: "Engineering", email: "kai.thompson@company.com" },
55  { id: 8, name: "Ava Singh", age: 33, role: "Product Manager", department: "Product", email: "ava.singh@company.com" },
56  { id: 9, name: "Jordan Walsh", age: 25, role: "Marketing Specialist", department: "Growth", email: "jordan.walsh@company.com" },
57  { id: 10, name: "Phoenix Lee", age: 30, role: "Backend Developer", department: "Engineering", email: "phoenix.lee@company.com" },
58  { id: 11, name: "River Jackson", age: 24, role: "Growth Designer", department: "Design", email: "river.jackson@company.com" },
59  { id: 12, name: "Atlas Morgan", age: 32, role: "Tech Lead", department: "Engineering", email: "atlas.morgan@company.com" },
60];
61
62export const columnSelectionConfig = {
63  headers: columnSelectionHeaders,
64  rows: columnSelectionData,
65  tableProps: { selectableColumns: true },
66};
67

StackBlitz

Props

Column Selection Configuration

Property	Required	Description	Example
Property	Required	Description	Example
`selectableColumns` boolean	Optional	Enables clicking column headers to select them.
`onColumnSelect` (header: ColumnDef) => void	Optional	Fires when a column header is selected. Receives the framework column def (e.g. ReactColumnDef).