TableBatchActions для массовых действий

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

Структура компонента

Компонент TableBatchActions состоит из двух основных элементов:

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

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

<TableBatchActions
  bind:selectedRows
  totalSelected={selectedRows.length}
>
  <TableBatchAction
    on:click={() => deleteRows(selectedRows)}
    renderIcon={Delete16}
  >
    Удалить
  </TableBatchAction>
  <TableBatchAction
    on:click={() => exportRows(selectedRows)}
    renderIcon={Download16}
  >
    Экспорт
  </TableBatchAction>
</TableBatchActions>

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

  • bind:selectedRows — связывает массив выделенных строк с компонентом.
  • totalSelected — отображает количество выбранных элементов.
  • TableBatchAction — кнопка действия с возможностью добавить иконку через renderIcon.

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

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

<script>
  import { DataTable, TableBatchActions, TableBatchAction } from 'carbon-components-svelte';
  import { Delete16 } from '@carbon/icons-svelte';
  
  let rows = [
    { id: '1', name: 'Документ 1', date: '2026-03-21' },
    { id: '2', name: 'Документ 2', date: '2026-03-20' },
  ];
  
  let selectedRows = [];
  
  function deleteRows(rowsToDelete) {
    rows = rows.filter(row => !rowsToDelete.includes(row));
    selectedRows = [];
  }
</script>

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

  • selectedRows автоматически обновляется при выборе или снятии выделения.
  • После выполнения действия массив selectedRows очищается, чтобы панель массовых действий скрывалась.

Настройка отображения панели

Панель массовых действий может быть настроена по нескольким параметрам:

  • totalSelected — число выбранных строк.
  • shouldShowBatchActions — логическое значение для явного управления видимостью панели.
  • on:cancel — событие для обработки отмены выбора.

Пример с кастомной логикой отображения:

<TableBatchActions
  bind:selectedRows
  totalSelected={selectedRows.length}
  shouldShowBatchActions={selectedRows.length > 0}
  on:cancel={() => selectedRows = []}
>
  <TableBatchAction on:click={() => deleteRows(selectedRows)}>
    Удалить
  </TableBatchAction>
</TableBatchActions>

Интеграция с DataTable

TableBatchActions тесно связан с компонентом DataTable. Для корректной работы выделения строк необходимо:

  • Использовать DataTable с включенной поддержкой выбора (selectionEnabled).
  • Связать массив selectedRows с таблицей через bind:selectedRows.

Пример:

<DataTable {rows} {headers} selectionEnabled bind:selectedRows>
  <TableBatchActions bind:selectedRows totalSelected={selectedRows.length}>
    <TableBatchAction on:click={() => deleteRows(selectedRows)}>Удалить</TableBatchAction>
  </TableBatchActions>
</DataTable>

Добавление иконок к действиям

Каждое действие в панели может содержать иконку. В Carbon Svelte используется свойство renderIcon:

<TableBatchAction renderIcon={Delete16} on:click={() => deleteRows(selectedRows)}>
  Удалить
</TableBatchAction>

Иконки импортируются из пакета @carbon/icons-svelte. Можно использовать любую из стандартных иконок Carbon.

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

  • Всегда очищать selectedRows после выполнения действия, чтобы скрыть панель.
  • Обеспечивать реактивность состояния selectedRows для синхронизации с таблицей.
  • Использовать shouldShowBatchActions для тонкой настройки отображения панели.
  • Добавлять иконки к кнопкам действий для улучшения визуального восприятия.

Расширенные возможности

  1. Кастомная панель — можно создавать собственный компонент панели массовых действий, используя <TableBatchActions> как контейнер.
  2. Динамическое количество действий — количество кнопок может изменяться в зависимости от выбранных элементов.
  3. Поддержка модальных окон — интеграция с Modal для подтверждения удаления или других критических операций.

Пример с подтверждением:

<TableBatchAction on:click={() => showModal = true}>Удалить</TableBatchAction>

<Modal bind:open={showModal} modalHeading="Подтверждение удаления">
  Вы уверены, что хотите удалить выбранные строки?
  <Button on:click={() => { deleteRows(selectedRows); showModal = false; }}>Да</Button>
  <Button kind="secondary" on:click={() => showModal = false}>Нет</Button>
</Modal>

Итоговые моменты по компоненту

  • TableBatchActions является обязательным элементом для массовых операций в таблицах Carbon Svelte.
  • Реактивная привязка к selectedRows обеспечивает автоматическое обновление состояния.
  • Панель действий легко настраивается по видимости, кнопкам и иконкам.
  • Интеграция с модальными окнами и кастомными действиями делает компонент универсальным инструментом для работы с большими таблицами данных.
Оглавление