Column Visibility

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

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

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

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      getRowId={({ row }) => row.id}
26      rows={columnVisibilityConfig.rows}
27      enableColumnEditor
28      enableColumnEditorInitOpen
29      height={props.height ?? "400px"}
30      theme={props.theme}
31      onColumnVisibilityChange={onColumnVisibilityChange}
32      columnEditorConfig={{
33        ...columnVisibilityConfig.tableProps.columnEditorConfig,
34        rowRenderer: MarketingColumnEditorRow,
35      }}
36    />
37  );
38}
39
40
41// MarketingColumnEditorRow.tsx
42import type { ColumnEditorRowRendererProps } from "@simple-table/solid";
43import { createEffect } from "solid-js";
44
45function attach(slot: unknown, host: HTMLElement | undefined): void {
46  if (!host) return;
47  host.replaceChildren();
48  if (slot == null) return;
49  if (typeof slot === "string") {
50    host.textContent = slot;
51  } else if (slot instanceof Node) {
52    host.appendChild(slot);
53  }
54}
55
56function SlotHost(props: { slot: () => unknown }) {
57  let host: HTMLSpanElement | undefined;
58  createEffect(() => {
59    attach(props.slot(), host);
60  });
61  return (
62    <span
63      ref={(el) => {
64        host = el;
65        attach(props.slot(), el);
66      }}
67    />
68  );
69}
70
71export default function MarketingColumnEditorRow(props: ColumnEditorRowRendererProps) {
72  return (
73    <div
74      style={{
75        width: "100%",
76        display: "flex",
77        "align-items": "center",
78        "justify-content": "space-between",
79        gap: "8px",
80        "padding-right": "8px",
81      }}
82    >
83      <div style={{ display: "flex", "align-items": "center", gap: "8px" }}>
84        <SlotHost slot={() => props.components.expandIcon} />
85        <SlotHost slot={() => props.components.checkbox} />
86        <SlotHost slot={() => props.components.labelContent} />
87      </div>
88      <SlotHost slot={() => props.components.dragIcon} />
89    </div>
90  );
91}
92

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