Usage

Managed state hook for table filtering. Returns the current filter map, an onChange handler, and a way to clear everything. Pass the map and the handler to useTableFiltering, and the map to applyTableFilters() to get the matching rows.

import { useTableFilterState } from '@astryx-vue/core/Table'

A filter is "off" when its key is missing. Setting null, an empty string, or an empty array removes the key instead of storing an empty value, so a truthy key in the map always means a live filter.

Give it an initial map when the table should open with a filter already applied. Pass the map directly, or wrap it as initialState. The initial object is shallow copied, so later writes never touch it.

const direct = useTableFilterState({ role: 'Engineer' })
const wrapped = useTableFilterState({ initialState: { role: 'Engineer' } })

Examples

Table — Inline Filters

Name Name	Email Email	Role Role	Department
Alice Johnson	alice@example.com	Engineer	Platform
Bob Smith	bob@example.com	Designer	Product
Charlie Brown	charlie@example.com	Manager	Platform
Diana Prince	diana@example.com	Engineer	Infra
Eve Davis	eve@example.com	Admin	Operations

Inline filter controls with the filter map held by useTableFilterState.

Table — Popover Filters

Name	Email	Role	Department
Alice	alice@example.com	Engineer	Platform
Bob	bob@example.com	Designer	Product
Charlie	charlie@example.com	Manager	Platform
Diana	diana@example.com	Engineer	Infrastructure
Eve	eve@example.com	Admin	Operations

Popover filter controls with the same managed state.