useGridFiltering

Composable for programmatic filter control.

Must be used within a component that contains a TbwGrid with filtering enabled.

useGridFiltering(selector: string): FilteringMethods

Parameters

Name	Type	Description
selector	string	Optional CSS selector to target a specific grid element via
DOM query instead of using Vue’s provide/inject. Use when the component
contains multiple grids, e.g. 'tbw-grid.primary' or '#my-grid'.

Example

<script setup>
import { useGridFiltering } from '@toolbox-web/grid-vue/features/filtering';

const { setFilter, clearAllFilters, getFilteredRowCount, isFieldFiltered } = useGridFiltering();

function applyQuickFilter(field: string, value: string) {
  setFilter(field, { operator: 'contains', value });
}
</script>

<template>
  <input @input="applyQuickFilter('name', $event.target.value)" placeholder="Filter by name..." />
  <span>{{ getFilteredRowCount() }} results</span>
  <button @click="clearAllFilters">Clear Filters</button>
</template>