frontend/src/lib/components/DataTable.svelte

<script>
  export let items = [];
  export let columns = [];
</script>

<div class="card overflow-x-auto p-0">
  <table class="w-full text-sm">
    <thead class="bg-surface2 border-b border-dark-600">
      <tr class="text-xs uppercase text-gray-500">
        {#each columns as col}
          <th class="text-left px-4 py-3 whitespace-nowrap">{col.replaceAll('_', ' ')}</th>
        {/each}
        {#if $$slots.actions}
          <th class="text-right px-4 py-3">Actions</th>
        {/if}
      </tr>
    </thead>
    <tbody class="divide-y divide-dark-600">
      {#each items as item}
        <tr class="hover:bg-surface2/70">
          {#each columns as col}
            <td class="px-4 py-3 max-w-72 truncate text-gray-300">
              {#if typeof item[col] === 'boolean'}
                <span class="badge {item[col] ? 'badge-green' : 'badge-gray'}">{item[col] ? 'Yes' : 'No'}</span>
              {:else}
                {item[col] ?? '-'}
              {/if}
            </td>
          {/each}
          {#if $$slots.actions}
            <td class="px-4 py-3 text-right">
              <div class="flex justify-end gap-2">
                <slot name="actions" item={item} />
              </div>
            </td>
          {/if}
        </tr>
      {:else}
        <tr>
          <td class="px-4 py-10 text-center text-gray-500" colspan={columns.length + ($$slots.actions ? 1 : 0)}>
            No records found.
          </td>
        </tr>
      {/each}
    </tbody>
  </table>
</div>