45 lines
844 B
Markdown
45 lines
844 B
Markdown
|
---
|
||
|
|
title: useVariablesEditor
|
||
|
|
description: Compose the variables dialog state, table columns, and TanStack table wiring.
|
||
|
|
---
|
||
|
|
|
||
|
|
# useVariablesEditor
|
||
|
|
|
||
|
|
`useVariablesEditor()` is a higher-level variables-domain composable for building a variables dialog or editor screen.
|
||
|
|
|
||
|
|
It combines:
|
||
|
|
|
||
|
|
- variables dialog state
|
||
|
|
- variables table columns
|
||
|
|
- TanStack Vue Table wiring
|
||
|
|
- collection/mode helpers
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
```ts
|
||
|
|
const variables = useVariablesEditor({
|
||
|
|
colorInput: ColorInput,
|
||
|
|
icons,
|
||
|
|
fallbackIcon,
|
||
|
|
deleteIcon,
|
||
|
|
})
|
||
|
|
```
|
||
|
|
|
||
|
|
## What it returns
|
||
|
|
|
||
|
|
It includes the lower-level dialog/table state plus:
|
||
|
|
|
||
|
|
- `columns`
|
||
|
|
- `table`
|
||
|
|
- `hasCollections`
|
||
|
|
|
||
|
|
## Practical examples
|
||
|
|
|
||
|
|
### Build a variables dialog
|
||
|
|
|
||
|
|
Use `useVariablesEditor()` when you want one composable that already wires the table and action handlers together.
|
||
|
|
|
||
|
|
## Related APIs
|
||
|
|
|
||
|
|
- [SDK API Overview](../)
|