Documentation

Column Selection

Column selection allows users to interact with table columns by clicking on their headers. This feature is useful for building interactive table interfaces where users need to select columns for operations like filtering, sorting, or data analysis.

React TSX

Copy

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

Vue SFC

Copy

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

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

Svelte

Copy

1<script lang="ts">
2  import {SimpleTable} from "@simple-table/svelte";  import type { Theme } from "@simple-table/svelte";
3  import { columnSelectionConfig } from "./column-selection.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={columnSelectionConfig.headers}
11  rows={columnSelectionConfig.rows}
12  {height}
13  {theme}
14  selectableColumns={columnSelectionConfig.tableProps.selectableColumns}
15/>

Solid TSX

Copy

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

TypeScriptColumnSelectionDemo.ts

Copy

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

StackBlitz

Basic Column Selection

To enable column selection in Simple Table, you need to:

Set the selectableColumns prop to true
Provide an onColumnSelect callback function to handle selection events

Column Selection Properties

Property	Required	Description	Example
Property	Required	Description	Example
`selectableColumns` boolean	Optional	Enables column selection functionality. When true, users can click on column headers to select them.
`onColumnSelect` (header: ReactHeaderObject) => void	Optional	Callback function triggered when a column is selected. With `@simple-table/react`, receives `ReactHeaderObject`. Angular, Svelte, and Solid adapters use `AngularHeaderObject`, `SvelteHeaderObject`, and `SolidHeaderObject` respectively.