# Filter Header
URL: https://pro.rv-grid.com/api/filter-header/
Source: src/content/docs/api/filter-header.md
## Module Extensions

### `ColumnRegular` (Extended from `@revolist/revogrid`)

```ts
interface ColumnRegular {
  /**
       * Hide filter input in the header
       */
      hideFilterHeader?: boolean;
  /**
       * Hide filter input count in the header
       */
      hideFilterHeaderCount?: boolean;
  /**
       * Filter placeholder
       */
      filterPlaceholder?: string;
  /**
       * Custom template for popup-style header filter trigger content.
       */
      filterHeaderTemplate?: FilterHeaderTemplateFunc
}
```

## Plugin API

### `FilterHeaderTemplateFunc`

```ts
export type FilterHeaderTemplateFunc = (
  h: HyperFunc<any>,
  props: FilterHeaderTemplateProps,
) => VNodeResponse;
```

---

### `FilterHeaderTemplateProps`

```ts
export type FilterHeaderTemplateProps = {
  column: ColumnRegular;
  columnProp: ColumnProp;
  values: FilterHeaderTemplateValue[];
  text: string;
  active: boolean;
  showCount: boolean;
};
```

---

### `FilterHeaderTemplateValue`

```ts
export type FilterHeaderTemplateValue = {
  value: string;
  label: string;
  count: number;
};
```

---

### `FilterHeaderTriggerState`

```ts
export type FilterHeaderTriggerState = Omit<FilterHeaderTemplateProps, 'column' | 'columnProp'>;
```

---

### `FilterHeaderPlugin`

The FilterHeaderPlugin enhances RevoGrid by adding interactive filter input elements to column headers,
allowing users to filter grid data directly from the header. It dynamically integrates with existing
column templates, providing a seamless UI for text-based filters and selection-based filters.

**Key Features**:
- Adds input fields below each column header for applying text-based filters.
- Integrates with the `AdvanceFilterPlugin` to handle complex filtering operations, supporting multiple
  filter types like selection and slider filters.
- Automatically wraps existing header templates to include filter inputs, maintaining existing header
  content alongside new filter functionality.
- Utilizes debouncing to optimize input handling, minimizing performance impact from frequent user interactions.

**Usage**:
- Include this plugin in RevoGrid's plugin array to activate header filtering capabilities.
- Customize column definitions to specify filter types using the `filter` property.

Events:
- Listens for `BEFORE_HEADER_RENDER_EVENT` to modify header templates and append filter UI components.

Usage Example:
```typescript
import { AdvanceFilterPlugin, FilterHeaderPlugin } from '@revolist/revogrid-pro'

const grid = document.createElement('revo-grid');
grid.plugins = [AdvanceFilterPlugin, FilterHeaderPlugin];

grid.columns = [
  {
    prop: 'name',
    name: 'Name',
    filter: ['input'],
  },
];
```

By integrating this plugin, RevoGrid provides an enhanced user experience with improved data filtering
capabilities directly accessible from the grid interface.

#### Dependencies

- **Required** `AdvanceFilterPlugin`, `FilterPlugin`: Requires a filtering plugin to apply filter header input changes.

```ts
class FilterHeaderPlugin {
  destroy();
}
```

---

### `renderFilterHeaderView`

```ts
export function renderFilterHeaderView(;
```

---

### `renderFilterHeaderTriggerContent`

```ts
export function renderFilterHeaderTriggerContent(
  column: ColumnRegular | undefined,
  columnProp: ColumnProp,
  state: FilterHeaderTriggerState,
);
```

---

### `FilterHeaderViewOptions`

```ts
export type FilterHeaderViewOptions = {
  column?: ColumnRegular;
  columnProp: ColumnProp;
  defaultNode?: ReturnType<ColumnTemplateFunc>;
  isPopupFilter: boolean;
  isInputEnabled: boolean;
  inputValue: string;
  showFilterCount: boolean;
  popupFilterState?: FilterHeaderTriggerState;
  onInput: FilterHeaderInputHandlers;
  onPopup: FilterHeaderPopupHandlers;
};
```

---

### `isInlineTextFilterItem`

```ts
export function isInlineTextFilterItem(filter: FilterData): boolean;
```
