Expandable rows для раскрывающихся строк

Expandable Rows — это компонент таблицы, который позволяет создавать строки с возможностью раскрытия дополнительной информации. В Carbon Components Svelte они реализованы с учётом реактивности Svelte и поддерживают все возможности стандартного стиля IBM Carbon Design System.

Основная структура компонента

Для использования раскрывающихся строк в таблице применяются компоненты:

  • DataTable
  • Table
  • TableHead
  • TableBody
  • TableRow
  • TableCell
  • ExpandableRow

Пример базовой структуры:


  
      
        {#each headers as header}
          {header.header}
        {/each}
      
    
      {#each rows as row}
        
          {row.id}
          {row.name}
          {row.status}
          {row.details}
        
      {/each}

Ключевые моменты:

  • Атрибут slot="expanded" используется для контента, который будет виден только при раскрытии строки.
  • Свойство row передается внутрь ExpandableRow для синхронизации данных.
  • Любые компоненты внутри ExpandableRow ведут себя как обычные ячейки таблицы, сохраняя стиль Carbon.

Управление состоянием раскрытия

Состояние каждой строки управляется через внутреннюю переменную expanded. Можно контролировать раскрытие программно:



 toggleRow(row.id)}>
  ...

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

  • expanded принимает булево значение.
  • Событие toggle позволяет реагировать на клики пользователя по иконке раскрытия.
  • Для массового раскрытия можно использовать методы обновления Set или массивов с реактивной привязкой.

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

Carbon Components Svelte автоматически применяет стандартные стили Carbon. Для настройки внешнего вида:

  • Использовать class на ExpandableRow для дополнительных стилей.
  • Применять Svelte-переменные CSS, например:



  ...
  • Расширение CSS-переменных Carbon позволяет менять цвета, отступы и шрифты без модификации библиотечных файлов.

Асинхронная загрузка данных

Раскрывающиеся строки часто используют для отображения дополнительной информации, которую удобно загружать динамически. Подход с await в Svelte:


  {row.name}
  
    {#await fetchDetails(row.id) then details}
      
{details.description}

    {:catch error}
      
Ошибка загрузки

    {:then}
      
Загрузка...

    {/await}

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

  • Асинхронный контент не блокирует рендер таблицы.
  • Carbon сохраняет корректное отображение раскрытия даже при динамическом контенте.
  • Можно комбинировать с анимацией, чтобы раскрытие выглядело плавно.

Работа с событиями и интеграция с формами

ExpandableRow можно использовать для интеграции с формами внутри раскрывающегося блока:


  {row.name}

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

  • Любые интерактивные элементы внутри slot="expanded" работают как в обычной Svelte-компонентной логике.
  • Можно использовать bind:value и реактивные переменные для мгновенного обновления данных таблицы.

Рекомендации по производительности

  • Использовать each с key={row.id} для оптимизации рендера.
  • При больших таблицах скрывать неактивные раскрывающиеся строки через if вместо CSS display: none.
  • Минимизировать сложные вычисления в slot="expanded" и выполнять их асинхронно.

Комбинирование с другими компонентами Carbon

  • ExpandableRow совместим с Checkbox, Button, Tooltip.
  • Можно строить сложные таблицы с вложенными формами, графиками или списками.
  • Поддерживает адаптивный дизайн и корректно отображается на разных разрешениях экрана.
Оглавление