CopyableCell

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

Обзор

Основное назначение: отображение текстовых данных в таблице с возможностью быстрого копирования.
Ключевые возможности:
- Копирование текста в буфер обмена по клику.
- Кнопка копирования, видимая только при наведении на ячейку.
- Всплывающая подсказка (tooltip) «Copy» на кнопке.
- Поддержка глобального фильтра таблицы (для Highlight).
- Опциональная подсветка текста через Highlight.

API компонента

Props

Проп	Тип	По умолчанию	Описание
`getValue`	`Function`	(обязательный)	Функция, возвращающая значение ячейки. Обычно передаётся из `cell.getValue` TanStack Table.
`table`	`Object`		Экземпляр таблицы TanStack Table. Используется для получения `globalFilter` при подсветке.
`highlight`	`Boolean`	`false`	Включает подсветку текста в ячейке (требует компонент `Highlight`).

Зависимости

Button — кнопка копирования.
v-tippy — директива для всплывающей подсказки (Tippy.js).
Highlight — компонент подсветки текста (опционально, при highlight: true).

Примеры использования

В колонке TanStack Table

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

export default {
    setup() {
        const columns = [
            {
                accessorKey: 'email',
                header: 'Email',
                cell: ({ getValue, table }) => h(CopyableCell, { getValue, table }),
            },
            {
                accessorKey: 'phone',
                header: 'Телефон',
                cell: ({ getValue, table }) => h(CopyableCell, { getValue, table }),
            },
        ];

        const table = useVueTable({
            data: [...],
            columns,
            getCoreRowModel: getCoreRowModel(),
        });

        return { table };
    },
};
</script>