DataTable и основы работы с таблицами

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

Структура DataTable

Компонент DataTable строится вокруг трех основных элементов:

  1. columns — массив объектов, описывающих столбцы таблицы. Каждый объект содержит следующие ключи:

    • id — уникальный идентификатор столбца.
    • name — отображаемое имя столбца.
    • sortable (опционально) — возможность сортировки по этому столбцу (true/false).
    • filterable (опционально) — возможность фильтрации по этому столбцу (true/false).
    const columns = [
  { id: 'name', name: 'Имя', sortable: true },
  { id: 'age', name: 'Возраст', sortable: true },
  { id: 'email', name: 'Email' }
];

  2. rows — массив объектов, содержащих данные для каждой строки. Каждый объект должен содержать поля, соответствующие id столбцов.

    const rows = [
  { id: '1', name: 'Иван Иванов', age: 28, email: 'ivan@example.com' },
  { id: '2', name: 'Мария Петрова', age: 34, email: 'maria@example.com' }
];

  3. DataTableWrapper — оболочка для таблицы, которая управляет состоянием и передает необходимые свойства внутрь компонентов DataTable, TableHead, TableBody и TableRow.

    
  {({ rows, headers }) => (
    
      
    
    
      
    
  )}

Основные компоненты DataTable

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

Сортировка и фильтрация

Сортировка выполняется через свойство sortable в объекте столбца. Для реализации сортировки DataTable использует встроенные функции или кастомные обработчики:


  {({ rows, headers, sort }) => (
    
      
    

      

  )}

Фильтрация аналогично задается через свойство filterable и поддерживается фильтрацией по тексту или числовым диапазонам.

Выбор строк и взаимодействие с пользователем

DataTable поддерживает выделение строк через selection. Доступны следующие режимы:

  • single — можно выбрать только одну строку.
  • multi — выбор нескольких строк через чекбоксы.
  • none — выбор отключен.

Пример реализации выбора нескольких строк:


  {({ rows, headers, selectedRows }) => (
    
      
    

      

  )}

Пагинация

Для работы с большими наборами данных используется компонент Pagination. Он позволяет управлять количеством строк на странице и переключением между страницами:

DataTable интегрируется с Pagination через реактивные переменные, чтобы отображать только текущую страницу данных.

Кастомизация и расширение

DataTable можно расширять и настраивать под любые нужды:

  • Использовать slot для кастомных заголовков или ячеек.
  • Добавлять кнопки действий внутри ячеек (редактирование, удаление).
  • Поддерживать динамическое изменение колонок и строк без полной перерисовки таблицы.
  • Встраивать внешние компоненты Svelte, такие как селекты, переключатели или графики в ячейки.

Пример кастомной ячейки:

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

Для больших таблиц рекомендуется:

  • Использовать виртуализацию строк для рендеринга только видимой части данных.
  • Минимизировать сложные вычисления внутри слотов.
  • Сортировку и фильтрацию выполнять на уровне данных, а не DOM.

Реактивность и работа с Svelte

Все данные DataTable полностью реактивны. Любые изменения в массиве rows или columns автоматически обновляют таблицу. Это позволяет динамически добавлять, удалять или изменять данные без повторного рендеринга всей таблицы.

Оглавление