Column Visibility

1<script setup lang="ts">
2import {SimpleTable} from "@simple-table/vue";import type { ColumnVisibilityState, Theme } from "@simple-table/vue";
3import MarketingColumnEditorRow from "./MarketingColumnEditorRow.vue";
4import {
5  columnVisibilityConfig,
6  getColumnVisibilityDemoHeaders,
7  loadColumnVisibilityDemoSaved,
8  saveColumnVisibilityDemoState,
9} from "./column-visibility.demo-data";
10import "@simple-table/vue/styles.css";
11
12const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
13  height: "400px",
14});
15
16const columns = getColumnVisibilityDemoHeaders(loadColumnVisibilityDemoSaved());
17
18const columnEditorConfig = {
19  ...columnVisibilityConfig.tableProps.columnEditorConfig,
20  rowRenderer: MarketingColumnEditorRow,
21};
22
23function onColumnVisibilityChange(state: ColumnVisibilityState) {
24  saveColumnVisibilityDemoState(state);
25}
26</script>
27
28<template>
29  <SimpleTable
30    :columns="columns"
31    :rows="columnVisibilityConfig.rows"
32    :enable-column-editor="columnVisibilityConfig.tableProps.enableColumnEditor"
33    :enable-column-editor-init-open="columnVisibilityConfig.tableProps.enableColumnEditorInitOpen"
34    :column-editor-config="columnEditorConfig"
35    :height="props.height"
36    :theme="props.theme"
37    :on-column-visibility-change="onColumnVisibilityChange"
38  />
39</template>
40
41
42// MarketingColumnEditorRow.vue
43<script lang="ts">
44import { defineComponent, h } from "vue";
45import type { ColumnEditorRowRendererProps } from "@simple-table/vue";
46
47export default defineComponent({
48  name: "MarketingColumnEditorRow",
49  props: {
50    header: { type: Object, required: true },
51    components: { type: Object, required: true },
52  },
53  setup(props: ColumnEditorRowRendererProps) {
54    return () =>
55      h(
56        "div",
57        {
58          style: {
59            width: "100%",
60            display: "flex",
61            alignItems: "center",
62            justifyContent: "space-between",
63            gap: "8px",
64            paddingRight: "8px",
65          },
66        },
67        [
68          h(
69            "div",
70            {
71              style: {
72                display: "flex",
73                alignItems: "center",
74                gap: "8px",
75              },
76            },
77            [
78              props.components.expandIcon,
79              props.components.checkbox,
80              props.components.labelContent,
81            ].filter((v) => v != null && v !== false),
82          ),
83          h(
84            "div",
85            { style: { display: "flex", alignItems: "center" } },
86            [props.components.dragIcon].filter((v) => v != null && v !== false),
87          ),
88        ],
89      );
90  },
91});
92</script>
93

1import { Component, Input } from "@angular/core";
2import {SimpleTableComponent} from "@simple-table/angular";import type { AngularColumnDef, ColumnVisibilityState, Row, Theme } from "@simple-table/angular";
3import { columnVisibilityConfig, getColumnVisibilityDemoHeaders, loadColumnVisibilityDemoSaved, saveColumnVisibilityDemoState } from "./column-visibility.demo-data";
4import { MarketingColumnEditorRowComponent } from "./marketing-column-editor-row.component";
5import "@simple-table/angular/styles.css";
6
7@Component({
8  selector: "column-visibility-demo",
9  standalone: true,
10  imports: [SimpleTableComponent],
11  template: `
12    <simple-table
13      [rows]="rows"
14      [columns]="headers"
15      [height]="height"
16      [theme]="theme"
17      [enableColumnEditor]="tableProps.enableColumnEditor"
18      [enableColumnEditorInitOpen]="tableProps.enableColumnEditorInitOpen"
19      [columnEditorConfig]="columnEditorConfig"
20      [onColumnVisibilityChange]="onVisibilityChange"
21    ></simple-table>
22  `,
23})
24export class ColumnVisibilityDemoComponent {
25  @Input() height: string | number = "400px";
26  @Input() theme?: Theme;
27
28  readonly rows: Row[] = columnVisibilityConfig.rows;
29  readonly headers: AngularColumnDef[] = getColumnVisibilityDemoHeaders(
30    loadColumnVisibilityDemoSaved(),
31  );
32  readonly tableProps = columnVisibilityConfig.tableProps;
33  readonly columnEditorConfig = {
34    ...columnVisibilityConfig.tableProps.columnEditorConfig,
35    rowRenderer: MarketingColumnEditorRowComponent,
36  };
37
38  readonly onVisibilityChange = (state: ColumnVisibilityState) => {
39    saveColumnVisibilityDemoState(state);
40  };
41}
42
43
44// column-visibility.demo-data.ts
45// Self-contained demo table setup for this example (aligned with simple-table-marketing column visibility demo).
46import type { ColumnVisibilityState, AngularColumnDef, Row } from "@simple-table/angular";
47
48export const COLUMN_VISIBILITY_DEMO_STORAGE_KEY = "columnVisibilityDemo";
49
50export function loadColumnVisibilityDemoSaved(): ColumnVisibilityState {
51  if (typeof window === "undefined") return {};
52  try {
53    const saved = localStorage.getItem(COLUMN_VISIBILITY_DEMO_STORAGE_KEY);
54    return saved ? JSON.parse(saved) : {};
55  } catch {
56    return {};
57  }
58}
59
60export function saveColumnVisibilityDemoState(state: ColumnVisibilityState): void {
61  if (typeof window === "undefined") return;
62  try {
63    localStorage.setItem(COLUMN_VISIBILITY_DEMO_STORAGE_KEY, JSON.stringify(state));
64  } catch {
65    /* ignore */
66  }
67}
68
69export const columnVisibilityData: Row[] = [
70  { id: 1, firstName: "Alice", lastName: "Johnson", email: "alice@example.com", phone: "555-0101", role: "Engineer", department: "Engineering", location: "NYC", startDate: "2021-03-15" },
71  { id: 2, firstName: "Bob", lastName: "Martinez", email: "bob@example.com", phone: "555-0102", role: "Designer", department: "Design", location: "LA", startDate: "2022-07-22" },
72  { id: 3, firstName: "Clara", lastName: "Chen", email: "clara@example.com", phone: "555-0103", role: "PM", department: "Product", location: "SF", startDate: "2020-01-10" },
73  { id: 4, firstName: "David", lastName: "Kim", email: "david@example.com", phone: "555-0104", role: "Engineer", department: "Engineering", location: "CHI", startDate: "2019-11-05" },
74  { id: 5, firstName: "Elena", lastName: "Rossi", email: "elena@example.com", phone: "555-0105", role: "Analyst", department: "Analytics", location: "BOS", startDate: "2023-02-14" },
75  { id: 6, firstName: "Frank", lastName: "Müller", email: "frank@example.com", phone: "555-0106", role: "Engineer", department: "Engineering", location: "SEA", startDate: "2021-09-30" },
76  { id: 7, firstName: "Grace", lastName: "Park", email: "grace@example.com", phone: "555-0107", role: "Designer", department: "Design", location: "AUS", startDate: "2022-04-18" },
77  { id: 8, firstName: "Henry", lastName: "Patel", email: "henry@example.com", phone: "555-0108", role: "Lead", department: "Engineering", location: "DEN", startDate: "2018-05-20" },
78];
79
80export const columnVisibilityHeaders: AngularColumnDef[] = [
81  { accessor: "id", label: "ID", width: 60, type: "number" },
82  { accessor: "firstName", label: "First Name", width: 120, type: "string" },
83  { accessor: "lastName", label: "Last Name", width: 120, type: "string" },
84  { accessor: "email", label: "Email", width: 200, type: "string" },
85  { accessor: "phone", label: "Phone", width: 120, type: "string", hide: true },
86  { accessor: "role", label: "Role", width: 130, type: "string" },
87  { accessor: "department", label: "Department", width: 140, type: "string" },
88  { accessor: "location", label: "Location", width: 100, type: "string", hide: true },
89  {
90    accessor: "startDate",
91    label: "Start Date",
92    width: 130,
93    type: "date",
94    valueFormatter: ({ value }) => new Date(value as string).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }),
95  },
96];
97
98export function getColumnVisibilityDemoHeaders(
99  savedVisibility: ColumnVisibilityState = loadColumnVisibilityDemoSaved(),
100): AngularColumnDef[] {
101  return columnVisibilityHeaders.map((header) => ({
102    ...header,
103    hide:
104      savedVisibility[header.accessor] === false ||
105      (savedVisibility[header.accessor] === undefined && header.accessor === "email") ||
106      (savedVisibility[header.accessor] === undefined && header.hide === true),
107  }));
108}
109
110export const columnVisibilityConfig = {
111  headers: columnVisibilityHeaders,
112  rows: columnVisibilityData,
113  tableProps: {
114    enableColumnEditor: true as const,
115    enableColumnEditorInitOpen: true as const,
116    columnEditorConfig: {
117      text: "Manage Columns",
118      searchEnabled: true,
119      searchPlaceholder: "Search columns…",
120    },
121  },
122} as const;
123
124
125// marketing-column-editor-row.component.ts
126import {
127  AfterViewInit,
128  Component,
129  ElementRef,
130  Input,
131  OnChanges,
132  ViewChild,
133} from "@angular/core";
134import type { ColumnEditorRowRendererProps } from "@simple-table/angular";
135
136function attach(slot: unknown, host: HTMLElement | undefined): void {
137  if (!host) return;
138  host.replaceChildren();
139  if (slot == null) return;
140  if (typeof slot === "string") {
141    host.textContent = slot;
142  } else if (slot instanceof Node) {
143    host.appendChild(slot);
144  }
145}
146
147/** Marketing-style column-editor row; slots are framework-provided nodes or strings. */
148@Component({
149  selector: "st-examples-marketing-column-editor-row",
150  standalone: true,
151  template: `
152    <div
153      style="width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:8px;"
154    >
155      <div style="display:flex;align-items:center;gap:8px;">
156        <span #expandHost></span>
157        <span #checkboxHost></span>
158        <span #labelHost></span>
159      </div>
160      <span #dragHost></span>
161    </div>
162  `,
163})
164export class MarketingColumnEditorRowComponent implements AfterViewInit, OnChanges {
165  @Input({ required: true }) accessor!: ColumnEditorRowRendererProps["accessor"];
166  @Input({ required: true }) header!: ColumnEditorRowRendererProps["header"];
167  @Input({ required: true }) components!: ColumnEditorRowRendererProps["components"];
168  @Input() panelSection?: ColumnEditorRowRendererProps["panelSection"];
169  @Input() essential?: ColumnEditorRowRendererProps["essential"];
170  @Input() canToggleVisibility?: ColumnEditorRowRendererProps["canToggleVisibility"];
171  @Input() allowColumnPinning?: ColumnEditorRowRendererProps["allowColumnPinning"];
172  @Input() pinControl?: ColumnEditorRowRendererProps["pinControl"];
173
174  @ViewChild("expandHost") expandRef?: ElementRef<HTMLSpanElement>;
175  @ViewChild("checkboxHost") checkboxRef?: ElementRef<HTMLSpanElement>;
176  @ViewChild("labelHost") labelRef?: ElementRef<HTMLSpanElement>;
177  @ViewChild("dragHost") dragRef?: ElementRef<HTMLSpanElement>;
178
179  ngAfterViewInit(): void {
180    this.syncSlots();
181  }
182
183  ngOnChanges(): void {
184    this.syncSlots();
185  }
186
187  private syncSlots(): void {
188    const c = this.components;
189    attach(c.expandIcon, this.expandRef?.nativeElement);
190    attach(c.checkbox, this.checkboxRef?.nativeElement);
191    attach(c.labelContent, this.labelRef?.nativeElement);
192    attach(c.dragIcon, this.dragRef?.nativeElement);
193  }
194}
195

1<script lang="ts">
2  import {SimpleTable} from "@simple-table/svelte";  import type { Theme } from "@simple-table/svelte";
3  import MarketingColumnEditorRow from "./MarketingColumnEditorRow.svelte";
4  import { columnVisibilityConfig } from "./column-visibility.demo-data";
5  import "@simple-table/svelte/styles.css";
6
7  let { height = "400px", theme }: { height?: string | number; theme?: Theme } = $props();
8
9  const columns = columnVisibilityConfig.headers;
10
11  const columnEditorConfig = {
12    ...columnVisibilityConfig.tableProps.columnEditorConfig,
13    rowRenderer: MarketingColumnEditorRow,
14  };
15</script>
16
17<SimpleTable
18  {columns}
19  rows={columnVisibilityConfig.rows}
20  enableColumnEditor={columnVisibilityConfig.tableProps.enableColumnEditor}
21  enableColumnEditorInitOpen={columnVisibilityConfig.tableProps.enableColumnEditorInitOpen}
22  columnEditorConfig={columnEditorConfig}
23  {height}
24  {theme}
25/>
26
27
28// MarketingColumnEditorRow.svelte
29<script lang="ts">
30  import type { ColumnEditorRowRendererProps } from "@simple-table/svelte";
31
32  let { components }: ColumnEditorRowRendererProps = $props();
33
34  let expandHost: HTMLSpanElement | undefined = $state();
35  let checkboxHost: HTMLSpanElement | undefined = $state();
36  let labelHost: HTMLSpanElement | undefined = $state();
37  let dragHost: HTMLSpanElement | undefined = $state();
38
39  function attach(slot: unknown, host: HTMLElement | undefined): void {
40    if (!host) return;
41    host.replaceChildren();
42    if (slot == null) return;
43    if (typeof slot === "string") {
44      host.textContent = slot;
45    } else if (slot instanceof Node) {
46      host.appendChild(slot);
47    }
48  }
49
50  $effect(() => {
51    attach(components.expandIcon, expandHost);
52  });
53  $effect(() => {
54    attach(components.checkbox, checkboxHost);
55  });
56  $effect(() => {
57    attach(components.labelContent, labelHost);
58  });
59  $effect(() => {
60    attach(components.dragIcon, dragHost);
61  });
62</script>
63
64<div
65  style="width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:8px;"
66>
67  <div style="display:flex;align-items:center;gap:8px;">
68    <span bind:this={expandHost}></span>
69    <span bind:this={checkboxHost}></span>
70    <span bind:this={labelHost}></span>
71  </div>
72  <span bind:this={dragHost}></span>
73</div>
74

1import {
2  SimpleTable,
3  type ColumnVisibilityState,
4  type Theme,
5} from "@simple-table/solid";
6import {
7  columnVisibilityConfig,
8  getColumnVisibilityDemoHeaders,
9  loadColumnVisibilityDemoSaved,
10  saveColumnVisibilityDemoState,
11} from "./column-visibility.demo-data";
12import MarketingColumnEditorRow from "./MarketingColumnEditorRow";
13import "@simple-table/solid/styles.css";
14
15export default function ColumnVisibilityDemo(props: { height?: string | number; theme?: Theme }) {
16  const headers = () => getColumnVisibilityDemoHeaders(loadColumnVisibilityDemoSaved());
17
18  const onColumnVisibilityChange = (state: ColumnVisibilityState) => {
19    saveColumnVisibilityDemoState(state);
20  };
21
22  return (
23    <SimpleTable
24      columns={headers()}
25      rows={columnVisibilityConfig.rows}
26      enableColumnEditor
27      enableColumnEditorInitOpen
28      height={props.height ?? "400px"}
29      theme={props.theme}
30      onColumnVisibilityChange={onColumnVisibilityChange}
31      columnEditorConfig={{
32        ...columnVisibilityConfig.tableProps.columnEditorConfig,
33        rowRenderer: MarketingColumnEditorRow,
34      }}
35    />
36  );
37}
38
39
40// MarketingColumnEditorRow.tsx
41import type { ColumnEditorRowRendererProps } from "@simple-table/solid";
42import { createEffect } from "solid-js";
43
44function attach(slot: unknown, host: HTMLElement | undefined): void {
45  if (!host) return;
46  host.replaceChildren();
47  if (slot == null) return;
48  if (typeof slot === "string") {
49    host.textContent = slot;
50  } else if (slot instanceof Node) {
51    host.appendChild(slot);
52  }
53}
54
55function SlotHost(props: { slot: () => unknown }) {
56  let host: HTMLSpanElement | undefined;
57  createEffect(() => {
58    attach(props.slot(), host);
59  });
60  return (
61    <span
62      ref={(el) => {
63        host = el;
64        attach(props.slot(), el);
65      }}
66    />
67  );
68}
69
70export default function MarketingColumnEditorRow(props: ColumnEditorRowRendererProps) {
71  return (
72    <div
73      style={{
74        width: "100%",
75        display: "flex",
76        "align-items": "center",
77        "justify-content": "space-between",
78        gap: "8px",
79        "padding-right": "8px",
80      }}
81    >
82      <div style={{ display: "flex", "align-items": "center", gap: "8px" }}>
83        <SlotHost slot={() => props.components.expandIcon} />
84        <SlotHost slot={() => props.components.checkbox} />
85        <SlotHost slot={() => props.components.labelContent} />
86      </div>
87      <SlotHost slot={() => props.components.dragIcon} />
88    </div>
89  );
90}
91

1import { SimpleTableVanilla } from "simple-table-core";
2import type { Theme } from "simple-table-core";
3import {
4  buildMarketingStyleColumnEditorRowRenderer,
5  columnVisibilityConfig,
6  getColumnVisibilityDemoHeaders,
7  saveColumnVisibilityDemoState,
8} from "./column-visibility.demo-data";
9import "simple-table-core/styles.css";
10
11export function renderColumnVisibilityDemo(
12  container: HTMLElement,
13  options?: { height?: string | number; theme?: Theme },
14): SimpleTableVanilla {
15  const table = new SimpleTableVanilla(container, {
16    columns: getColumnVisibilityDemoHeaders(),
17    rows: columnVisibilityConfig.rows,
18    height: options?.height ?? "400px",
19    theme: options?.theme,
20    enableColumnEditor: columnVisibilityConfig.tableProps.enableColumnEditor,
21    enableColumnEditorInitOpen: columnVisibilityConfig.tableProps.enableColumnEditorInitOpen,
22    onColumnVisibilityChange: saveColumnVisibilityDemoState,
23    columnEditorConfig: {
24      ...columnVisibilityConfig.tableProps.columnEditorConfig,
25      rowRenderer: buildMarketingStyleColumnEditorRowRenderer,
26    },
27  });
28  return table;
29}
30
31
32// column-visibility.demo-data.ts
33// Self-contained demo table setup for this example (aligned with simple-table-marketing column visibility demo).
34import type {
35  ColumnEditorRowRenderer,
36  ColumnEditorRowRendererProps,
37  ColumnVisibilityState,
38  ColumnDef,
39  Row,
40} from "simple-table-core";
41
42export const COLUMN_VISIBILITY_DEMO_STORAGE_KEY = "columnVisibilityDemo";
43
44export function loadColumnVisibilityDemoSaved(): ColumnVisibilityState {
45  if (typeof window === "undefined") return {};
46  try {
47    const saved = localStorage.getItem(COLUMN_VISIBILITY_DEMO_STORAGE_KEY);
48    return saved ? JSON.parse(saved) : {};
49  } catch {
50    return {};
51  }
52}
53
54export function saveColumnVisibilityDemoState(state: ColumnVisibilityState): void {
55  if (typeof window === "undefined") return;
56  try {
57    localStorage.setItem(COLUMN_VISIBILITY_DEMO_STORAGE_KEY, JSON.stringify(state));
58  } catch {
59    /* ignore */
60  }
61}
62
63export const columnVisibilityData: Row[] = [
64  { id: 1, firstName: "Alice", lastName: "Johnson", email: "alice@example.com", phone: "555-0101", role: "Engineer", department: "Engineering", location: "NYC", startDate: "2021-03-15" },
65  { id: 2, firstName: "Bob", lastName: "Martinez", email: "bob@example.com", phone: "555-0102", role: "Designer", department: "Design", location: "LA", startDate: "2022-07-22" },
66  { id: 3, firstName: "Clara", lastName: "Chen", email: "clara@example.com", phone: "555-0103", role: "PM", department: "Product", location: "SF", startDate: "2020-01-10" },
67  { id: 4, firstName: "David", lastName: "Kim", email: "david@example.com", phone: "555-0104", role: "Engineer", department: "Engineering", location: "CHI", startDate: "2019-11-05" },
68  { id: 5, firstName: "Elena", lastName: "Rossi", email: "elena@example.com", phone: "555-0105", role: "Analyst", department: "Analytics", location: "BOS", startDate: "2023-02-14" },
69  { id: 6, firstName: "Frank", lastName: "Müller", email: "frank@example.com", phone: "555-0106", role: "Engineer", department: "Engineering", location: "SEA", startDate: "2021-09-30" },
70  { id: 7, firstName: "Grace", lastName: "Park", email: "grace@example.com", phone: "555-0107", role: "Designer", department: "Design", location: "AUS", startDate: "2022-04-18" },
71  { id: 8, firstName: "Henry", lastName: "Patel", email: "henry@example.com", phone: "555-0108", role: "Lead", department: "Engineering", location: "DEN", startDate: "2018-05-20" },
72];
73
74export const columnVisibilityHeaders: ColumnDef[] = [
75  { accessor: "id", label: "ID", width: 60, type: "number" },
76  { accessor: "firstName", label: "First Name", width: 120, type: "string" },
77  { accessor: "lastName", label: "Last Name", width: 120, type: "string" },
78  { accessor: "email", label: "Email", width: 200, type: "string" },
79  { accessor: "phone", label: "Phone", width: 120, type: "string", hide: true },
80  { accessor: "role", label: "Role", width: 130, type: "string" },
81  { accessor: "department", label: "Department", width: 140, type: "string" },
82  { accessor: "location", label: "Location", width: 100, type: "string", hide: true },
83  {
84    accessor: "startDate",
85    label: "Start Date",
86    width: 130,
87    type: "date",
88    valueFormatter: ({ value }) => new Date(value as string).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }),
89  },
90];
91
92export function getColumnVisibilityDemoHeaders(
93  savedVisibility: ColumnVisibilityState = loadColumnVisibilityDemoSaved(),
94): ColumnDef[] {
95  return columnVisibilityHeaders.map((header) => ({
96    ...header,
97    hide:
98      savedVisibility[header.accessor] === false ||
99      (savedVisibility[header.accessor] === undefined && header.accessor === "email") ||
100      (savedVisibility[header.accessor] === undefined && header.hide === true),
101  }));
102}
103
104export const columnVisibilityConfig = {
105  headers: columnVisibilityHeaders,
106  rows: columnVisibilityData,
107  tableProps: {
108    enableColumnEditor: true as const,
109    enableColumnEditorInitOpen: true as const,
110    columnEditorConfig: {
111      text: "Manage Columns",
112      searchEnabled: true,
113      searchPlaceholder: "Search columns…",
114    },
115  },
116} as const;
117
118function appendMarketingColumnEditorSlot(parent: HTMLElement, slot: string | Node | undefined): void {
119  if (slot == null) return;
120  if (typeof slot === "string") {
121    parent.appendChild(document.createTextNode(slot));
122  } else {
123    parent.appendChild(slot);
124  }
125}
126
127/** Vanilla-only copy of the marketing column-editor row layout (not shared with other framework examples). */
128export const buildMarketingStyleColumnEditorRowRenderer = (({
129  components,
130}: ColumnEditorRowRendererProps): HTMLElement => {
131  const outer = document.createElement("div");
132  outer.style.width = "100%";
133  outer.style.display = "flex";
134  outer.style.alignItems = "center";
135  outer.style.justifyContent = "space-between";
136  outer.style.gap = "8px";
137  outer.style.paddingRight = "8px";
138
139  const left = document.createElement("div");
140  left.style.display = "flex";
141  left.style.alignItems = "center";
142  left.style.gap = "8px";
143  appendMarketingColumnEditorSlot(left, components.expandIcon as Node | string | undefined);
144  appendMarketingColumnEditorSlot(left, components.checkbox as Node | string | undefined);
145  appendMarketingColumnEditorSlot(left, components.labelContent as Node | string | undefined);
146  outer.appendChild(left);
147
148  const right = document.createElement("div");
149  appendMarketingColumnEditorSlot(right, components.dragIcon as Node | string | undefined);
150  outer.appendChild(right);
151
152  return outer;
153}) satisfies ColumnEditorRowRenderer;
154