TableColumnVisibility

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

Обзор

  • Основное назначение: управление отображением колонок в таблице через чекбоксы.
  • Ключевые возможности:
    • Список всех колонок таблицы с чекбоксами.
    • Индивидуальное переключение видимости каждой колонки.
    • Кнопка «Show All» для сброса всех скрытых колонок.
    • Анимированное появление/скрытие панели.
    • Настраиваемый заголовок и описание.

API компонента

Props

ПропТипПо умолчаниюОписание
tableObject(обязательный)Экземпляр таблицы TanStack Table. Должен содержать методы getAllLeafColumns() и resetColumnVisibility().
headerString'Column Visibility'Заголовок выпадающей панели.
descriptionStringОписание под заголовком панели.

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

<template>
    <div>
        <div class="flex justify-end mb-4">
            <TableColumnVisibility :table="table" />
        </div>
        <Table>
            <thead>
                <tr>
                    <th v-for="header in table.getFlatHeaders()" :key="header.id">
                        {{ header.column.columnDef.header }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="row in table.getRowModel().rows" :key="row.id">
                    <td v-for="cell in row.getVisibleCells()" :key="cell.id">
                        {{ cell.getValue() }}
                    </td>
                </tr>
            </tbody>
        </Table>
    </div>
</template>
<script>
import { useVueTable, getCoreRowModel } from '@tanstack/vue-table';
export default {
    setup() {
        const table = useVueTable({
            data: [...],
            columns: [...],
            getCoreRowModel: getCoreRowModel(),
        });
        return { table };
    },
};
</script>