feat: enhance DeesTable with server-side search and Lucene filtering capabilities

This commit is contained in:
2025-09-16 15:46:44 +00:00
parent 286a6f9088
commit f739bb608e
5 changed files with 341 additions and 34 deletions

View File

@@ -537,6 +537,48 @@ export const demoFunc = () => html`
dataName="employees"
></dees-table>
</div>
<div class="demo-section"
@searchRequest=${async (e: CustomEvent) => {
const { query } = e.detail || { query: '' };
const table = document.getElementById('serverSearchDemo') as any;
const baseData = [
{ id: 1, name: 'Alice', city: 'Berlin', title: 'Engineer' },
{ id: 2, name: 'Bob', city: 'Paris', title: 'Designer' },
{ id: 3, name: 'Charlie', city: 'London', title: 'Manager' },
{ id: 4, name: 'Diana', city: 'Madrid', title: 'Engineer' },
{ id: 5, name: 'Ethan', city: 'Rome', title: 'Support' },
];
// Simulate async request
await new Promise((r) => setTimeout(r, 300));
const q = String(query || '').toLowerCase();
const filtered = q
? baseData.filter((r) => Object.values(r).some((v) => String(v).toLowerCase().includes(q)))
: baseData;
table.data = filtered;
}}
>
<h2 class="demo-title">Server Search (New)</h2>
<p class="demo-description">Select Server mode, type a query, and watch the table fetch simulated results.</p>
<dees-table
id="serverSearchDemo"
heading1="People (Server Search)"
heading2="Click Search, choose Server mode, and type"
.columns=${[
{ key: 'name', header: 'Name' },
{ key: 'city', header: 'City' },
{ key: 'title', header: 'Title' },
]}
.data=${[
{ id: 1, name: 'Alice', city: 'Berlin', title: 'Engineer' },
{ id: 2, name: 'Bob', city: 'Paris', title: 'Designer' },
{ id: 3, name: 'Charlie', city: 'London', title: 'Manager' },
{ id: 4, name: 'Diana', city: 'Madrid', title: 'Engineer' },
{ id: 5, name: 'Ethan', city: 'Rome', title: 'Support' },
]}
dataName="people"
></dees-table>
</div>
</div>
</div>
`;