Tooltips

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

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

1<script lang="ts">
2  import { SimpleTable } from "@simple-table/svelte";
3  import type { Theme, GetRowIdParams } from "@simple-table/svelte";
4  import { tooltipConfig } from "./tooltip.demo-data";
5  import type { TooltipProduct } from "./tooltip.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<TooltipProduct>) => row.id;
11</script>
12
13<SimpleTable
14  columns={tooltipConfig.headers}
15  rows={tooltipConfig.rows}
16  getRowId={getRowId}
17  {height}
18  {theme}
19  columnResizing={true}
20  columnReordering={true}
21  selectableCells={true}
22/>

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

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