lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

🔍 UsersOverview table - basic fuzzy search

Browse Source 
ref #12
This commit is contained in:
Philipp Dormann 2021-01-10 13:30:26 +01:00
parent e1d5d54cfb
commit b9e0be4483
1 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/UsersOverview.svelte
View File

@ -28,6 +28,12 @@
{#if userscache.length === 0} {#if userscache.length === 0}
<UsersEmptyState /> <UsersEmptyState />
{:else} {:else}
<input
type="search"
bind:value={searchvalue}
placeholder={$_('datatable.search')}
aria-label={$_('datatable.search')}
class="gridjs-input gridjs-search-input mb-4" />
<div <div
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"> class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
<table class="divide-y divide-gray-200 w-full"> <table class="divide-y divide-gray-200 w-full">
@ -55,6 +61,7 @@
</thead> </thead>
<tbody class="divide-y divide-gray-200"> <tbody class="divide-y divide-gray-200">
{#each users as u} {#each users as u}
{#if Object.values(u).toString().toLowerCase().includes(searchvalue)}
<tr> <tr>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center"> <div class="flex items-center">
@ -106,6 +113,7 @@
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span> class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span>
</td> </td>
</tr> </tr>
{/if}
{/each} {/each}
</tbody> </tbody>
</table> </table>