FlowbiteのDatatablesで、検索・フィルタリング・ソート・ページネーションを利用できるようにしましょう

[KATO-Hiro]

WHY

• シンプルな設定で、検索・フィルタリング・ソート・ページネーションが実装できるため

懸念点

• 元のTableとの互換性（特にイベント）はあるか?

See

https://flowbite.com/docs/plugins/datatables/

[KATO-Hiro]

他の候補

• Svelte 5のRuneを使用している
• タグによるフィルタリングも可能

https://vincjo.fr/datatables.runes/client/examples/pokedex https://github.com/vincjo/datatables/tree/runes/src/routes/client/examples/pokedex

https://github.com/WJSoftware/wjfe-dataview スター数が少ない + 継続的なメンテナンスがされない可能性が高そう

[KATO-Hiro]

  // app.css
  @import 'simple-datatables/dist/style.css';

  // TaskTable.svelte
  import { onMount } from 'svelte';

  import { DataTable } from 'simple-datatables';

  let paginationTable: any;

  onMount(() => {
    if (paginationTable && typeof DataTable !== 'undefined') {
      const dataTable = new DataTable('#default-table', {
        paging: true,
        perPage: 5,
        perPageSelect: [2, 5, 10, 20, 50],
        searchable: true,
        sortable: false,
      });
    }
  });

<!-- https://flowbite.com/docs/plugins/datatables -->
<!-- https://github.com/fiduswriter/Simple-DataTables -->
<div class="container w-full overflow-auto border rounded-md">
  <Table shadow id="task-table" class="text-md table-fixed" aria-label="Task table">
    <TableHead class="text-sm bg-gray-100">
      <TableHeadCell class="w-16 px-2 text-center border">Round</TableHeadCell>

      {#if taskTableIndices.length}
        {#each taskTableIndices as taskTableIndex}
          <TableHeadCell class="text-center border">{taskTableIndex}</TableHeadCell>
        {/each}
      {/if}
    </TableHead>

    <TableBody tableBodyClass="divide-y">
      {#if contestIds.length && taskTableIndices.length}
        {#each contestIds as contestId}
          <TableBodyRow>
            <TableBodyCell class="w-16 truncate px-2 py-2 text-center border">
              <!-- FIXME: コンテスト種別に合わせて修正できるようにする -->
              {getContestNameLabel(contestId).replace('ABC ', '')}
            </TableBodyCell>

            {#each taskTableIndices as taskIndex}
              <TableBodyCell
                class="px-2 py-2 border {getBackgroundColor(taskTable[contestId][taskIndex])}"
              >
                {#if taskTable[contestId][taskIndex]}
                  <TaskTableBodyCell
                    taskResult={taskTable[contestId][taskIndex]}
                    {isLoggedIn}
                    {updatingModal}
                  />
                {/if}
              </TableBodyCell>
            {/each}
          </TableBodyRow>
        {/each}
      {/if}
    </TableBody>
  </Table>
</div>