feat: enhance DeesTable with server-side search and Lucene filtering capabilities
This commit is contained in:
@@ -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>
|
||||
`;
|
||||
|
Reference in New Issue
Block a user