# FilterPanelParams

> _Since v0.1.1_

Parameters passed to a custom FilterPanelRenderer when the filter panel
opens for a column. Provides all the state and action callbacks needed to build
a fully custom filter UI.

The object is created fresh each time the panel opens and captures the current
filter state for the column. Use the action methods (`applySetFilter`,
`applyTextFilter`, `clearFilter`, `closePanel`) to drive filtering — they
handle state updates, re-rendering, and panel lifecycle automatically.

**Resolution priority** for filter panel renderers:
1. Plugin-level `filterPanelRenderer` (in `FilterConfig`)
2. Type-level `filterPanelRenderer` (in `typeDefaults`)
3. Built-in default panel (checkbox set filter, number range, or date range)

Returning `undefined` from a plugin-level renderer falls through to the next
level, so you can override only specific columns/fields while keeping defaults
for the rest.

**Framework adapters** wrap this for idiomatic usage:
- **Angular**: Extend `BaseFilterPanel` — params are available as a signal input.
- **React**: Use a single-argument `(params) => ReactNode` signature.
- **Vue**: Use a single-argument `(params) => VNode` signature.

#### Example

```typescript
// Vanilla: radio-button filter for a "status" column, default for everything else
new FilteringPlugin({
  filterPanelRenderer: (container, params) => {
    if (params.field !== 'status') return undefined; // fall through to default

    const options = ['All', ...params.uniqueValues.map(String)];
    options.forEach(opt => {
      const label = document.createElement('label');
      label.style.display = 'block';
      const radio = document.createElement('input');
      radio.type = 'radio';
      radio.name = 'status';
      radio.checked = opt === 'All' && params.excludedValues.size === 0;
      radio.addEventListener('change', () => {
        if (opt === 'All') params.clearFilter();
        else params.applySetFilter(
          params.uniqueValues.filter(v => String(v) !== opt) as unknown[]
        );
      });
      label.append(radio, ` ${opt}`);
      container.appendChild(label);
    });
  },
});
```

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `field` | <code>string</code> | The field name (column key) being filtered. Matches ColumnConfig.field — use it to conditionally render different UIs for different columns in a shared renderer. |
| `column` | <code><a href="/grid/api/core/interfaces/columnconfig/">ColumnConfig</a></code> | The full column configuration for the filtered column. Useful for reading `column.type`, `column.filterParams`, `column.header`, or any other column metadata to tailor the filter panel UI. |
| `uniqueValues` | <code>unknown[]</code> | All unique values present in the current dataset for this field, sorted and de-duplicated. For columns with a `filterValue` extractor, these are the extracted/flattened values (not the raw cell values). |
| `excludedValues` | <code>Set&lt;unknown&gt;</code> | Currently excluded values for set-type (`notIn`) filters. An empty `Set` means no values are excluded (i.e., all values are shown). |
| `searchText` | <code>string</code> | The current search text the user has typed into the filter panel's search input (if any). Persisted across panel open/close cycles for the same field. Defaults to `''` when no search has been performed. |
| `currentFilter?` | <code><a href="/grid/plugins/filtering/interfaces/filtermodel/">FilterModel</a></code> | The currently active FilterModel for this field, or `undefined` if no filter is applied. Inspect this to reflect the active filter state in your UI (e.g., highlight the active operator, show the current value). |
| `applySetFilter` | <code>(excludedValues: unknown[], valueTo: unknown) =&gt; void</code> | Apply a **set filter** (`notIn` operator) that excludes the given values. Rows whose field value is in `excludedValues` will be hidden. |
| `applyTextFilter` | <code>(operator: <a href="/grid/plugins/filtering/types/filteroperator/">FilterOperator</a>, value: string &#124; number, valueTo: string &#124; number) =&gt; void</code> | Apply a **text, number, or date filter** with the given operator and value(s). |
| `clearFilter` | <code>() =&gt; void</code> | Clear the active filter for this field entirely and close the panel. After calling, the column will show all rows (as if no filter was ever applied). |
| `closePanel` | <code>() =&gt; void</code> | Close the filter panel **without** applying or clearing any filter. Use this for a "Cancel" / dismiss action where the user abandons changes. |

### Property Details

#### currentFilter

```typescript
if (params.currentFilter?.operator === 'between') {
  minInput.value = String(params.currentFilter.value);
  maxInput.value = String(params.currentFilter.valueTo);
}
```

---

#### applySetFilter

Apply a **set filter** (`notIn` operator) that excludes the given values.
Rows whose field value is in `excludedValues` will be hidden.

Calling this automatically closes the panel and triggers a filter-change event.

Pass an empty array to clear the set filter (show all values).

```typescript
// Exclude "Inactive" and "Archived" statuses
params.applySetFilter(['Inactive', 'Archived']);

// Exclude everything except the selected value
const excluded = params.uniqueValues.filter(v => v !== selectedValue);
params.applySetFilter(excluded as unknown[]);
```

---

#### applyTextFilter

Apply a **text, number, or date filter** with the given operator and value(s).

Calling this automatically closes the panel and triggers a filter-change event.

```typescript
// Text: contains search
params.applyTextFilter('contains', searchInput.value);

// Number: range between 10 and 100
params.applyTextFilter('between', 10, 100);

// Date: after a specific date
params.applyTextFilter('greaterThan', '2025-01-01');
```

---