From bbc7dfe29a31748483b74b067e3757390acc24ca Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Tue, 16 Sep 2025 16:17:03 +0000
Subject: [PATCH] feat(demo): add demo sections for wide properties and
 scrollable table with actions

---
 ts_web/elements/dees-table/dees-table.demo.ts | 94 +++++++++++++++++++
 1 file changed, 94 insertions(+)

diff --git a/ts_web/elements/dees-table/dees-table.demo.ts b/ts_web/elements/dees-table/dees-table.demo.ts
index 6510a2f..ae70cb9 100644
--- a/ts_web/elements/dees-table/dees-table.demo.ts
+++ b/ts_web/elements/dees-table/dees-table.demo.ts
@@ -579,6 +579,100 @@ export const demoFunc = () => html`
           dataName="people"
         ></dees-table>
       </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Wide Properties + Many Actions</h2>
+        <p class="demo-description">A table with many columns and rich actions to stress test layout and sticky Actions.</p>
+        <dees-table
+          heading1="People Directory"
+          heading2="Many properties and actions"
+          .columns=${[
+            { key: 'id', header: 'ID', sortable: true },
+            { key: 'name', header: 'Name', sortable: true },
+            { key: 'role', header: 'Role', sortable: true },
+            { key: 'department', header: 'Department', sortable: true },
+            { key: 'email', header: 'Email' },
+            { key: 'phone', header: 'Phone' },
+            { key: 'location', header: 'Location', sortable: true },
+            { key: 'status', header: 'Status', sortable: true },
+            { key: 'createdAt', header: 'Created', sortable: true },
+            { key: 'updatedAt', header: 'Updated', sortable: true },
+            { key: 'lastLogin', header: 'Last Login', sortable: true },
+            { key: 'projects', header: 'Projects' },
+            { key: 'tags', header: 'Tags' },
+            { key: 'notes', header: 'Notes' },
+          ]}
+          .data=${[
+            { id: 1, name: 'Alice Johnson', role: 'Engineer', department: 'R&D', email: 'alice@corp.com', phone: '+1 202 555 0111', location: 'Berlin', status: 'Active', createdAt: '2023-01-12', updatedAt: '2024-05-03', lastLogin: '2024-10-01', projects: 5, tags: 'typescript, ui', notes: 'Mentor' },
+            { id: 2, name: 'Bob Smith', role: 'Designer', department: 'Design', email: 'bob@corp.com', phone: '+1 202 555 0112', location: 'Paris', status: 'Active', createdAt: '2022-11-05', updatedAt: '2024-04-10', lastLogin: '2024-09-28', projects: 8, tags: 'figma, brand', notes: 'Part-time' },
+            { id: 3, name: 'Charlie Davis', role: 'Manager', department: 'Ops', email: 'charlie@corp.com', phone: '+1 202 555 0113', location: 'London', status: 'On Leave', createdAt: '2021-04-21', updatedAt: '2024-02-15', lastLogin: '2024-08-12', projects: 3, tags: 'sre, leadership', notes: '' },
+            { id: 4, name: 'Diana Martinez', role: 'Engineer', department: 'Platform', email: 'diana@corp.com', phone: '+1 202 555 0114', location: 'Madrid', status: 'Active', createdAt: '2020-06-30', updatedAt: '2024-06-25', lastLogin: '2024-10-02', projects: 6, tags: 'node, api', notes: 'On-call' },
+            { id: 5, name: 'Ethan Brown', role: 'Support', department: 'CS', email: 'ethan@corp.com', phone: '+1 202 555 0115', location: 'Rome', status: 'Inactive', createdAt: '2019-09-18', updatedAt: '2024-03-09', lastLogin: '2024-06-19', projects: 2, tags: 'zendesk', notes: 'Rehire' },
+            { id: 6, name: 'Fiona Clark', role: 'QA', department: 'QA', email: 'fiona@corp.com', phone: '+1 202 555 0116', location: 'Vienna', status: 'Active', createdAt: '2022-03-14', updatedAt: '2024-03-01', lastLogin: '2024-09-07', projects: 7, tags: 'playwright', notes: '' },
+          ]}
+          .dataActions=${[
+            { name: 'View', iconName: 'lucide:eye', type: ['inRow', 'contextmenu'], actionFunc: async ({ item }) => { console.log('view', item); } },
+            { name: 'Edit', iconName: 'lucide:edit', type: ['inRow', 'contextmenu'], actionFunc: async ({ item }) => { console.log('edit', item); } },
+            { name: 'Delete', iconName: 'lucide:trash', type: ['inRow', 'contextmenu'], actionFunc: async ({ item }) => { console.log('delete', item); } },
+            { name: 'Message', iconName: 'lucide:message-square', type: ['inRow'], actionFunc: async ({ item }) => { console.log('message', item); } },
+            { name: 'History', iconName: 'lucide:clock', type: ['inRow'], actionFunc: async ({ item }) => { console.log('history', item); } },
+            { name: 'Add New', iconName: 'lucide:plus', type: ['header'], actionFunc: async ({ table }) => { console.log('add'); } },
+            { name: 'Export CSV', iconName: 'lucide:download', type: ['header'], actionFunc: async ({ table }) => { console.log('export'); } },
+            { name: 'Bulk Delete', iconName: 'lucide:trash-2', type: ['footer'], actionFunc: async ({ table }) => { console.log('bulk delete'); } },
+          ] as ITableAction[]}
+        ></dees-table>
+      </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Scrollable Small Height</h2>
+        <p class="demo-description">Same as above, but with many items and a small fixed height to force vertical scrolling inside the table. Actions remain visible on the right; horizontal scroll appears if needed.</p>
+        <style>
+          #scrollSmallHeight { --table-max-height: 240px; }
+        </style>
+        <dees-table
+          id="scrollSmallHeight"
+          .stickyHeader=${true}
+          heading1="People Directory (Scrollable)"
+          heading2="Forced scrolling with many items"
+          .columns=${[
+            { key: 'id', header: 'ID', sortable: true },
+            { key: 'name', header: 'Name', sortable: true },
+            { key: 'role', header: 'Role', sortable: true },
+            { key: 'department', header: 'Department', sortable: true },
+            { key: 'email', header: 'Email' },
+            { key: 'phone', header: 'Phone' },
+            { key: 'location', header: 'Location', sortable: true },
+            { key: 'status', header: 'Status', sortable: true },
+            { key: 'createdAt', header: 'Created', sortable: true },
+            { key: 'updatedAt', header: 'Updated', sortable: true },
+            { key: 'lastLogin', header: 'Last Login', sortable: true },
+            { key: 'projects', header: 'Projects' },
+            { key: 'tags', header: 'Tags' },
+            { key: 'notes', header: 'Notes' },
+          ]}
+          .data=${Array.from({ length: 100 }, (_, i) => ({
+            id: i + 1,
+            name: `User ${i + 1}`,
+            role: ['Engineer','Designer','Manager','QA','Support'][i % 5],
+            department: ['R&D','Design','Ops','QA','CS'][i % 5],
+            email: `user${i+1}@corp.com`,
+            phone: `+1 202 555 ${String(1000 + i).slice(-4)}`,
+            location: ['Berlin','Paris','London','Madrid','Rome'][i % 5],
+            status: ['Active','Inactive','On Leave'][i % 3],
+            createdAt: `2023-${String((i%12)+1).padStart(2,'0')}-${String((i%28)+1).padStart(2,'0')}`,
+            updatedAt: `2024-${String(((i+3)%12)+1).padStart(2,'0')}-${String(((i+7)%28)+1).padStart(2,'0')}`,
+            lastLogin: `2024-${String(((i+6)%12)+1).padStart(2,'0')}-${String(((i+10)%28)+1).padStart(2,'0')}`,
+            projects: (i % 12),
+            tags: i % 2 ? 'typescript' : 'design',
+            notes: i % 3 ? '' : 'Note',
+          }))}
+          .dataActions=${[
+            { name: 'View', iconName: 'lucide:eye', type: ['inRow'], actionFunc: async ({ item }) => {} },
+            { name: 'Edit', iconName: 'lucide:edit', type: ['inRow'], actionFunc: async ({ item }) => {} },
+            { name: 'Delete', iconName: 'lucide:trash', type: ['inRow'], actionFunc: async ({ item }) => {} },
+          ] as ITableAction[]}
+        ></dees-table>
+      </div>
     </div>
   </div>
 `;