design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(demo): add demo sections for wide properties and scrollable table with actions

Browse Source
This commit is contained in:
Jürgen Kunz
2025-09-16 16:17:03 +00:00
parent 49b9e833e8
commit bbc7dfe29a
1 changed files with 94 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
ts_web/elements/dees-table/dees-table.demo.ts
View File

@@ -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>
`;