SelectedRowsActions

Компонент SelectedRowsActions — это плавающая панель действий, которая появляется при выборе строк таблицы. Предоставляет кнопки для удаления, сброса выделения и дополнительные действия через выпадающее меню.

Обзор

  • Основное назначение: массовые операции над выбранными строками таблицы.
  • Ключевые возможности:
    • Отображение количества выбранных строк.
    • Кнопка удаления с индикатором загрузки.
    • Кнопка сброса выделения.
    • Выпадающее меню с дополнительными действиями (экспорт CSV, PDF, печать).
    • Адаптивный дизайн: на мобильных — только иконки, на десктопах — иконки с текстом.
    • Автоматическое скрытие, если нет выбранных строк.

API компонента

Props

ПропТипПо умолчаниюОписание
tableObject(обязательный)Экземпляр таблицы TanStack Table. Должен содержать методы getIsSomeRowsSelected(), getIsAllRowsSelected(), getSelectedRowModel(), getCoreRowModel(), resetRowSelection() и options.meta.deleteRows().
heightNumber60Высота панели действий в пикселях.

Зависимости от table.options.meta

МетодОписание
meta.deleteRows(rows)Метод для удаления выбранных строк. Вызывается с массивом выбранных строк.

Структура

Панель состоит из:

  1. Счётчик: текст вида «3 Selected from 50» (на мобильных только «3 Selected»).
  2. Кнопка удаления: с иконкой корзины и индикатором загрузки (Spinner).
  3. Кнопка отмены: сбрасывает выделение (resetRowSelection()).
  4. Меню «More»: выпадающий список с дополнительными действиями:
    • Export CSV
    • Export PDF
    • Save as view
    • Print

Базовое использование

<template>
    <div class="relative">
        <SelectedRowsActions :table="table" />
        <Table>
            <!-- содержимое таблицы с чекбоксами -->
        </Table>
    </div>
</template>

<script>
import { useVueTable, getCoreRowModel, getRowSelectionRowModel } from '@tanstack/vue-table';

export default {
    setup() {
        const table = useVueTable({
            data: [...],
            columns: [
                {
                    id: 'select',
                    header: ({ table }) => h(Checkbox, {
                        checked: table.getIsAllRowsSelected(),
                        onChange: () => table.toggleAllRowsSelected(),
                    }),
                    cell: ({ row }) => h(Checkbox, {
                        checked: row.getIsSelected(),
                        onChange: () => row.toggleSelected(),
                    }),
                },
                // ...остальные колонки
            ],
            getCoreRowModel: getCoreRowModel(),
            getRowSelectionRowModel: getRowSelectionRowModel(),
            meta: {
                deleteRows(rows) {
                  // Логика удаления
                },
            },
        });
        return { table };
    },
};
</script>