---
url: "https://vueda.dev/v3/reference/api/js/use/useFilterables/functions/useFilterables.md"
title: "useFilterables"
---

# useFilterables

## Overview

Merges a model config's declared filterable field list and per-field details
with caller-supplied overrides (props take priority). Standalone so a caller
that only needs the resolved filterable field set — not field/widget component
resolution or the `FilterModelSymbol` provide that useFilter also
does — can reuse an existing useModelConfig instance instead of
creating a second one.

## Signature

`useFilterables(modelConfig, props, state)`

### Parameters

| Name | Type | Required | Description |
| --- | --- | --- | --- |
| <span id="param-modelConfig">modelConfig</span> | `object` | yes | An existing model config instance. |
| <span id="param-props">props</span> | [UseFilterablesOverrides](/v3/reference/api/js/use/useFilterables/types/UseFilterablesOverrides.md) | yes | Overrides for the model config's declared filterables/details. |
| <span id="param-state">state</span> | `object` | no | Target object to write `filterables`/`filterableDetails` into. Pass a caller-owned object (e.g. one already consumed by a downstream `deep` watch) to write in place, rather than bridging through a second wrapped object. Defaults to a fresh one. |

#### modelConfig Properties

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="param-modelConfig-app">app</span> | `string` |  |  | The app name being used. |
| <span id="param-modelConfig-clearError">clearError</span> | `() => void` |  |  | Clear the error. |
| <span id="param-modelConfig-config">config</span> | `object` |  |  | The model config. |
| <span id="param-modelConfig-effectScope">effectScope</span> | `object` |  |  | The effect scope for the instance. |
| <span id="param-modelConfig-error">error</span> | `Error` |  |  | The error that occurred while loading the model config. |
| <span id="param-modelConfig-errored">errored</span> | `boolean` |  |  | True if an error occurred while loading the model config. |
| <span id="param-modelConfig-info">info</span> | `object` |  |  | The model info. |
| <span id="param-modelConfig-loading">loading</span> | `boolean` |  |  | True if the model config is loading. |
| <span id="param-modelConfig-model">model</span> | `string` |  |  | The model name being used. |
| <span id="param-modelConfig-view">view</span> | `string` |  |  | The view being used, if any. |

#### state Properties

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="param-state-filterableDetails">filterableDetails</span> | `object` |  |  | The merged filterableDetails, either passed in, from config or from server info. |
| <span id="param-state-filterables">filterables</span> | `string[]` |  |  | The filters to display, either passed in or from config. |

### Returns

`The merged, reactive filterable field list and details.`

## Source

`client/lib/use/useFilterables.js:38`