Table, TableHead, TableBody, TableRow, TableCell

Компоненты Table, TableHead, TableBody, TableRow, TableCell позволяют создавать сложные и адаптивные таблицы с использованием возможностей библиотеки Carbon Components Svelte. Эти компоненты соответствуют стандартам дизайна Carbon и обеспечивают консистентный интерфейс и функциональность.

Table

Компонент <Table> является контейнером для всей таблицы. Он обеспечивает базовую структуру и стилизацию, включая полосатость строк, сортировку и поддержку выбора строк. Основные свойства:

  • size – определяет размер таблицы ('sm' | 'md' | 'lg'). По умолчанию 'md'.
  • sortable – включает возможность сортировки столбцов.
  • selection – включает режим выбора строк.
  • compact – делает таблицу более компактной, уменьшает отступы и размеры шрифта.

Пример использования:

<Table size="lg" sortable selection>
  <!-- Содержимое таблицы -->
</Table>

TableHead

Компонент <TableHead> определяет заголовочную часть таблицы. Он содержит строки заголовка, каждая из которых состоит из ячеек <TableCell>. В заголовке можно активировать сортировку для отдельных столбцов.

  • Свойство sortable в <TableCell> – указывает, что столбец поддерживает сортировку.
  • Состояние сортировки управляется через свойства sortDirection ('ascending' | 'descending' | null).

Пример:

<TableHead>
  <TableRow>
    <TableCell sortable sortDirection={sortColumn === 'name' ? sortDirection : null}>
      Имя
    </TableCell>
    <TableCell>
      Возраст
    </TableCell>
    <TableCell>
      Город
    </TableCell>
  </TableRow>
</TableHead>

TableBody

Компонент <TableBody> содержит строки данных таблицы. Внутри него располагаются компоненты <TableRow>, которые, в свою очередь, содержат <TableCell> с содержимым.

  • Можно использовать динамическую генерацию строк через #each.
  • Поддерживает выделение строк через свойство selected.

Пример:

<TableBody>
  {#each users as user}
    <TableRow selected={user.id === selectedUserId}>
      <TableCell>{user.name}</TableCell>
      <TableCell>{user.age}</TableCell>
      <TableCell>{user.city}</TableCell>
    </TableRow>
  {/each}
</TableBody>

TableRow

Компонент <TableRow> представляет отдельную строку таблицы. Основные возможности:

  • selected – выделяет строку.
  • on:click – позволяет отслеживать выбор строки.
  • Может содержать как данные, так и интерактивные элементы (кнопки, ссылки, чекбоксы).

Пример:

<TableRow on:click={() => handleRowClick(user.id)} selected={user.id === selectedId}>
  <TableCell>{user.name}</TableCell>
  <TableCell>{user.role}</TableCell>
</TableRow>

TableCell

Компонент <TableCell> используется для отображения отдельных ячеек в строках и заголовках. Основные свойства:

  • header – делает ячейку заголовочной (для <TableRow> внутри <TableHead>).
  • sortable – указывает, что ячейка поддерживает сортировку.
  • colspan и rowspan – позволяют объединять ячейки по горизонтали и вертикали.
  • truncate – сокращает длинный текст с многоточием.

Пример:

<TableCell header>
  Название
</TableCell>

<TableCell colspan={2}>
  Объединённая ячейка
</TableCell>

Работа с динамическими данными

Использование Carbon Components Svelte позволяет легко интегрировать таблицы с динамическими данными из массивов или API. При этом рекомендуется:

  • Для больших таблиц использовать виртуализацию через сторонние библиотеки.
  • Управлять сортировкой и фильтрацией на уровне состояния Svelte.
  • Сохранять выделение строк через двустороннюю привязку переменных.

Пример динамического создания таблицы:

<script>
  let columns = ['Имя', 'Возраст', 'Город'];
  let users = [
    { name: 'Иван', age: 30, city: 'Москва' },
    { name: 'Анна', age: 25, city: 'Санкт-Петербург' }
  ];
</script>

<Table>
  <TableHead>
    <TableRow>
      {#each columns as col}
        <TableCell>{col}</TableCell>
      {/each}
    </TableRow>
  </TableHead>
  <TableBody>
    {#each users as user}
      <TableRow>
        <TableCell>{user.name}</TableCell>
        <TableCell>{user.age}</TableCell>
        <TableCell>{user.city}</TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

Стилизация и кастомизация

Carbon Components Svelte предоставляет готовые классы для адаптивного и доступного отображения таблиц. Дополнительные возможности:

  • Полосатость строк через striped.
  • Подсветка при наведении с помощью hover.
  • Интеграция с компонентами формы, например, чекбоксы для выбора строк.

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

<Table striped hover>
  <!-- TableHead и TableBody -->
</Table>

Этот подход к работе с компонентами таблицы обеспечивает полное соответствие стандартам Carbon, удобное управление данными и гибкость при построении сложных интерфейсов в Svelte.

Оглавление