TableHeader для заголовков столбцов

Компонент TableHeader является ключевым элементом при создании таблиц в Carbon Components Svelte, обеспечивая структурированное отображение заголовков столбцов и управление их поведением, включая сортировку, доступность и стилизацию.

Основной синтаксис

<TableHeader>
  <TableHeaderRow>
    <TableHeaderCell sortable={true} sortDirection="none">Имя</TableHeaderCell>
    <TableHeaderCell sortable={true} sortDirection="none">Возраст</TableHeaderCell>
    <TableHeaderCell>Город</TableHeaderCell>
  </TableHeaderRow>
</TableHeader>
  • <TableHeader> — обёртка для всех заголовков столбцов.
  • <TableHeaderRow> — строка заголовков, поддерживает одну или несколько строк.
  • <TableHeaderCell> — отдельный заголовок столбца.

Ключевые свойства для TableHeaderCell:

Свойство Тип Описание
sortable boolean Делает столбец сортируемым.
sortDirection string Направление сортировки: "none", "ascending", "descending".
scope string Устанавливает семантический scope для <th>: "col" или "row".
abbr string Аббревиатура заголовка для экранных читалок.
on:click function Позволяет определить кастомное поведение при клике на заголовок.

Сортировка столбцов

Сортировка в TableHeader реализуется через комбинацию sortable и sortDirection.

Пример:

<script>
  import { TableHeader, TableHeaderRow, TableHeaderCell } from "carbon-components-svelte";
  let sortBy = '';
  let sortDir = 'none';

  function handleSort(column) {
    if (sortBy === column) {
      sortDir = sortDir === 'ascending' ? 'descending' : 'ascending';
    } else {
      sortBy = column;
      sortDir = 'ascending';
    }
  }
</script>

<TableHeader>
  <TableHeaderRow>
    <TableHeaderCell 
      sortable={true} 
      sortDirection={sortBy === 'name' ? sortDir : 'none'}
      on:click={() => handleSort('name')}
    >Имя</TableHeaderCell>
    <TableHeaderCell 
      sortable={true} 
      sortDirection={sortBy === 'age' ? sortDir : 'none'}
      on:click={() => handleSort('age')}
    >Возраст</TableHeaderCell>
  </TableHeaderRow>
</TableHeader>

Особенности:

  • sortDirection="none" отображает отсутствие активной сортировки.
  • При клике на уже отсортированный столбец направление меняется.
  • Можно использовать собственные функции сортировки для данных таблицы.

Множественные строки заголовков

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

<TableHeader>
  <TableHeaderRow>
    <TableHeaderCell rowspan="2">ID</TableHeaderCell>
    <TableHeaderCell colspan="2">Личные данные</TableHeaderCell>
  </TableHeaderRow>
  <TableHeaderRow>
    <TableHeaderCell>Имя</TableHeaderCell>
    <TableHeaderCell>Фамилия</TableHeaderCell>
  </TableHeaderRow>
</TableHeader>
  • rowspan и colspan позволяют объединять ячейки по строкам и столбцам.
  • Использование нескольких <TableHeaderRow> создаёт визуально структурированные заголовки.

Доступность и семантика

  • Атрибут scope="col" указывает, что ячейка является заголовком столбца.
  • Атрибут abbr сокращает длинные заголовки для экранных читалок.
  • Сортируемые столбцы автоматически получают aria-атрибуты (aria-sort) для улучшения доступности.

Пример с доступностью:

<TableHeader>
  <TableHeaderRow>
    <TableHeaderCell sortable={true} sortDirection="none" scope="col" abbr="Full Name">
      Полное имя
    </TableHeaderCell>
  </TableHeaderRow>
</TableHeader>

Стилизация и темы

  • Компонент поддерживает стандартную Carbon-тему.

  • Для кастомной стилизации можно использовать CSS-переменные Carbon:

    • --cds-table-header-background
    • --cds-table-header-color
    • --cds-table-header-font-size

  • Можно добавлять классы через class для каждой ячейки или строки заголовков.

Полезные рекомендации

  • Всегда указывать scope="col" для всех заголовков столбцов.
  • Использовать sortable только там, где требуется сортировка.
  • Для сложных таблиц с группировкой заголовков использовать несколько <TableHeaderRow> и управлять rowspan/colspan.
  • Обновлять sortDirection синхронно с логикой сортировки данных таблицы.

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

Оглавление