RunnersOverview: table responsiveness
This commit is contained in:
parent
0240e1dca2
commit
bf1e715261
GPG Key ID:
3BB9ADD52DCA4314
@ -198,102 +198,104 @@
|
||||
bind:generate_runners={selectedRunners}
|
||||
/>
|
||||
</div>
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
{#each $table.getHeaderGroups() as headerGroup}
|
||||
<tr class="select-none">
|
||||
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
||||
<InputElement
|
||||
type="checkbox"
|
||||
checked={$table.getIsAllRowsSelected()}
|
||||
indeterminate={$table.getIsSomeRowsSelected()}
|
||||
on:change={() => $table.toggleAllRowsSelected()}
|
||||
/>
|
||||
</th>
|
||||
{#each headerGroup.headers as header}
|
||||
<th class="cursor-pointer">
|
||||
{#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}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
{#each $table.getHeaderGroups() as headerGroup}
|
||||
<tr class="select-none">
|
||||
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
||||
<InputElement
|
||||
type="checkbox"
|
||||
checked={$table.getIsAllRowsSelected()}
|
||||
indeterminate={$table.getIsSomeRowsSelected()}
|
||||
on:change={() => $table.toggleAllRowsSelected()}
|
||||
/>
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each $table.getRowModel().rows as row}
|
||||
<tr>
|
||||
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
||||
<InputElement
|
||||
type="checkbox"
|
||||
checked={row.getIsSelected()}
|
||||
on:change={() => row.toggleSelected()}
|
||||
/>
|
||||
</td>
|
||||
{#each row.getVisibleCells() as cell}
|
||||
<td>
|
||||
<svelte:component
|
||||
this={flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext()
|
||||
)}
|
||||
{#each headerGroup.headers as header}
|
||||
<th class="cursor-pointer">
|
||||
{#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>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each $table.getRowModel().rows as row}
|
||||
<tr>
|
||||
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
||||
<InputElement
|
||||
type="checkbox"
|
||||
checked={row.getIsSelected()}
|
||||
on:change={() => row.toggleSelected()}
|
||||
/>
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{#each row.getVisibleCells() as cell}
|
||||
<td>
|
||||
<svelte:component
|
||||
this={flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext()
|
||||
)}
|
||||
/>
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="h-2" />
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user