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

feat(dees-table): add multi-column sorting with header menu controls and priority indicators

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-07 12:19:59 +00:00
parent 3601651e10
commit fa56c7cce8
7 changed files with 471 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
ts_web/elements/00group-dataview/dees-table/dees-table.demo.ts
View File

@@ -580,6 +580,44 @@ export const demoFunc = () => html`
></dees-table>
</div>
<div class="demo-section">
<h2 class="demo-title">Multi-Column Sort</h2>
<p class="demo-description">
Click any column header for a single-column sort. Hold Shift while clicking to add the
column to a multi-sort cascade (or cycle its direction). Right-click any sortable header
to open a menu where you can pin a column to a specific priority slot, remove it, or
clear the cascade.
</p>
<dees-table
heading1="People Directory"
heading2="Pre-seeded with department ▲ 1, name ▲ 2"
.sortBy=${[
{ key: 'department', dir: 'asc' },
{ key: 'name', dir: 'asc' },
]}
.columns=${[
{ key: 'department', header: 'Department', sortable: true },
{ key: 'name', header: 'Name', sortable: true },
{ key: 'role', header: 'Role', sortable: true },
{ key: 'createdAt', header: 'Created', sortable: true },
{ key: 'location', header: 'Location', sortable: true },
{ key: 'status', header: 'Status', sortable: true },
]}
.data=${[
{ department: 'R&D', name: 'Alice Johnson', role: 'Engineer', createdAt: '2023-01-12', location: 'Berlin', status: 'Active' },
{ department: 'R&D', name: 'Diana Martinez', role: 'Engineer', createdAt: '2020-06-30', location: 'Madrid', status: 'Active' },
{ department: 'R&D', name: 'Mark Lee', role: 'Engineer', createdAt: '2024-03-04', location: 'Berlin', status: 'Active' },
{ department: 'Design', name: 'Bob Smith', role: 'Designer', createdAt: '2022-11-05', location: 'Paris', status: 'Active' },
{ department: 'Design', name: 'Sara Kim', role: 'Designer', createdAt: '2021-08-19', location: 'Paris', status: 'On Leave' },
{ department: 'Ops', name: 'Charlie Davis', role: 'Manager', createdAt: '2021-04-21', location: 'London', status: 'On Leave' },
{ department: 'Ops', name: 'Helena Voss', role: 'SRE', createdAt: '2023-07-22', location: 'London', status: 'Active' },
{ department: 'QA', name: 'Fiona Clark', role: 'QA', createdAt: '2022-03-14', location: 'Vienna', status: 'Active' },
{ department: 'QA', name: 'Tomás Rivera', role: 'QA', createdAt: '2024-01-09', location: 'Madrid', status: 'Active' },
{ department: 'CS', name: 'Ethan Brown', role: 'Support', createdAt: '2019-09-18', location: 'Rome', status: 'Inactive' },
]}
></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>