Skip to content

Выбор строк, ячеек и активация

Selection и activation — разные механики. Selection хранит текущий набор строк, а activation сообщает о намерении открыть или выполнить основное действие.

vue
<Table
  ref="orders"
  :rows="rows"
  row-key="id"
  selection-mode="multiple"
  selection-trigger="both"
  cell-selection-mode="single"
>
  <Column key="number" title="Номер" />
  <Column key="status" title="Статус" />
</Table>

Выделение строк

РежимПоведение
noneСтроки не выбираются
singleВ selection может находиться только одна строка
multipleВ selection может находиться несколько строк

Способ изменения selection задаёт отдельный атрибут selection-trigger:

ЗначениеПоведение
autoИспользуется стандартный UX активного адаптера
controlSelection меняется только control-элементом в левой колонке
rowSelection меняется кликом или Space на строке
bothДоступны control и взаимодействие со строкой

При multiple control отображается как checkbox, а при single — как одиночный переключатель. Header checkbox в multiple меняет выбор строк текущей страницы или текущего видимого набора. selection-mode="none" отключает selection независимо от trigger.

Для row и both обычный клик в multiple начинает новый selection, Cmd/Ctrl переключает строку, а Shift выбирает диапазон. Space выполняет то же действие с клавиатуры. Для control используется стандартная клавиатурная семантика checkbox или radio. Если строка исчезает из rows, runtime удаляет её из selection и публикует изменение.

Shift выбирает диапазон в текущем отображаемом наборе: внутри текущей страницы для paging="pages" и во всей отсортированной коллекции для paging="virtual".

selectionChanged содержит полный новый selection и delta:

ts
{
  tableId: string
  mode: 'single' | 'multiple'
  selectedRowIds: string[]
  selectedRows: Record<string, unknown>[]
  addedRowIds: string[]
  removedRowIds: string[]
}

Selection живёт только внутри смонтированного Table и не входит в сохраняемое состояние. Для долгоживущего бизнес-выбора обработайте Event и сохраните identity во внешнем Store.

Control и строка не создают два независимых selection. При любом trigger выбранные строки получают одинаковое смысловое и визуальное состояние: aria-selected, selected-стиль, selectionChanged и доступность групповых Actions. Конкретные цвета hover и selected задаются темой или CSS активного адаптера.

Выбор одной ячейки

Выбор конкретной ячейки включается отдельным атрибутом cell-selection-mode="single":

vue
<Table
  id="orders"
  ref="orders"
  :rows="rows"
  row-key="id"
  selection-mode="multiple"
  selection-trigger="both"
  cell-selection-mode="single"
>
  <Column key="number" title="Номер" />
  <Column key="status" title="Статус" />
</Table>
РежимПоведение
noneЯчейки не выбираются; значение по умолчанию
singleВ Table находится одна выбранная ячейка

Identity ячейки состоит из стабильного rowId и columnKey. Выбор сохраняется при сортировке, смене страницы и виртуализации. Если строка или колонка исчезает, runtime очищает выбор и публикует новое событие.

Выбор строк и выбор ячейки независимы. Оба режима можно включить одновременно:

Row selectionCell selectionКлик по обычной области ячейки
nonesingleВыбирается только ячейка
singlesingleВыбираются ячейка и её строка
multiplesingleОбычный клик заменяет набор строк её строкой; Cmd/Ctrl добавляет строку; выбранная ячейка остаётся одна

Совместное изменение строки выполняется только при selection-trigger="row" или both. При control клик меняет ячейку, а строки по-прежнему выбираются только control-элементами. Shift сохраняет диапазонный выбор строк.

Клик по обычной области ячейки и клавиши Enter/Space выбирают ячейку. Интерактивные элементы внутри неё — input, button, link, select, editor — обрабатывают своё действие и не меняют выбор автоматически.

Выбранная ячейка внутри выбранной строки получает одновременно semantic states row-selected и cell-selected. Это позволяет отдельно стилизовать строку и поверх неё — конкретную ячейку.

cellSelectionChanged содержит новое и предыдущее значение:

ts
type SelectedCell = {
  rowId: string
  rowIndex: number
  row: Record<string, unknown>
  columnKey: string
  value: unknown
}

type CellSelectionChanged = {
  tableId: string
  selectedCell: SelectedCell | null
  previousCell: SelectedCell | null
}

Настройка цветов, outline и semantic states описана в разделе Стили и представление.

Сброс через Escape

Когда фокус находится на строке, ячейке или поверхности Table, Escape очищает и выбранные строки, и выбранную ячейку. Фокус остаётся внутри таблицы. Если selection уже пуст, Events не публикуются.

Вложенный интерактивный элемент имеет приоритет: editor сначала отменяет редактирование, menu закрывается, а input/select/button не передают свою обработанную клавишу общей очистке Table. Настройка этой клавиши пока не предусмотрена.

При очистке публикуются только реально изменившиеся Events: selectionChanged с пустыми selectedRowIds и cellSelectionChanged с selectedCell: null. Полный каталог payload находится в разделе События, порты и Actions.

Activation

Двойной клик или Enter публикует rowActivated:

ts
{
  tableId: string
  rowId: string
  rowIndex: number
  row: Record<string, unknown>
  columnKey: string | null
  activation: 'pointer' | 'keyboard'
}

Event ничего не открывает сам. Component SFC может связать его с Action или переопубликовать наружу через definePorts.

Контекстное меню

Правый клик публикует отдельный rowContextMenuRequested и не изменяет selection. Это предотвращает неявную смену выбранных строк перед выполнением menu Action.