Cell Clicking

1<script setup lang="ts">
2import { ref, computed, h } from "vue";
3import { SimpleTable } from "@simple-table/vue";
4import type { Theme, VueColumnDef, CellClickProps, CellRendererProps } from "@simple-table/vue";
5import { cellClickingHeaders, cellClickingData, CELL_CLICKING_STATUSES } from "./cell-clicking.demo-data";
6import type { ProjectTask } from "./cell-clicking.demo-data";
7import "@simple-table/vue/styles.css";
8
9const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
10  height: "320px",
11});
12
13const clickInfo = ref("");
14const selectedTask = ref<ProjectTask | null>(null);
15const rows = ref<ProjectTask[]>([...cellClickingData]);
16
17const headers: VueColumnDef[] = cellClickingHeaders.map((col) => {
18  if (col.accessor === "priority") {
19    return {
20      ...col,
21      cellRenderer: ({ row }: CellRendererProps) => {
22        const p = String((row as Record<string, unknown>).priority);
23        const color = p === "High" ? "#ef4444" : p === "Medium" ? "#f59e0b" : "#10b981";
24        return h(
25          "span",
26          {
27            style: { color, fontWeight: "bold", cursor: "pointer" },
28            title: "Click to filter by priority",
29          },
30          p,
31        );
32      },
33    };
34  }
35  if (col.accessor === "status") {
36    return {
37      ...col,
38      cellRenderer: ({ row }: CellRendererProps) => {
39        const s = String((row as Record<string, unknown>).status);
40        const bg = s === "Completed" ? "#dcfce7" : s === "In Progress" ? "#fef3c7" : "#fee2e2";
41        const color = s === "Completed" ? "#166534" : s === "In Progress" ? "#92400e" : "#991b1b";
42        return h(
43          "span",
44          {
45            style: {
46              backgroundColor: bg,
47              color,
48              padding: "4px 8px",
49              borderRadius: "4px",
50              fontSize: "12px",
51              fontWeight: "bold",
52              cursor: "pointer",
53            },
54            title: "Click to change status",
55          },
56          s,
57        );
58      },
59    };
60  }
61  if (col.accessor === "details") {
62    return {
63      ...col,
64      cellRenderer: () =>
65        h(
66          "button",
67          {
68            style: {
69              background: "#3b82f6",
70              color: "white",
71              border: "none",
72              padding: "6px 12px",
73              borderRadius: "4px",
74              cursor: "pointer",
75              fontSize: "12px",
76              fontWeight: "bold",
77            },
78            title: "Click to view task details",
79          },
80          "View Details",
81        ),
82    };
83  }
84  return { ...col };
85});
86
87const isDark = computed(() => props.theme === "modern-dark" || props.theme === "dark");
88
89function handleCellClick({ accessor, rowIndex, value, row }: CellClickProps) {
90  const task = row as ProjectTask;
91  switch (accessor) {
92    case "priority":
93      clickInfo.value = `Filtering by ${value} priority`;
94      rows.value = cellClickingData.filter((t) => t.priority === value);
95      break;
96    case "status": {
97      const idx = CELL_CLICKING_STATUSES.indexOf(String(value));
98      const next = CELL_CLICKING_STATUSES[(idx + 1) % CELL_CLICKING_STATUSES.length];
99      rows.value = rows.value.map((t) => (t.id === task.id ? { ...t, status: next } : t));
100      clickInfo.value = `Status: "${value}" → "${next}"`;
101      break;
102    }
103    case "details":
104      selectedTask.value = task;
105      clickInfo.value = `Opening details for: ${task.task}`;
106      break;
107    case "estimatedHours": {
108      const n = Math.min(task.estimatedHours + 2, 40);
109      rows.value = rows.value.map((t) => (t.id === task.id ? { ...t, estimatedHours: n } : t));
110      clickInfo.value = `Est. hours: ${task.estimatedHours}h → ${n}h`;
111      break;
112    }
113    case "completedHours": {
114      const n = Math.min(task.completedHours + 1, task.estimatedHours);
115      rows.value = rows.value.map((t) => (t.id === task.id ? { ...t, completedHours: n } : t));
116      clickInfo.value = `Done hours: ${task.completedHours}h → ${n}h`;
117      break;
118    }
119    default:
120      clickInfo.value = `Clicked [${accessor}] = "${value}" (row ${rowIndex})`;
121  }
122}
123</script>
124
125<template>
126  <div style="display: flex; flex-direction: column; gap: 16px">
127    <div
128      :style="{
129        padding: '12px',
130        backgroundColor: isDark ? '#374151' : '#f3f4f6',
131        borderRadius: '8px',
132        border: '1px solid ' + (isDark ? '#4b5563' : '#d1d5db'),
133        minHeight: '48px',
134        display: 'flex',
135        alignItems: 'center',
136      }"
137    >
138      <strong :style="{ marginRight: '8px', color: isDark ? '#f9fafb' : '#1f2937' }">Last Click:</strong>
139      <span :style="{ color: isDark ? '#d1d5db' : '#4b5563' }">
140        {{ clickInfo || "Click any cell to see interaction details..." }}
141      </span>
142    </div>
143
144    <div
145      v-if="selectedTask"
146      style="position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000"
147    >
148      <div
149        :style="{ background: isDark ? '#1f2937' : 'white', padding: '24px', borderRadius: '8px', maxWidth: '500px', width: '90%' }"
150      >
151        <h3 :style="{ margin: '0 0 16px', color: isDark ? '#f9fafb' : '#1f2937' }">Task Details</h3>
152        <p :style="{ margin: '8px 0', color: isDark ? '#d1d5db' : '#4b5563' }"><strong>Task:</strong> {{ selectedTask.task }}</p>
153        <p :style="{ margin: '8px 0', color: isDark ? '#d1d5db' : '#4b5563' }"><strong>Details:</strong> {{ selectedTask.details }}</p>
154        <p :style="{ margin: '8px 0', color: isDark ? '#d1d5db' : '#4b5563' }"><strong>Assignee:</strong> {{ selectedTask.assignee }}</p>
155        <p :style="{ margin: '8px 0', color: isDark ? '#d1d5db' : '#4b5563' }"><strong>Status:</strong> {{ selectedTask.status }}</p>
156        <p :style="{ margin: '8px 0', color: isDark ? '#d1d5db' : '#4b5563' }"><strong>Priority:</strong> {{ selectedTask.priority }}</p>
157        <button
158          @click="selectedTask = null"
159          style="margin-top: 16px; background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: bold"
160        >
161          Close
162        </button>
163      </div>
164    </div>
165
166    <SimpleTable
167      :column-resizing="true"
168      :columns="headers"
169      :height="height"
170      :on-cell-click="handleCellClick"
171      :rows="rows"
172      :theme="theme"
173    />
174  </div>
175</template>

1import { Component } from "@angular/core";
2
3@Component({
4  standalone: true,
5  selector: "demo-cell-click-details",
6  template: `
7    <button
8      type="button"
9      style="background:#3b82f6;color:white;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:bold;"
10    >
11      View Details
12    </button>
13  `,
14})
15export class CellClickDetailsCellComponent {}
16
17
18// cell-click-priority-cell.component.ts
19import { Component, Input } from "@angular/core";
20import type { Row } from "@simple-table/angular";
21
22@Component({
23  standalone: true,
24  selector: "demo-cell-click-priority",
25  template: `
26    <span [style.color]="color" style="font-weight:bold;cursor:pointer;" title="Click to filter by priority">{{ priority }}</span>
27  `,
28})
29export class CellClickPriorityCellComponent {
30  @Input({ required: true }) row!: Row;
31
32  get priority(): string {
33    return String((this.row as Record<string, unknown>)["priority"]);
34  }
35
36  get color(): string {
37    const p = this.priority;
38    if (p === "High") return "#ef4444";
39    if (p === "Medium") return "#f59e0b";
40    return "#10b981";
41  }
42}
43
44
45// cell-click-status-cell.component.ts
46import { Component, Input } from "@angular/core";
47import type { Row } from "@simple-table/angular";
48
49@Component({
50  standalone: true,
51  selector: "demo-cell-click-status",
52  template: `
53    <span
54      [style.background]="bg"
55      [style.color]="fg"
56      style="padding:4px 8px;border-radius:4px;font-size:12px;font-weight:bold;cursor:pointer;"
57      title="Click to change status"
58      >{{ status }}</span>
59  `,
60})
61export class CellClickStatusCellComponent {
62  @Input({ required: true }) row!: Row;
63
64  get status(): string {
65    return String((this.row as Record<string, unknown>)["status"]);
66  }
67
68  get bg(): string {
69    const s = this.status;
70    if (s === "Completed") return "#dcfce7";
71    if (s === "In Progress") return "#fef3c7";
72    return "#fee2e2";
73  }
74
75  get fg(): string {
76    const s = this.status;
77    if (s === "Completed") return "#166534";
78    if (s === "In Progress") return "#92400e";
79    return "#991b1b";
80  }
81}
82
83
84// cell-clicking-demo.component.ts
85import { NgIf } from "@angular/common";
86import { Component, Input } from "@angular/core";
87import { SimpleTableComponent } from "@simple-table/angular";
88import type { AngularColumnDef, CellClickProps, Theme } from "@simple-table/angular";
89import { cellClickingData, cellClickingHeaders, CELL_CLICKING_STATUSES } from "./cell-clicking.demo-data";
90import type { ProjectTask } from "./cell-clicking.demo-data";
91import { CellClickDetailsCellComponent } from "./cell-click-details-cell.component";
92import { CellClickPriorityCellComponent } from "./cell-click-priority-cell.component";
93import { CellClickStatusCellComponent } from "./cell-click-status-cell.component";
94import "@simple-table/angular/styles.css";
95
96@Component({
97  selector: "cell-clicking-demo",
98  standalone: true,
99  imports: [SimpleTableComponent, NgIf],
100  template: `
101    <div style="display: flex; flex-direction: column; gap: 16px">
102      <div [style.padding]="'12px'" [style.background-color]="isDark ? '#374151' : '#f3f4f6'" [style.border-radius]="'8px'" [style.border]="'1px solid ' + (isDark ? '#4b5563' : '#d1d5db')" [style.min-height]="'48px'" style="display: flex; align-items: center">
103        <strong [style.margin-right]="'8px'" [style.color]="isDark ? '#f9fafb' : '#1f2937'">Last Click:</strong>
104        <span [style.color]="isDark ? '#d1d5db' : '#4b5563'">{{ clickInfo || 'Click any cell to see interaction details...' }}</span>
105      </div>
106
107      <div *ngIf="selectedTask" style="position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000">
108        <div [style.background]="isDark ? '#1f2937' : 'white'" style="padding: 24px; border-radius: 8px; max-width: 500px; width: 90%">
109          <h3 [style.color]="isDark ? '#f9fafb' : '#1f2937'" style="margin: 0 0 16px">Task Details</h3>
110          <p [style.color]="isDark ? '#d1d5db' : '#4b5563'" style="margin: 8px 0"><strong>Task:</strong> {{ selectedTask.task }}</p>
111          <p [style.color]="isDark ? '#d1d5db' : '#4b5563'" style="margin: 8px 0"><strong>Details:</strong> {{ selectedTask.details }}</p>
112          <p [style.color]="isDark ? '#d1d5db' : '#4b5563'" style="margin: 8px 0"><strong>Assignee:</strong> {{ selectedTask.assignee }}</p>
113          <p [style.color]="isDark ? '#d1d5db' : '#4b5563'" style="margin: 8px 0"><strong>Status:</strong> {{ selectedTask.status }}</p>
114          <p [style.color]="isDark ? '#d1d5db' : '#4b5563'" style="margin: 8px 0"><strong>Priority:</strong> {{ selectedTask.priority }}</p>
115          <button (click)="selectedTask = null" style="margin-top: 16px; background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: bold">Close</button>
116        </div>
117      </div>
118
119      <simple-table
120        [columnResizing]="true"
121        [columns]="headers"
122        [height]="height"
123        [onCellClick]="handleCellClick"
124        [rows]="rows"
125        [theme]="theme"
126      ></simple-table>
127    </div>
128  `,
129})
130export class CellClickingDemoComponent {
131  @Input() height: string | number = "320px";
132  @Input() theme?: Theme;
133
134  clickInfo = "";
135  selectedTask: ProjectTask | null = null;
136  rows: ProjectTask[] = [...cellClickingData];
137
138  get isDark() {
139    return this.theme === "modern-dark" || this.theme === "dark";
140  }
141
142  readonly headers: AngularColumnDef[] = cellClickingHeaders.map((h) => {
143    if (h.accessor === "priority") {
144      return { ...h, cellRenderer: CellClickPriorityCellComponent };
145    }
146    if (h.accessor === "status") {
147      return { ...h, cellRenderer: CellClickStatusCellComponent };
148    }
149    if (h.accessor === "details") {
150      return { ...h, cellRenderer: CellClickDetailsCellComponent };
151    }
152    return { ...h };
153  });
154
155  handleCellClick = ({ accessor, rowIndex, value, row }: CellClickProps) => {
156    const task = row as ProjectTask;
157    switch (accessor) {
158      case "priority":
159        this.clickInfo = `Filtering by ${value} priority`;
160        this.rows = cellClickingData.filter((t) => t.priority === value);
161        break;
162      case "status": {
163        const idx = CELL_CLICKING_STATUSES.indexOf(String(value));
164        const next = CELL_CLICKING_STATUSES[(idx + 1) % CELL_CLICKING_STATUSES.length];
165        this.rows = this.rows.map((t) => (t.id === task.id ? { ...t, status: next } : t));
166        this.clickInfo = `Status: "${value}" → "${next}"`;
167        break;
168      }
169      case "details":
170        this.selectedTask = task;
171        this.clickInfo = `Opening details for: ${task.task}`;
172        break;
173      case "estimatedHours": {
174        const n = Math.min(task.estimatedHours + 2, 40);
175        this.rows = this.rows.map((t) => (t.id === task.id ? { ...t, estimatedHours: n } : t));
176        this.clickInfo = `Est. hours: ${task.estimatedHours}h → ${n}h`;
177        break;
178      }
179      case "completedHours": {
180        const n = Math.min(task.completedHours + 1, task.estimatedHours);
181        this.rows = this.rows.map((t) => (t.id === task.id ? { ...t, completedHours: n } : t));
182        this.clickInfo = `Done hours: ${task.completedHours}h → ${n}h`;
183        break;
184      }
185      default:
186        this.clickInfo = `Clicked [${accessor}] = "${value}" (row ${rowIndex})`;
187    }
188  };
189}
190
191
192// cell-clicking.demo-data.ts
193// Self-contained demo table setup for this example.
194import type { AngularColumnDef, Row } from "@simple-table/angular";
195
196
197export type ProjectTask = {
198  id: number;
199  task: string;
200  assignee: string;
201  priority: string;
202  status: string;
203  dueDate: string;
204  estimatedHours: number;
205  completedHours: number;
206  details: string;
207};
208
209export const STATUSES = ["Not Started", "In Progress", "Completed"];
210
211export const cellClickingData: ProjectTask[] = [
212  { id: 1001, task: "Design login page mockups", assignee: "Sarah Chen", priority: "High", status: "In Progress", dueDate: "2024-02-15", estimatedHours: 8, completedHours: 5, details: "Create responsive login page designs with modern UI patterns" },
213  { id: 1002, task: "Implement user authentication API", assignee: "Marcus Rodriguez", priority: "High", status: "Not Started", dueDate: "2024-02-20", estimatedHours: 16, completedHours: 0, details: "Build secure JWT-based authentication system with OAuth integration" },
214  { id: 1003, task: "Write unit tests for payment module", assignee: "Luna Martinez", priority: "Medium", status: "Completed", dueDate: "2024-02-10", estimatedHours: 12, completedHours: 12, details: "Comprehensive test coverage for payment processing functionality" },
215  { id: 1004, task: "Update documentation for API endpoints", assignee: "Kai Thompson", priority: "Low", status: "In Progress", dueDate: "2024-02-25", estimatedHours: 6, completedHours: 3, details: "Update Swagger documentation and add usage examples" },
216  { id: 1005, task: "Performance optimization for dashboard", assignee: "Zara Kim", priority: "Medium", status: "Not Started", dueDate: "2024-03-01", estimatedHours: 20, completedHours: 0, details: "Optimize rendering performance and implement lazy loading" },
217  { id: 1006, task: "Mobile responsiveness testing", assignee: "Tyler Anderson", priority: "High", status: "In Progress", dueDate: "2024-02-18", estimatedHours: 10, completedHours: 7, details: "Test application across various mobile devices and screen sizes" },
218  { id: 1007, task: "Setup CI/CD pipeline", assignee: "Phoenix Lee", priority: "Medium", status: "Completed", dueDate: "2024-02-08", estimatedHours: 14, completedHours: 14, details: "Automated testing and deployment pipeline using GitHub Actions" },
219  { id: 1008, task: "Database migration scripts", assignee: "River Jackson", priority: "Low", status: "Not Started", dueDate: "2024-02-28", estimatedHours: 8, completedHours: 0, details: "Create migration scripts for database schema updates" },
220];
221
222export const cellClickingHeaders: AngularColumnDef[] = [
223  { accessor: "id", label: "Task ID", width: 80, sortable: true, type: "number" },
224  { accessor: "task", label: "Task Name", minWidth: 150, width: "1fr", sortable: true, type: "string" },
225  { accessor: "assignee", label: "Assignee", width: 120, sortable: true, type: "string" },
226  { accessor: "priority", label: "Priority", width: 100, sortable: true, type: "string" },
227  { accessor: "status", label: "Status", width: 120, sortable: true, type: "string" },
228  { accessor: "dueDate", label: "Due Date", width: 120, sortable: true, type: "date" },
229  { accessor: "estimatedHours", label: "Est. Hours", width: 100, sortable: true, type: "number" },
230  { accessor: "completedHours", label: "Done Hours", width: 100, sortable: true, type: "number" },
231  { accessor: "details", label: "View Details", width: 120, type: "other" },
232];
233
234export const cellClickingConfig = {
235  headers: cellClickingHeaders,
236  rows: cellClickingData,
237} as const;
238
239export { STATUSES as CELL_CLICKING_STATUSES };
240