Cell Highlighting

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

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

1<script lang="ts">
2  import { SimpleTable } from "@simple-table/svelte";
3  import type { Theme, GetRowIdParams } from "@simple-table/svelte";
4  import { cellHighlightingConfig } from "./cell-highlighting.demo-data";
5  import type { CellHighlightingEmployee } from "./cell-highlighting.demo-data";
6  import "@simple-table/svelte/styles.css";
7
8  let { height = "400px", theme }: { height?: string | number; theme?: Theme } = $props();
9
10  const getRowId = ({ row }: GetRowIdParams<CellHighlightingEmployee>) => row.id;
11</script>
12
13<SimpleTable
14  columns={cellHighlightingConfig.headers}
15  rows={cellHighlightingConfig.rows}
16  getRowId={getRowId}
17  {height}
18  {theme}
19  selectableCells={cellHighlightingConfig.tableProps.selectableCells}
20  selectableColumns={cellHighlightingConfig.tableProps.selectableColumns}
21/>

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      getRowId={({ row }) => row.id}
10      rows={cellHighlightingConfig.rows}
11      height={props.height ?? "400px"}
12      theme={props.theme}
13      selectableCells={cellHighlightingConfig.tableProps.selectableCells}
14      selectableColumns={cellHighlightingConfig.tableProps.selectableColumns}
15    />
16  );
17}

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