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

feat: add per-column filtering and sticky header support to DeesTable component

Browse Source
This commit is contained in:
Jürgen Kunz
2025-09-16 15:17:33 +00:00
parent cf92a423cf
commit 6427510c98
5 changed files with 169 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -505,6 +505,38 @@ export const demoFunc = () => html`
dataName="items"
></dees-table>
</div>
<div class="demo-section">
<h2 class="demo-title">Column Filters + Sticky Header (New)</h2>
<p class="demo-description">Per-column quick filters and sticky header with internal scroll. Try filtering the Name column. Uses --table-max-height var.</p>
<style>
dees-table[sticky-header] { --table-max-height: 220px; }
</style>
<dees-table
heading1="Employees"
heading2="Quick filter per column + sticky header"
.showColumnFilters=${true}
.stickyHeader=${true}
.columns=${[
{ key: 'name', header: 'Name', sortable: true },
{ key: 'email', header: 'Email', sortable: true },
{ key: 'department', header: 'Department', sortable: true },
]}
.data=${[
{ name: 'Alice Johnson', email: 'alice@corp.com', department: 'Engineering' },
{ name: 'Bob Smith', email: 'bob@corp.com', department: 'Sales' },
{ name: 'Charlie Davis', email: 'charlie@corp.com', department: 'HR' },
{ name: 'Diana Martinez', email: 'diana@corp.com', department: 'Engineering' },
{ name: 'Ethan Brown', email: 'ethan@corp.com', department: 'Finance' },
{ name: 'Fiona Clark', email: 'fiona@corp.com', department: 'Sales' },
{ name: 'Grace Lee', email: 'grace@corp.com', department: 'Engineering' },
{ name: 'Henry Wilson', email: 'henry@corp.com', department: 'Marketing' },
{ name: 'Irene Walker', email: 'irene@corp.com', department: 'Finance' },
{ name: 'Jack Turner', email: 'jack@corp.com', department: 'Support' },
]}
dataName="employees"
></dees-table>
</div>
</div>
</div>
`;