Selectable rows и выбор строк

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

Подключение и базовая структура

Для начала необходимо импортировать таблицу и связанные компоненты из пакета carbon-components-svelte:

<script>
  import { DataTable, Table, TableHead, TableBody, TableRow, TableCell, TableHeader } from 'carbon-components-svelte';
  
  let rows = [
    { id: '1', name: 'Alice', role: 'Developer' },
    { id: '2', name: 'Bob', role: 'Designer' },
    { id: '3', name: 'Charlie', role: 'Manager' }
  ];

  let headers = [
    { key: 'name', header: 'Имя' },
    { key: 'role', header: 'Роль' }
  ];
</script>

Основной компонент таблицы оборачивается в DataTable, который обеспечивает управление состоянием строк, включая выбор, сортировку и фильтрацию.

<DataTable {rows} {headers} selectionMode="multi">
  <Table slot="table">
    <TableHead>
      <TableRow>
        <TableHeader selectAll={true} />
        {#each headers as header}
          <TableHeader>{header.header}</TableHeader>
        {/each}
      </TableRow>
    </TableHead>
    <TableBody>
      {#each rows as row}
        <TableRow row={row} selected={row.selected}>
          <TableCell sel ect />
          <TableCell>{row.name}</TableCell>
          <TableCell>{row.role}</TableCell>
        </TableRow>
      {/each}
    </TableBody>
  </Table>
</DataTable>

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

  • selectionMode="multi" включает множественный выбор. Для одиночного выбора используется "single".
  • Атрибут selectAll={true} добавляет чекбокс для выбора всех строк.
  • Свойство selected у TableRow контролирует текущее состояние строки.

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

Выбор строк можно отслеживать через событие selected на DataTable. Оно возвращает массив выбранных элементов:

<DataTable {rows} {headers} selectionMode="multi" on:selected={(e) => console.log(e.detail.selectedRows)}>
  ...
</DataTable>

Свойство row.selected позволяет динамически управлять состоянием отдельной строки.

function toggleRowSelection(rowId) {
  const row = rows.find(r => r.id === rowId);
  row.selected = !row.selected;
}

Пользовательские стили и классы для выбранных строк

Для визуального выделения выбранных строк можно использовать CSS-классы. По умолчанию Carbon добавляет класс bx--data-table--selected. Дополнительно можно определить свои стили:

.selected-row {
  background-color: #e0f0ff;
  font-weight: bold;
}

Применение к строке через class:selected-row={row.selected}:

<TableRow row={row} selected={row.selected} class:selected-row={row.selected}>
  <TableCell select />
  <TableCell>{row.name}</TableCell>
  <TableCell>{row.role}</TableCell>
</TableRow>

Работа с группами строк и вложенными данными

В Carbon Components Svelte можно комбинировать выбор строк с row grouping. Для этого используется вложенная структура rows, где дочерние элементы также могут быть selectable.

let rows = [
  {
    id: '1',
    name: 'Development Team',
    children: [
      { id: '1-1', name: 'Alice', role: 'Frontend' },
      { id: '1-2', name: 'Bob', role: 'Backend' }
    ]
  }
];

В этом случае DataTable автоматически поддерживает выбор всей группы, если активирован selectAll для родительской строки.

Интеграция с формами и внешними состояниями

Выбор строк часто используется для передачи данных в форму или API. Состояние выделения можно хранить в Svelte store:

import { writable } fr om 'svelte/store';

export const selectedRows = writable([]);

Подписка и обновление:

<DataTable {rows} {headers} selectionMode="multi" on:selected={(e) => selectedRows.set(e.detail.selectedRows)}>
  ...
</DataTable>

Это позволяет использовать выбранные строки в других компонентах приложения, например, для массового редактирования или удаления.

Доступность и клавиатурная навигация

Carbon Components Svelte обеспечивает стандартную доступность:

  • Чекбоксы и радиокнопки поддерживают навигацию через Tab.
  • Выбор через клавиши Space или Enter.
  • Атрибут aria-selected обновляется автоматически для каждой строки.

Советы по оптимизации больших таблиц

  1. Lazy loading — загружать данные по мере прокрутки.
  2. Memoизация строк — для предотвращения лишних ререндеров при обновлении выбора.
  3. Использование store — централизованное управление выбранными строками упрощает взаимодействие с другими компонентами.

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

Оглавление