58 lines
1.7 KiB
Svelte
58 lines
1.7 KiB
Svelte
<script>
|
|
import { flexRender } from "@tanstack/svelte-table";
|
|
export let header;
|
|
</script>
|
|
|
|
<th class="cursor-pointer min-w-[5rem]">
|
|
{#if !header.isPlaceholder}
|
|
<button
|
|
class="w-full"
|
|
tabindex="0"
|
|
on:click={header.column.getToggleSortingHandler()}
|
|
>
|
|
<svelte:component
|
|
this={flexRender(header.column.columnDef.header, header.getContext())}
|
|
/>
|
|
{#if header.column
|
|
.getIsSorted()
|
|
.toString() == "asc" && header.column.getCanSort()}
|
|
🔼
|
|
{:else if header.column
|
|
.getIsSorted()
|
|
.toString() == "desc" && header.column.getCanSort()}
|
|
🔽
|
|
{/if}
|
|
</button>
|
|
{/if}
|
|
{#if header.column.getCanFilter()}
|
|
<div class="relative max-w-xs">
|
|
<input
|
|
title="name-search"
|
|
value={header.column.getFilterValue() || ""}
|
|
on:keyup={(e) => {
|
|
header.column.setFilterValue(e.target.value);
|
|
}}
|
|
type="text"
|
|
class="block w-full rounded-md border-gray-200 py-2 pl-8 text-xs focus:border-blue-500 focus:ring-blue-500"
|
|
placeholder=""
|
|
/>
|
|
<div
|
|
class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2"
|
|
>
|
|
<svg
|
|
class="h-3.5 w-3.5 text-gray-400"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={16}
|
|
height={16}
|
|
fill="currentColor"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path
|
|
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</th>
|