Cell Highlighting

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

1import { Component, Input } from "@angular/core";
2import {SimpleTableComponent} from "@simple-table/angular";import type { AngularColumnDef, Row, Theme } from "@simple-table/angular";
3import { cellHighlightingConfig } from "./cell-highlighting.demo-data";
4import "@simple-table/angular/styles.css";
5
6@Component({
7  selector: "cell-highlighting-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      [selectableCells]="selectableCells"
17      [selectableColumns]="selectableColumns"
18    ></simple-table>
19  `,
20})
21export class CellHighlightingDemoComponent {
22  @Input() height: string | number = "400px";
23  @Input() theme?: Theme;
24
25  readonly rows: Row[] = cellHighlightingConfig.rows;
26  readonly headers: AngularColumnDef[] = cellHighlightingConfig.headers;
27  readonly selectableCells = cellHighlightingConfig.tableProps.selectableCells;
28  readonly selectableColumns = cellHighlightingConfig.tableProps.selectableColumns;
29}
30
31
32// cell-highlighting.demo-data.ts
33// Self-contained demo table setup for this example.
34import type { AngularColumnDef } from "@simple-table/angular";
35
36
37export const cellHighlightingHeaders: AngularColumnDef[] = [
38  { accessor: "id", label: "ID", width: 80, sortable: true, type: "number" },
39  { accessor: "name", label: "Name", minWidth: 80, width: "1fr", sortable: true, type: "string" },
40  { accessor: "age", label: "Age", width: 100, sortable: true, type: "number" },
41  { accessor: "role", label: "Role", width: 150, sortable: true, type: "string" },
42  { accessor: "department", label: "Department", width: 150, sortable: true, type: "string" },
43  { accessor: "startDate", label: "Start Date", width: 150, sortable: true, type: "date" },
44];
45
46export const cellHighlightingData = [
47  { id: 1, name: "Davi Thompson", age: 29, role: "Personal Trainer", department: "Fitness", startDate: "2021-03-15" },
48  { id: 2, name: "Paloma Martinez", age: 26, role: "Yoga Instructor", department: "Group Classes", startDate: "2022-01-10" },
49  { id: 3, name: "Jaxon Johnson", age: 34, role: "Fitness Manager", department: "Management", startDate: "2019-08-20" },
50  { id: 4, name: "Cleo Silva", age: 22, role: "Front Desk Associate", department: "Customer Service", startDate: "2023-05-12" },
51  { id: 5, name: "Bodhi Rodriguez", age: 31, role: "Nutritionist", department: "Wellness", startDate: "2020-11-08" },
52  { id: 6, name: "Indie Chen", age: 28, role: "Swim Instructor", department: "Aquatics", startDate: "2021-07-14" },
53  { id: 7, name: "Skye Williams", age: 25, role: "Group Fitness Instructor", department: "Group Classes", startDate: "2022-04-03" },
54  { id: 8, name: "Rio Garcia", age: 33, role: "Equipment Specialist", department: "Maintenance", startDate: "2020-02-17" },
55  { id: 9, name: "Wren Kumar", age: 27, role: "Wellness Coach", department: "Wellness", startDate: "2021-09-25" },
56  { id: 10, name: "Storm Lee", age: 30, role: "Pilates Instructor", department: "Group Classes", startDate: "2020-12-01" },
57  { id: 11, name: "Vale Davis", age: 24, role: "Membership Coordinator", department: "Sales", startDate: "2023-02-18" },
58  { id: 12, name: "Cruz Martinez", age: 36, role: "Head Trainer", department: "Fitness", startDate: "2018-06-12" },
59];
60
61export const cellHighlightingConfig = {
62  headers: cellHighlightingHeaders,
63  rows: cellHighlightingData,
64  tableProps: { selectableCells: true, selectableColumns: true },
65} as const;
66

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

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

1import { SimpleTableVanilla } from "simple-table-core";
2import type { Theme } from "simple-table-core";
3import { cellHighlightingConfig } from "./cell-highlighting.demo-data";
4import "simple-table-core/styles.css";
5
6export function renderCellHighlightingDemo(
7  container: HTMLElement,
8  options?: { height?: string | number; theme?: Theme }
9): SimpleTableVanilla {
10  const table = new SimpleTableVanilla(container, {
11    columns: cellHighlightingConfig.headers,
12    rows: cellHighlightingConfig.rows,
13    height: options?.height ?? "400px",
14    theme: options?.theme,
15    selectableCells: cellHighlightingConfig.tableProps.selectableCells,
16    selectableColumns: cellHighlightingConfig.tableProps.selectableColumns,
17  });
18  return table;
19}
20
21
22// cell-highlighting.demo-data.ts
23// Self-contained demo table setup for this example.
24import type { ColumnDef } from "simple-table-core";
25
26
27export const cellHighlightingHeaders: ColumnDef[] = [
28  { accessor: "id", label: "ID", width: 80, sortable: true, type: "number" },
29  { accessor: "name", label: "Name", minWidth: 80, width: "1fr", sortable: true, type: "string" },
30  { accessor: "age", label: "Age", width: 100, sortable: true, type: "number" },
31  { accessor: "role", label: "Role", width: 150, sortable: true, type: "string" },
32  { accessor: "department", label: "Department", width: 150, sortable: true, type: "string" },
33  { accessor: "startDate", label: "Start Date", width: 150, sortable: true, type: "date" },
34];
35
36export const cellHighlightingData = [
37  { id: 1, name: "Davi Thompson", age: 29, role: "Personal Trainer", department: "Fitness", startDate: "2021-03-15" },
38  { id: 2, name: "Paloma Martinez", age: 26, role: "Yoga Instructor", department: "Group Classes", startDate: "2022-01-10" },
39  { id: 3, name: "Jaxon Johnson", age: 34, role: "Fitness Manager", department: "Management", startDate: "2019-08-20" },
40  { id: 4, name: "Cleo Silva", age: 22, role: "Front Desk Associate", department: "Customer Service", startDate: "2023-05-12" },
41  { id: 5, name: "Bodhi Rodriguez", age: 31, role: "Nutritionist", department: "Wellness", startDate: "2020-11-08" },
42  { id: 6, name: "Indie Chen", age: 28, role: "Swim Instructor", department: "Aquatics", startDate: "2021-07-14" },
43  { id: 7, name: "Skye Williams", age: 25, role: "Group Fitness Instructor", department: "Group Classes", startDate: "2022-04-03" },
44  { id: 8, name: "Rio Garcia", age: 33, role: "Equipment Specialist", department: "Maintenance", startDate: "2020-02-17" },
45  { id: 9, name: "Wren Kumar", age: 27, role: "Wellness Coach", department: "Wellness", startDate: "2021-09-25" },
46  { id: 10, name: "Storm Lee", age: 30, role: "Pilates Instructor", department: "Group Classes", startDate: "2020-12-01" },
47  { id: 11, name: "Vale Davis", age: 24, role: "Membership Coordinator", department: "Sales", startDate: "2023-02-18" },
48  { id: 12, name: "Cruz Martinez", age: 36, role: "Head Trainer", department: "Fitness", startDate: "2018-06-12" },
49];
50
51export const cellHighlightingConfig = {
52  headers: cellHighlightingHeaders,
53  rows: cellHighlightingData,
54  tableProps: { selectableCells: true, selectableColumns: true },
55} as const;
56