TableSettings

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

Обзор

Основное назначение: централизованное управление настройками отображения таблицы.
Ключевые возможности:
- Управление видимостью отдельных колонок через чекбоксы.
- Закрепление колонок слева/справа с кнопками Pin/Unpin.
- Глобальные переключатели: Full Screen, Row Dense, Column Filters, Sort.
- Сброс видимости колонок кнопкой «Show All Columns».
- Автоматический сброс фильтров и сортировки при их отключении.

API компонента

Props

Проп	Тип	По умолчанию	Описание
`table`	`Object`	(обязательный)	Экземпляр таблицы TanStack Table с расширенными настройками.

Зависимости от `table`

Метод/Свойство	Описание
`table.getState().tableSettings`	Объект текущих настроек таблицы.
`table.options.meta?.setTableSettings`	Функция для обновления настроек таблицы.
`table.getAllLeafColumns()`	Массив всех конечных колонок.
`table.resetColumnVisibility()`	Сброс видимости колонок к исходному состоянию.
`table.resetColumnFilters()`	Сброс всех фильтров колонок.
`table.resetSorting()`	Сброс сортировки.

`tableSettings` (из `table.getState().tableSettings`)

Ключ	Тип	Описание
`enableFullScreen`	`Boolean`	Включает полноэкранный режим таблицы.
`enableRowDense`	`Boolean`	Включает компактный режим строк.
`enableColumnFilters`	`Boolean`	Включает фильтры колонок. При отключении сбрасывает все фильтры.
`enableSorting`	`Boolean`	Включает сортировку. При отключении сбрасывает текущую сортировку.

Особенности работы

Автосброс: при отключении фильтров (enableColumnFilters: false) автоматически вызывается resetColumnFilters(). При отключении сортировки — resetSorting().
Скрытые колонки: колонки с columnDef.isHiddenColumn: true не отображаются в списке видимости.
Закрепление: кнопки Pin отображаются только для колонок с поддержкой getCanPin().

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

Настройка TanStack Table с поддержкой настроек

<template>
    <TableSettings :table="table" />
</template>

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

export default {
    setup() {
        const tableSettings = reactive({
            enableFullScreen: false,
            enableRowDense: false,
            enableColumnFilters: true,
            enableSorting: true,
        });

        const table = useVueTable({
            data: [...],
            columns: [...],
            getCoreRowModel: getCoreRowModel(),
            state: { tableSettings },
            meta: {
                setTableSettings(updater) {
                    const newSettings = typeof updater === 'function'
                      ? updater(tableSettings)
                      : updater;
                    Object.assign(tableSettings, newSettings);
                },
            },
        });

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