refactor: tables

2026-01-13 21:46:27 -08:00 · 2026-01-13 17:09:27 -05:00
7 changed files with 184 additions and 189 deletions
--- a/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte
+++ b/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte
@@ -1,9 +1,21 @@
 <script lang="ts">
  import StatsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
  import { locale } from '$lib/stores/preferences.store';
-  import { getByteUnitString, getBytesWithUnit } from '$lib/utils/byte-units';
+  import { getBytesWithUnit } from '$lib/utils/byte-units';
  import type { ServerStatsResponseDto } from '@immich/sdk';
-  import { Code, Icon, Text } from '@immich/ui';
+  import {
+    Code,
+    FormatBytes,
+    Heading,
+    Icon,
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableHeading,
+    TableRow,
+    Text,
+  } from '@immich/ui';
  import { mdiCameraIris, mdiChartPie, mdiPlayCircle } from '@mdi/js';
  import { t } from 'svelte-i18n';

@@ -75,34 +87,28 @@
  </div>

  <div>
-    <Text class="mt-6 mb-2 font-medium">{$t('user_usage_detail')}</Text>
-    <table class="mt-5 w-full text-start">
-      <thead
-        class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
-      >
-        <tr class="flex w-full place-items-center">
-          <th class="w-1/4 text-center text-sm font-medium">{$t('user')}</th>
-          <th class="w-1/4 text-center text-sm font-medium">{$t('photos')}</th>
-          <th class="w-1/4 text-center text-sm font-medium">{$t('videos')}</th>
-          <th class="w-1/4 text-center text-sm font-medium">{$t('usage')}</th>
-        </tr>
-      </thead>
-      <tbody
-        class="block max-h-80 w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg"
-      >
+    <Heading size="tiny" class="mb-2">{$t('user_usage_detail')}</Heading>
+    <Table class="mt-5" striped size="small">
+      <TableHeader>
+        <TableHeading class="w-1/4">{$t('user')}</TableHeading>
+        <TableHeading class="w-1/4">{$t('photos')}</TableHeading>
+        <TableHeading class="w-1/4">{$t('videos')}</TableHeading>
+        <TableHeading class="w-1/4">{$t('usage')}</TableHeading>
+      </TableHeader>
+      <TableBody class="block max-h-80 overflow-y-auto">
        {#each stats.usageByUser as user (user.userId)}
-          <tr class="flex h-12.5 w-full place-items-center text-center even:bg-subtle/20 odd:bg-subtle/80">
-            <td class="w-1/4 text-ellipsis px-2 text-sm">{user.userName}</td>
-            <td class="w-1/4 text-ellipsis px-2 text-sm"
-              >{user.photos.toLocaleString($locale)} ({getByteUnitString(user.usagePhotos, $locale, 0)})</td
+          <TableRow>
+            <TableCell class="w-1/4">{user.userName}</TableCell>
+            <TableCell class="w-1/4">
+              {user.photos.toLocaleString($locale)} (<FormatBytes bytes={user.usagePhotos} />)</TableCell
            >
-            <td class="w-1/4 text-ellipsis px-2 text-sm"
-              >{user.videos.toLocaleString($locale)} ({getByteUnitString(user.usageVideos, $locale, 0)})</td
+            <TableCell class="w-1/4">
+              {user.videos.toLocaleString($locale)} (<FormatBytes bytes={user.usageVideos} precision={0} />)</TableCell
            >
-            <td class="w-1/4 text-ellipsis px-2 text-sm">
-              {getByteUnitString(user.usage, $locale, 0)}
+            <TableCell class="w-1/4">
+              <FormatBytes bytes={user.usage} precision={0} />
              {#if user.quotaSizeInBytes !== null}
-                / {getByteUnitString(user.quotaSizeInBytes, $locale, 0)}
+                / <FormatBytes bytes={user.quotaSizeInBytes} precision={0} />
              {/if}
              <span class="text-primary">
                {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
@@ -114,10 +120,10 @@
                  ({$t('unlimited')})
                {/if}
              </span>
-            </td>
-          </tr>
+            </TableCell>
+          </TableRow>
        {/each}
-      </tbody>
-    </table>
+      </TableBody>
+    </Table>
  </div>
 </div>
--- a/web/src/lib/components/shared-components/settings/setting-checkboxes.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-checkboxes.svelte
@@ -60,7 +60,7 @@
          {disabled}
          onCheckedChange={() => handleCheckboxChange(option.value)}
        />
-        <Label label={option.text} for="{option.value}-checkbox" />
+        <Label label={option.text} for="{option.value}-checkbox" size="small" />
      </div>
    {/each}
  </div>
--- a/web/src/lib/components/shared-components/settings/setting-combobox.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-combobox.svelte
@@ -31,7 +31,7 @@

 <div>
  <div class="flex h-6.5 place-items-center gap-1">
-    <Label>{title}</Label>
+    <Label size="small">{title}</Label>
    {#if isEdited}
      <div
        transition:fly={{ x: 10, duration: 200, easing: quintOut }}
--- a/web/src/lib/components/user-settings-page/user-api-key-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-api-key-list.svelte
@@ -5,7 +5,7 @@
  import { getApiKeyActions, getApiKeysActions } from '$lib/services/api-key.service';
  import { locale } from '$lib/stores/preferences.store';
  import { getApiKeys, type ApiKeyResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, Table, TableBody, TableCell, TableHeader, TableHeading, TableRow, Text } from '@immich/ui';
  import { t } from 'svelte-i18n';
  import { fade } from 'svelte/transition';

@@ -20,15 +20,11 @@
  };

  const onApiKeyUpdate = (update: ApiKeyResponseDto) => {
-    for (const key of keys) {
-      if (key.id === update.id) {
-        Object.assign(key, update);
-      }
-    }
+    keys = keys.map((key) => (key.id === update.id ? update : key));
  };

  const onApiKeyDelete = ({ id }: ApiKeyResponseDto) => {
-    keys = keys.filter((apiKey) => apiKey.id !== id);
+    keys = keys.filter((key) => key.id !== id);
  };

  const { Create } = $derived(getApiKeysActions($t));
@@ -39,45 +35,41 @@
 <section class="my-4">
  <div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
    <div class="mb-2 flex justify-end">
-      <Button leadingIcon={Create.icon} shape="round" size="small" onclick={() => Create.onAction(Create)}
-        >{Create.title}</Button
-      >
+      <Button leadingIcon={Create.icon} shape="round" size="small" onclick={() => Create.onAction(Create)}>
+        {Create.title}
+      </Button>
    </div>

    {#if keys.length > 0}
-      <table class="w-full text-start">
-        <thead
-          class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
-        >
-          <tr class="flex w-full place-items-center">
-            <th class="w-1/4 text-center text-sm font-medium">{$t('name')}</th>
-            <th class="w-1/4 text-center text-sm font-medium">{$t('permission')}</th>
-            <th class="w-1/4 text-center text-sm font-medium">{$t('created')}</th>
-            <th class="w-1/4 text-center text-sm font-medium">{$t('action')}</th>
-          </tr>
-        </thead>
-        <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
+      <Table class="mt-4" striped spacing="small">
+        <TableHeader>
+          <TableHeading>{$t('name')}</TableHeading>
+          <TableHeading>{$t('permission')}</TableHeading>
+          <TableHeading>{$t('created')}</TableHeading>
+          <TableHeading>{$t('action')}</TableHeading>
+        </TableHeader>
+
+        <TableBody>
          {#each keys as key (key.id)}
            {@const { Update, Delete } = getApiKeyActions($t, key)}
-            <tr
-              class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
-            >
-              <td class="w-1/4 text-ellipsis px-4 text-sm overflow-hidden">{key.name}</td>
-              <td
-                class="w-1/4 text-ellipsis px-4 text-xs overflow-hidden line-clamp-3 break-all font-immich-mono"
-                title={JSON.stringify(key.permissions, undefined, 2)}>{key.permissions}</td
-              >
-              <td class="w-1/4 text-ellipsis px-4 text-sm overflow-hidden"
-                >{new Date(key.createdAt).toLocaleDateString($locale, dateFormats.settings)}
-              </td>
-              <td class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-1/4">
+            <TableRow>
+              <TableCell>{key.name}</TableCell>
+              <TableCell>
+                <Text
+                  class="font-mono overflow-hidden line-clamp-3"
+                  size="small"
+                  title={JSON.stringify(key.permissions, null, 2)}>{key.permissions}</Text
+                >
+              </TableCell>
+              <TableCell>{new Date(key.createdAt).toLocaleDateString($locale, dateFormats.settings)}</TableCell>
+              <TableCell class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1">
                <TableButton action={Update} size="small" />
                <TableButton action={Delete} size="small" />
-              </td>
-            </tr>
+              </TableCell>
+            </TableRow>
          {/each}
-        </tbody>
-      </table>
+        </TableBody>
+      </Table>
    {/if}
  </div>
 </section>
--- a/web/src/lib/components/user-settings-page/user-usage-statistic.svelte
+++ b/web/src/lib/components/user-settings-page/user-usage-statistic.svelte
@@ -7,6 +7,7 @@
    type AlbumStatisticsResponseDto,
    type AssetStatsResponseDto,
  } from '@immich/sdk';
+  import { Heading, Table, TableBody, TableCell, TableHeader, TableHeading, TableRow } from '@immich/ui';
  import { onMount } from 'svelte';
  import { t } from 'svelte-i18n';

@@ -56,56 +57,42 @@
 </script>

 {#snippet row(viewName: string, stats: AssetStatsResponseDto)}
-  <tr
-    class="flex h-14 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
-  >
-    <td class="w-1/4 px-4 text-sm">{viewName}</td>
-    <td class="w-1/4 px-4 text-sm">{stats.images.toLocaleString($locale)}</td>
-    <td class="w-1/4 px-4 text-sm">{stats.videos.toLocaleString($locale)}</td>
-    <td class="w-1/4 px-4">{stats.total.toLocaleString($locale)}</td>
-  </tr>
+  <TableRow>
+    <TableCell class="w-1/4">{viewName}</TableCell>
+    <TableCell class="w-1/4">{stats.images.toLocaleString($locale)}</TableCell>
+    <TableCell class="w-1/4">{stats.videos.toLocaleString($locale)}</TableCell>
+    <TableCell class="w-1/4">{stats.total.toLocaleString($locale)}</TableCell>
+  </TableRow>
 {/snippet}

-<section class="my-6">
-  <p class="text-xs dark:text-white uppercase">{$t('photos_and_videos')}</p>
-  <div class="overflow-x-auto">
-    <table class="w-full text-start mt-4">
-      <thead
-        class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
-      >
-        <tr class="flex w-full place-items-center text-sm font-medium text-center">
-          <th class="w-1/4">{$t('view_name')}</th>
-          <th class="w-1/4">{$t('photos')}</th>
-          <th class="w-1/4">{$t('videos')}</th>
-          <th class="w-1/4">{$t('total')}</th>
-        </tr>
-      </thead>
-      <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
-        {@render row($t('timeline'), timelineStats)}
-        {@render row($t('favorites'), favoriteStats)}
-        {@render row($t('archive'), archiveStats)}
-        {@render row($t('trash'), trashStats)}
-      </tbody>
-    </table>
-  </div>
+<section class="my-6 w-full">
+  <Heading size="tiny">{$t('photos_and_videos')}</Heading>
+  <Table striped spacing="medium" class="mt-4">
+    <TableHeader>
+      <TableHeading class="w-1/4">{$t('view_name')}</TableHeading>
+      <TableHeading class="w-1/4">{$t('photos')}</TableHeading>
+      <TableHeading class="w-1/4">{$t('videos')}</TableHeading>
+      <TableHeading class="w-1/4">{$t('total')}</TableHeading>
+    </TableHeader>
+    <TableBody>
+      {@render row($t('timeline'), timelineStats)}
+      {@render row($t('favorites'), favoriteStats)}
+      {@render row($t('archive'), archiveStats)}
+      {@render row($t('trash'), trashStats)}
+    </TableBody>
+  </Table>

-  <div class="mt-6">
-    <p class="text-xs dark:text-white uppercase">{$t('albums')}</p>
-  </div>
-  <div class="overflow-x-auto">
-    <table class="w-full text-start mt-4">
-      <thead class="mb-4 flex h-12 w-full rounded-md border text-primary dark:border-immich-dark-gray bg-subtle">
-        <tr class="flex w-full place-items-center text-sm font-medium text-center">
-          <th class="w-1/2">{$t('owned')}</th>
-          <th class="w-1/2">{$t('shared')}</th>
-        </tr>
-      </thead>
-      <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
-        <tr class="flex h-14 w-full place-items-center text-center dark:text-immich-dark-fg bg-subtle/20">
-          <td class="w-1/2 px-4 text-sm">{albumStats.owned.toLocaleString($locale)}</td>
-          <td class="w-1/2 px-4 text-sm">{albumStats.shared.toLocaleString($locale)}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+  <Heading size="tiny" class="mt-8">{$t('albums')}</Heading>
+  <Table striped spacing="medium" class="mt-4">
+    <TableHeader>
+      <TableHeading class="w-1/2">{$t('owned')}</TableHeading>
+      <TableHeading class="w-1/2">{$t('shared')}</TableHeading>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableCell class="w-1/2">{albumStats.owned.toLocaleString($locale)}</TableCell>
+        <TableCell class="w-1/2">{albumStats.shared.toLocaleString($locale)}</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
 </section>
--- a/web/src/routes/admin/library-management/(list)/+layout.svelte
+++ b/web/src/routes/admin/library-management/(list)/+layout.svelte
@@ -8,7 +8,17 @@
  import { locale } from '$lib/stores/preferences.store';
  import { getBytesWithUnit } from '$lib/utils/byte-units';
  import { getLibrary, getLibraryStatistics, type LibraryResponseDto } from '@immich/sdk';
-  import { Button, CommandPaletteDefaultProvider } from '@immich/ui';
+  import {
+    Button,
+    CommandPaletteDefaultProvider,
+    Container,
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableHeading,
+    TableRow,
+  } from '@immich/ui';
  import type { Snippet } from 'svelte';
  import { t } from 'svelte-i18n';
  import { fade } from 'svelte/transition';
@@ -47,6 +57,15 @@
  };

  const { Create, ScanAll } = $derived(getLibrariesActions($t, libraries));
+
+  const classes = {
+    column1: 'w-4/12',
+    column2: 'w-4/12',
+    column3: 'w-2/12',
+    column4: 'w-2/12',
+    column5: 'w-2/12',
+    column6: 'w-2/12',
+  };
 </script>

 <OnEvents {onLibraryCreate} {onLibraryUpdate} {onLibraryDelete} />
@@ -54,51 +73,35 @@
 <CommandPaletteDefaultProvider name={$t('library')} actions={[Create, ScanAll]} />

 <AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[ScanAll, Create]}>
-  <section class="my-4">
+  <Container size="large" center class="my-4">
    <div class="flex flex-col items-center gap-2" in:fade={{ duration: 500 }}>
      {#if libraries.length > 0}
-        <table class="text-start">
-          <thead
-            class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
-          >
-            <tr class="grid grid-cols-6 w-full place-items-center">
-              <th class="text-center text-sm font-medium">{$t('name')}</th>
-              <th class="text-center text-sm font-medium">{$t('owner')}</th>
-              <th class="text-center text-sm font-medium">{$t('photos')}</th>
-              <th class="text-center text-sm font-medium">{$t('videos')}</th>
-              <th class="text-center text-sm font-medium">{$t('size')}</th>
-              <th class="text-center text-sm font-medium"></th>
-            </tr>
-          </thead>
-          <tbody class="block overflow-y-auto rounded-md border dark:border-immich-dark-gray">
+        <Table striped>
+          <TableHeader>
+            <TableHeading class={classes.column1}>{$t('name')}</TableHeading>
+            <TableHeading class={classes.column2}>{$t('owner')}</TableHeading>
+            <TableHeading class={classes.column3}>{$t('photos')}</TableHeading>
+            <TableHeading class={classes.column4}>{$t('videos')}</TableHeading>
+            <TableHeading class={classes.column5}>{$t('size')}</TableHeading>
+            <TableHeading class={classes.column6}></TableHeading>
+          </TableHeader>
+          <TableBody>
            {#each libraries as library (library.id + library.name)}
              {@const { photos, usage, videos } = statistics[library.id]}
              {@const [diskUsage, diskUsageUnit] = getBytesWithUnit(usage, 0)}
-              <tr
-                class="grid grid-cols-6 h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
-              >
-                <td class="text-ellipsis px-4 text-sm">{library.name}</td>
-                <td class="text-ellipsis px-4 text-sm">
-                  {owners[library.id].name}
-                </td>
-                <td class="text-ellipsis px-4 text-sm">
-                  {photos.toLocaleString($locale)}
-                </td>
-                <td class="text-ellipsis px-4 text-sm">
-                  {videos.toLocaleString($locale)}
-                </td>
-                <td class="text-ellipsis px-4 text-sm">
-                  {diskUsage}
-                  {diskUsageUnit}
-                </td>
-
-                <td class="flex gap-2 text-ellipsis px-4 text-sm">
+              <TableRow>
+                <TableCell class={classes.column1}>{library.name}</TableCell>
+                <TableCell class={classes.column2}>{owners[library.id].name}</TableCell>
+                <TableCell class={classes.column3}>{photos.toLocaleString($locale)}</TableCell>
+                <TableCell class={classes.column4}>{videos.toLocaleString($locale)}</TableCell>
+                <TableCell class={classes.column5}>{diskUsage} {diskUsageUnit}</TableCell>
+                <TableCell class={classes.column6}>
                  <Button size="small" onclick={() => handleViewLibrary(library)}>{$t('view')}</Button>
-                </td>
-              </tr>
+                </TableCell>
+              </TableRow>
            {/each}
-          </tbody>
-        </table>
+          </TableBody>
+        </Table>
      {:else}
        <EmptyPlaceholder
          text={$t('no_libraries_message')}
@@ -109,5 +112,5 @@

      {@render children?.()}
    </div>
-  </section>
+  </Container>
 </AdminPageLayout>
--- a/web/src/routes/admin/users/(list)/+layout.svelte
+++ b/web/src/routes/admin/users/(list)/+layout.svelte
@@ -5,7 +5,18 @@
  import { locale } from '$lib/stores/preferences.store';
  import { getByteUnitString } from '$lib/utils/byte-units';
  import { searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Button, CommandPaletteDefaultProvider, Container, Icon } from '@immich/ui';
+  import {
+    Button,
+    CommandPaletteDefaultProvider,
+    Container,
+    Icon,
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableHeading,
+    TableRow,
+  } from '@immich/ui';
  import { mdiInfinity } from '@mdi/js';
  import type { Snippet } from 'svelte';
  import { t } from 'svelte-i18n';
@@ -34,6 +45,13 @@
  };

  const { Create } = $derived(getUserAdminsActions($t));
+
+  const classes = {
+    column1: 'w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12',
+    column2: 'hidden sm:block w-3/12',
+    column3: 'hidden xl:block w-3/12 2xl:w-2/12',
+    column4: 'w-4/12 lg:w-3/12 xl:w-2/12',
+  };
 </script>

 <OnEvents
@@ -48,28 +66,19 @@

 <AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[Create]}>
  <Container center size="large">
-    <table class="my-5 w-full text-start">
-      <thead
-        class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
-      >
-        <tr class="flex w-full place-items-center">
-          <th class="w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12 text-center text-sm font-medium">{$t('email')}</th>
-          <th class="hidden sm:block w-3/12 text-center text-sm font-medium">{$t('name')}</th>
-          <th class="hidden xl:block w-3/12 2xl:w-2/12 text-center text-sm font-medium">{$t('has_quota')}</th>
-        </tr>
-      </thead>
-      <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
+    <Table class="mt-4" striped spacing="large">
+      <TableHeader>
+        <TableHeading class={classes.column1}>{$t('email')}</TableHeading>
+        <TableHeading class={classes.column2}>{$t('name')}</TableHeading>
+        <TableHeading class={classes.column3}>{$t('has_quota')}</TableHeading>
+      </TableHeader>
+
+      <TableBody>
        {#each users as user (user.id)}
-          <tr
-            class="flex h-20 overflow-hidden w-full place-items-center text-center dark:text-immich-dark-fg {user.deletedAt
-              ? 'bg-red-300 dark:bg-red-900'
-              : 'even:bg-subtle/20 odd:bg-subtle/80'}"
-          >
-            <td class="w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12 text-ellipsis break-all px-2 text-sm">
-              {user.email}
-            </td>
-            <td class="hidden sm:block w-3/12 text-ellipsis break-all px-2 text-sm">{user.name}</td>
-            <td class="hidden xl:block w-3/12 2xl:w-2/12 text-ellipsis break-all px-2 text-sm">
+          <TableRow color={user.deletedAt ? 'danger' : undefined}>
+            <TableCell class={classes.column1}>{user.email}</TableCell>
+            <TableCell class={classes.column2}>{user.name}</TableCell>
+            <TableCell class={classes.column3}>
              <div class="container mx-auto flex flex-wrap justify-center">
                {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
                  {getByteUnitString(user.quotaSizeInBytes, $locale)}
@@ -77,16 +86,14 @@
                  <Icon icon={mdiInfinity} size="16" />
                {/if}
              </div>
-            </td>
-            <td
-              class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-4/12 lg:w-3/12 xl:w-2/12 text-ellipsis break-all text-sm"
-            >
+            </TableCell>
+            <TableCell class={classes.column4}>
              <Button onclick={() => handleNavigateUserAdmin(user)}>{$t('view')}</Button>
-            </td>
-          </tr>
+            </TableCell>
+          </TableRow>
        {/each}
-      </tbody>
-    </table>
+      </TableBody>
+    </Table>

    {@render children?.()}
  </Container>