Tooltips

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

1import { Component, Input } from "@angular/core";
2import {SimpleTableComponent} from "@simple-table/angular";import type { AngularColumnDef, Row, Theme } from "@simple-table/angular";
3import { tooltipConfig } from "./tooltip.demo-data";
4import "@simple-table/angular/styles.css";
5
6@Component({
7  selector: "tooltip-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      [columnResizing]="true"
17      [columnReordering]="true"
18      [selectableCells]="true"
19    ></simple-table>
20  `,
21})
22export class TooltipDemoComponent {
23  @Input() height: string | number = "400px";
24  @Input() theme?: Theme;
25
26  readonly rows: Row[] = tooltipConfig.rows;
27  readonly headers: AngularColumnDef[] = tooltipConfig.headers;
28}
29
30
31// tooltip.demo-data.ts
32// Self-contained demo table setup for this example.
33import type { AngularColumnDef, Row } from "@simple-table/angular";
34
35
36export const tooltipData: Row[] = [
37  { id: 1, productName: "MacBook Pro M3 Max", category: "Laptops", price: 3299.99, stock: 12, rating: 4.8, lastUpdated: "2024-01-15" },
38  { id: 2, productName: "Logitech MX Master 3S", category: "Peripherals", price: 99.99, stock: 45, rating: 4.6, lastUpdated: "2024-01-18" },
39  { id: 3, productName: "Samsung 49-inch Ultrawide Monitor", category: "Displays", price: 899.99, stock: 8, rating: 4.7, lastUpdated: "2024-01-20" },
40  { id: 4, productName: "Mechanical Gaming Keyboard RGB", category: "Peripherals", price: 189.99, stock: 23, rating: 4.4, lastUpdated: "2024-01-22" },
41  { id: 5, productName: "Dell XPS 13 OLED", category: "Laptops", price: 1299.99, stock: 15, rating: 4.5, lastUpdated: "2024-01-25" },
42  { id: 6, productName: "Apple Magic Trackpad", category: "Peripherals", price: 149.99, stock: 67, rating: 4.3, lastUpdated: "2024-01-28" },
43  { id: 7, productName: "LG 32-inch 4K Monitor", category: "Displays", price: 449.99, stock: 19, rating: 4.6, lastUpdated: "2024-02-01" },
44  { id: 8, productName: "ThinkPad X1 Carbon Gen 11", category: "Laptops", price: 1899.99, stock: 6, rating: 4.7, lastUpdated: "2024-02-03" },
45  { id: 9, productName: "Razer DeathAdder V3 Pro", category: "Peripherals", price: 149.99, stock: 34, rating: 4.8, lastUpdated: "2024-02-05" },
46  { id: 10, productName: "ASUS ROG Swift 27-inch", category: "Displays", price: 699.99, stock: 11, rating: 4.5, lastUpdated: "2024-02-08" },
47  { id: 11, productName: "Surface Laptop Studio 2", category: "Laptops", price: 2199.99, stock: 4, rating: 4.4, lastUpdated: "2024-02-10" },
48  { id: 12, productName: "Keychron K8 Wireless Keyboard", category: "Peripherals", price: 89.99, stock: 28, rating: 4.6, lastUpdated: "2024-02-12" },
49  { id: 13, productName: "HP EliteBook 850 G10", category: "Laptops", price: 1599.99, stock: 9, rating: 4.3, lastUpdated: "2024-02-14" },
50  { id: 14, productName: "BenQ PD3200U 32-inch", category: "Displays", price: 799.99, stock: 7, rating: 4.7, lastUpdated: "2024-02-16" },
51  { id: 15, productName: "Corsair K95 RGB Platinum", category: "Peripherals", price: 199.99, stock: 16, rating: 4.5, lastUpdated: "2024-02-18" },
52];
53
54export const tooltipHeaders: AngularColumnDef[] = [
55  { accessor: "productName", label: "Product", width: 200, sortable: true, tooltip: "Complete product name including model specifications and key features" },
56  { accessor: "category", label: "Category", width: 150, sortable: true, filterable: true, tooltip: "Product classification: Laptops, Displays, or Peripherals for easy filtering" },
57  {
58    accessor: "price",
59    label: "Price",
60    width: 120,
61    align: "right",
62    sortable: true,
63    tooltip: "Current retail price in US dollars (USD) including all standard features",
64    valueFormatter: ({ value }) => `$${(value as number).toFixed(2)}`,
65  },
66  { accessor: "stock", label: "Stock", width: 100, align: "right", sortable: true, tooltip: "Available inventory count - number of units currently in warehouse stock" },
67  {
68    accessor: "rating",
69    label: "Rating",
70    width: 100,
71    align: "center",
72    sortable: true,
73    tooltip: "Customer satisfaction rating based on verified purchase reviews (scale: 1-5 stars)",
74    valueFormatter: ({ value }) => `${value}/5`,
75  },
76  { accessor: "lastUpdated", label: "Last Updated", width: 150, sortable: true, tooltip: "Most recent inventory update date in YYYY-MM-DD format" },
77];
78
79export const tooltipConfig = {
80  headers: tooltipHeaders,
81  rows: tooltipData,
82  tableProps: {
83    columnResizing: true,
84    columnReordering: true,
85    selectableCells: true,
86  },
87} as const;
88

1<script lang="ts">
2  import {SimpleTable} from "@simple-table/svelte";  import type { Theme } from "@simple-table/svelte";
3  import { tooltipConfig } from "./tooltip.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={tooltipConfig.headers}
11  rows={tooltipConfig.rows}
12  {height}
13  {theme}
14  columnResizing={true}
15  columnReordering={true}
16  selectableCells={true}
17/>

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

1import { SimpleTableVanilla } from "simple-table-core";
2import type { Theme } from "simple-table-core";
3import { tooltipConfig } from "./tooltip.demo-data";
4import "simple-table-core/styles.css";
5
6export function renderTooltipDemo(
7  container: HTMLElement,
8  options?: { height?: string | number; theme?: Theme }
9): SimpleTableVanilla {
10  const table = new SimpleTableVanilla(container, {
11    columns: [...tooltipConfig.headers],
12    rows: tooltipConfig.rows,
13    height: options?.height ?? "400px",
14    theme: options?.theme,
15    columnResizing: tooltipConfig.tableProps.columnResizing,
16    columnReordering: tooltipConfig.tableProps.columnReordering,
17    selectableCells: tooltipConfig.tableProps.selectableCells,
18  });
19  return table;
20}
21
22
23// tooltip.demo-data.ts
24// Self-contained demo table setup for this example.
25import type { ColumnDef, Row } from "simple-table-core";
26
27
28export const tooltipData: Row[] = [
29  { id: 1, productName: "MacBook Pro M3 Max", category: "Laptops", price: 3299.99, stock: 12, rating: 4.8, lastUpdated: "2024-01-15" },
30  { id: 2, productName: "Logitech MX Master 3S", category: "Peripherals", price: 99.99, stock: 45, rating: 4.6, lastUpdated: "2024-01-18" },
31  { id: 3, productName: "Samsung 49-inch Ultrawide Monitor", category: "Displays", price: 899.99, stock: 8, rating: 4.7, lastUpdated: "2024-01-20" },
32  { id: 4, productName: "Mechanical Gaming Keyboard RGB", category: "Peripherals", price: 189.99, stock: 23, rating: 4.4, lastUpdated: "2024-01-22" },
33  { id: 5, productName: "Dell XPS 13 OLED", category: "Laptops", price: 1299.99, stock: 15, rating: 4.5, lastUpdated: "2024-01-25" },
34  { id: 6, productName: "Apple Magic Trackpad", category: "Peripherals", price: 149.99, stock: 67, rating: 4.3, lastUpdated: "2024-01-28" },
35  { id: 7, productName: "LG 32-inch 4K Monitor", category: "Displays", price: 449.99, stock: 19, rating: 4.6, lastUpdated: "2024-02-01" },
36  { id: 8, productName: "ThinkPad X1 Carbon Gen 11", category: "Laptops", price: 1899.99, stock: 6, rating: 4.7, lastUpdated: "2024-02-03" },
37  { id: 9, productName: "Razer DeathAdder V3 Pro", category: "Peripherals", price: 149.99, stock: 34, rating: 4.8, lastUpdated: "2024-02-05" },
38  { id: 10, productName: "ASUS ROG Swift 27-inch", category: "Displays", price: 699.99, stock: 11, rating: 4.5, lastUpdated: "2024-02-08" },
39  { id: 11, productName: "Surface Laptop Studio 2", category: "Laptops", price: 2199.99, stock: 4, rating: 4.4, lastUpdated: "2024-02-10" },
40  { id: 12, productName: "Keychron K8 Wireless Keyboard", category: "Peripherals", price: 89.99, stock: 28, rating: 4.6, lastUpdated: "2024-02-12" },
41  { id: 13, productName: "HP EliteBook 850 G10", category: "Laptops", price: 1599.99, stock: 9, rating: 4.3, lastUpdated: "2024-02-14" },
42  { id: 14, productName: "BenQ PD3200U 32-inch", category: "Displays", price: 799.99, stock: 7, rating: 4.7, lastUpdated: "2024-02-16" },
43  { id: 15, productName: "Corsair K95 RGB Platinum", category: "Peripherals", price: 199.99, stock: 16, rating: 4.5, lastUpdated: "2024-02-18" },
44];
45
46export const tooltipHeaders: ColumnDef[] = [
47  { accessor: "productName", label: "Product", width: 200, sortable: true, tooltip: "Complete product name including model specifications and key features" },
48  { accessor: "category", label: "Category", width: 150, sortable: true, filterable: true, tooltip: "Product classification: Laptops, Displays, or Peripherals for easy filtering" },
49  {
50    accessor: "price",
51    label: "Price",
52    width: 120,
53    align: "right",
54    sortable: true,
55    tooltip: "Current retail price in US dollars (USD) including all standard features",
56    valueFormatter: ({ value }) => `$${(value as number).toFixed(2)}`,
57  },
58  { accessor: "stock", label: "Stock", width: 100, align: "right", sortable: true, tooltip: "Available inventory count - number of units currently in warehouse stock" },
59  {
60    accessor: "rating",
61    label: "Rating",
62    width: 100,
63    align: "center",
64    sortable: true,
65    tooltip: "Customer satisfaction rating based on verified purchase reviews (scale: 1-5 stars)",
66    valueFormatter: ({ value }) => `${value}/5`,
67  },
68  { accessor: "lastUpdated", label: "Last Updated", width: 150, sortable: true, tooltip: "Most recent inventory update date in YYYY-MM-DD format" },
69];
70
71export const tooltipConfig = {
72  headers: tooltipHeaders,
73  rows: tooltipData,
74  tableProps: {
75    columnResizing: true,
76    columnReordering: true,
77    selectableCells: true,
78  },
79} as const;
80