TableContainer и TableToolbar

TableContainer в библиотеке Carbon Components Svelte представляет собой обёртку для таблиц, обеспечивающую структурированное и адаптивное отображение данных. Он используется совместно с компонентом DataTable для управления интерфейсом таблицы, обеспечивая корректную работу прокрутки, адаптивной ширины колонок и стилей.

Основные свойства TableContainer

• title — заголовок таблицы. Используется для отображения на верхней панели контейнера.
• description — краткое описание содержимого таблицы. Отображается под заголовком.
• size — задаёт размер контейнера. Обычно принимает значения sm, md или lg.
• scrollable — логическое значение, определяющее, будет ли таблица прокручиваться внутри контейнера при превышении высоты.

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

  
    
В этом примере TableContainer оборачивает
DataTable, позволяя корректно отображать таблицу с
фиксированным заголовком и прокручиваемой областью данных.
TableToolbar
TableToolbar обеспечивает панель инструментов для
работы с таблицей: поиск, фильтры, экспорт данных и действия над
выбранными элементами. Он интегрируется с DataTable и
управляет состоянием инструментов через события и привязку данных.
Структура TableToolbar
TableToolbar состоит из нескольких ключевых компонентов:

TableToolbarContent — контейнер для элементов
панели инструментов.
TableToolbarSearch — поле поиска по содержимому
таблицы.
TableToolbarMenu — меню с действиями над выбранными
строками.
TableToolbarAction — кнопки действий, например,
экспорт или удаление.
Пример полной структуры:

  
    
    Экспорт
    
      Удалить выбранные
      Дублировать выбранные
    
  
Связь TableContainer и
TableToolbar
TableToolbar обычно размещается внутри TableContainer, позволяя
объединить визуальное оформление и функциональность:

  
    
      
      Добавить проект
    
  
  
    
В этом примере TableToolbar обеспечивает интерактивные
элементы управления над таблицей, а TableContainer
сохраняет корректное отображение и структуру.
Важные особенности
использования

Адаптивность: TableContainer
автоматически обрабатывает переполнение данных, обеспечивая
горизонтальную и вертикальную прокрутку.
Интеграция поиска: TableToolbarSearch
связывается с состоянием DataTable, позволяя динамически
фильтровать строки.
Выбранные строки: действия в
TableToolbarMenu могут работать только с выбранными
строками таблицы, используя события on:select и
on:deselect из DataTable.
Кастомизация: все элементы панели инструментов
можно стилизовать через пропсы и слоты, добавляя новые кнопки или
меню.
Практические рекомендации

Для больших таблиц использовать scrollable={true} в
TableContainer для сохранения удобства просмотра.
Для динамических данных важно связывать
TableToolbarSearch с состоянием rows, чтобы
фильтрация обновляла данные корректно.
Меню действий в TableToolbarMenu стоит выстраивать так,
чтобы оно отображалось только при наличии выделенных строк, используя
реактивные проверки состояния selectedRows.
Для сложных интерфейсов можно комбинировать несколько
TableToolbarAction и TableToolbarMenu для
разных категорий операций, обеспечивая структурированное
управление.
Примеры расширенного
использования

Сортировка и фильтры

  
    
    
       applyFilter('active')}>Активные
       applyFilter('completed')}>Завершенные
    
  


  

Интерактивные действия над выделенными
строками
 deleteSelected(selectedRows)}>Удалить
 exportSelected(selectedRows)}>Экспорт
Эти практики позволяют строить мощные и гибкие таблицы с богатой
интерактивностью, сохраняя согласованность интерфейса и соответствие
стилю Carbon Design System.

        

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

                Оглавление
            
                

                            Сортировка данных в таблице »