---
title: useVariablesEditor
description: Компоновка состояния диалога переменных, колонок таблицы и подключения TanStack Table.
---

# useVariablesEditor

`useVariablesEditor()` — высокоуровневый компосабл для домена переменных, предназначенный для создания диалога переменных или экрана редактора.

Объединяет:

- состояние диалога переменных
- колонки таблицы переменных
- подключение TanStack Vue Table
- хелперы коллекций и режимов

## Использование

```ts
const variables = useVariablesEditor({
  colorInput: ColorInput,
  icons,
  fallbackIcon,
  deleteIcon,
})
```

## Возвращает

Включает низкоуровневое состояние диалога/таблицы плюс:

- `columns`
- `table`
- `hasCollections`

## Практические примеры

### Создать диалог переменных

Используйте `useVariablesEditor()`, когда нужен один компосабл, который уже подключает таблицу и обработчики действий.

## Связанные API

- [Обзор SDK API](../)