TableSettings

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

Обзор

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

API компонента

Props

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

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

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

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

КлючТипОписание
enableFullScreenBooleanВключает полноэкранный режим таблицы.
enableRowDenseBooleanВключает компактный режим строк.
enableColumnFiltersBooleanВключает фильтры колонок. При отключении сбрасывает все фильтры.
enableSortingBooleanВключает сортировку. При отключении сбрасывает текущую сортировку.

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

  • Автосброс: при отключении фильтров (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>