Column Selection in Simple Table Data Grid

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      columns={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    :columns="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 { AngularColumnDef, 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      [columns]="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: AngularColumnDef[] = 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 { AngularColumnDef } from "@simple-table/angular";
33
34
35export const columnSelectionHeaders: AngularColumnDef[] = [
36  { accessor: "id", label: "ID", width: 80, sortable: true, type: "number" },
37  { accessor: "name", label: "Name", minWidth: 120, width: "1fr", sortable: true, type: "string" },
38  { accessor: "age", label: "Age", width: 100, sortable: true, type: "number" },
39  { accessor: "role", label: "Role", width: 150, sortable: true, type: "string" },
40  { accessor: "department", label: "Department", width: 150, sortable: true, type: "string" },
41  { accessor: "email", label: "Email", width: 200, sortable: 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  columns={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      columns={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    columns: 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 { ColumnDef } from "simple-table-core";
24
25
26export const columnSelectionHeaders: ColumnDef[] = [
27  { accessor: "id", label: "ID", width: 80, sortable: true, type: "number" },
28  { accessor: "name", label: "Name", minWidth: 120, width: "1fr", sortable: true, type: "string" },
29  { accessor: "age", label: "Age", width: 100, sortable: true, type: "number" },
30  { accessor: "role", label: "Role", width: 150, sortable: true, type: "string" },
31  { accessor: "department", label: "Department", width: 150, sortable: true, type: "string" },
32  { accessor: "email", label: "Email", width: 200, sortable: 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

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).

Documentation

Column Selection

Enable column selection

Example

Props

Column Selection Configuration