Table компоненты

Table-компоненты в SvelteKit являются мощным инструментом для отображения структурированных данных в веб-приложениях. Они предоставляют разработчику возможность быстро создавать интерактивные, стилизованные и адаптивные таблицы с поддержкой сортировки, фильтрации, пагинации и кастомных рендеров ячеек.

В SvelteKit UI библиотеках, таких как Svelte Material UI, Skeleton UI, Flowbite-Svelte, таблицы строятся на основе компонентов с реактивными свойствами, что позволяет динамически обновлять данные без перезагрузки страницы.

Структура Table компонента

Типичная таблица состоит из следующих элементов:

  • <Table> – контейнер таблицы, задающий базовую структуру и стили.
  • <TableHead> – блок заголовков колонок. Позволяет определять заголовки и их порядок.
  • <TableBody> – основной блок данных. Является контейнером для строк таблицы.
  • <TableRow> – отдельная строка таблицы.
  • <TableCell> – ячейка таблицы, которая может содержать текст, ссылки, кнопки или другие компоненты.

Пример базовой таблицы:

<script>
  import { Table, TableHead, TableBody, TableRow, TableCell } from 'sveltekit-ui';
  
  let users = [
    { id: 1, name: 'Иван', email: 'ivan@example.com' },
    { id: 2, name: 'Мария', email: 'maria@example.com' },
    { id: 3, name: 'Алексей', email: 'alex@example.com' }
  ];
</script>

<Table>
  <TableHead>
    <TableRow>
      <TableCell>ID</TableCell>
      <TableCell>Имя</TableCell>
      <TableCell>Email</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    {#each users as user}
      <TableRow>
        <TableCell>{user.id}</TableCell>
        <TableCell>{user.name}</TableCell>
        <TableCell>{user.email}</TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

Реактивные данные и сортировка

SvelteKit позволяет использовать реактивные переменные для динамического обновления таблицы. В сочетании с UI библиотеками можно реализовать сортировку по колонкам.

Пример сортировки:

<script>
  import { Table, TableHead, TableBody, TableRow, TableCell } from 'sveltekit-ui';

  let users = [
    { id: 1, name: 'Иван', email: 'ivan@example.com' },
    { id: 2, name: 'Мария', email: 'maria@example.com' },
    { id: 3, name: 'Алексей', email: 'alex@example.com' }
  ];

  let sortKey = 'id';
  let ascending = true;

  $: sortedUsers = [...users].sort((a, b) => {
    if (a[sortKey] < b[sortKey]) return ascending ? -1 : 1;
    if (a[sortKey] > b[sortKey]) return ascending ? 1 : -1;
    return 0;
  });

  function toggleSort(key) {
    if (sortKey === key) {
      ascending = !ascending;
    } else {
      sortKey = key;
      ascending = true;
    }
  }
</script>

<Table>
  <TableHead>
    <TableRow>
      <TableCell on:click={() => toggleSort('id')}>ID</TableCell>
      <TableCell on:click={() => toggleSort('name')}>Имя</TableCell>
      <TableCell on:click={() => toggleSort('email')}>Email</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    {#each sortedUsers as user}
      <TableRow>
        <TableCell>{user.id}</TableCell>
        <TableCell>{user.name}</TableCell>
        <TableCell>{user.email}</TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

Ключевой момент: использование реактивного $: позволяет автоматически пересортировывать таблицу при изменении ключа сортировки или порядка.

Фильтрация и поиск

Фильтрация данных часто используется вместе с таблицами для упрощения поиска по большим наборам данных.

<script>
  let query = '';
  $: filteredUsers = users.filter(user =>
    user.name.toLowerCase().includes(query.toLowerCase()) ||
    user.email.toLowerCase().includes(query.toLowerCase())
  );
</script>

<input type="text" placeholder="Поиск..." bind:value={query} />

<Table>
  <TableHead>
    <TableRow>
      <TableCell>ID</TableCell>
      <TableCell>Имя</TableCell>
      <TableCell>Email</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    {#each filteredUsers as user}
      <TableRow>
        <TableCell>{user.id}</TableCell>
        <TableCell>{user.name}</TableCell>
        <TableCell>{user.email}</TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

Использование реактивной переменной query обеспечивает мгновенное обновление отображаемых строк таблицы при вводе текста.

Пагинация и виртуализация

Для больших наборов данных UI библиотеки предлагают встроенные решения для пагинации и виртуализации строк, что значительно повышает производительность.

  • Пагинация – разбивает данные на страницы с кнопками «Следующая» и «Предыдущая».
  • Виртуализация – рендерит только видимые строки таблицы, что уменьшает нагрузку на DOM при тысячах записей.

Пример простой пагинации:

<script>
  let page = 1;
  let pageSize = 2;
  $: paginatedUsers = users.slice((page - 1) * pageSize, page * pageSize);

  function nextPage() {
    if (page * pageSize < users.length) page += 1;
  }

  function prevPage() {
    if (page > 1) page -= 1;
  }
</script>

<Table>
  <TableHead>
    <TableRow>
      <TableCell>ID</TableCell>
      <TableCell>Имя</TableCell>
      <TableCell>Email</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    {#each paginatedUsers as user}
      <TableRow>
        <TableCell>{user.id}</TableCell>
        <TableCell>{user.name}</TableCell>
        <TableCell>{user.email}</TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

<button on:click={prevPage} disabled={page === 1}>Назад</button>
<button on:click={nextPage} disabled={page * pageSize >= users.length}>Вперед</button>

Кастомизация ячеек и рендеринг компонентов

Table-компоненты в SvelteKit UI libs позволяют вставлять внутрь ячеек любые компоненты: кнопки, аватары, иконки, чекбоксы.

Пример: добавление кнопки действия в каждой строке:

<TableBody>
  {#each users as user}
    <TableRow>
      <TableCell>{user.id}</TableCell>
      <TableCell>{user.name}</TableCell>
      <TableCell>{user.email}</TableCell>
      <TableCell>
        <button on:click={() => alert(`Редактирование ${user.name}`)}>Редактировать</button>
      </TableCell>
    </TableRow>
  {/each}
</TableBody>

Важно учитывать, что кастомные ячейки остаются реактивными и могут содержать вложенные компоненты с собственными событиями.

Стилизация и адаптивность

Большинство SvelteKit UI библиотек предоставляют встроенные классы для цветов, границ, тени, hover-эффектов и адаптивного поведения на мобильных устройствах.

  • Hover-эффекты делают строки интерактивными.
  • Sticky-заголовки позволяют фиксировать верх таблицы при скролле.
  • Responsive Tables автоматически скрывают или перестраивают колонки на узких экранах.

Пример использования адаптивной таблицы:

<Table class="responsive">
  ...
</Table>

Ключевая идея: комбинирование встроенных стилей библиотеки и кастомных классов Tailwind или CSS позволяет создавать уникальные, удобные для пользователя таблицы.

Эти принципы охватывают полный спектр работы с Table компонентами в SvelteKit UI библиотеках: базовая структура, реактивные данные, сортировка, фильтрация, пагинация, кастомизация ячеек и адаптивная стилизация. Такой подход позволяет создавать сложные, интерактивные таблицы с минимальным количеством кода, сохраняя высокую производительность и удобство разработки.

Оглавление