# Floating filters "Floating filters" are the always-visible filter inputs that sit **between** the header row and the body. In SvGrid the filter row is **per-operator and per-type**: each cell has a funnel to pick the operator, the value input matches the column's type, and `between` shows a second inline "To" input. > Live demo: Floating filters (per-operator) - https://svgrid.com/demos/179-floating-filters/ ## Enable the filter row ```svelte ``` ## Per-operator, per-type - **Operator per cell** - click the funnel in a filter-row cell to switch the operator (`contains`, `equals`, `greaterThan`, `between`, `isBlank`, …). The chosen operator drives that column's filtering; it is the same value the column menu uses, so the two surfaces stay in sync. - **Input matches the column** - a `number` column gets a number input, a `date` column a date picker, text a text input. This is driven by the column's `editorType`. - **`between` inline** - selecting Between shows a second **To** input right in the row, so ranges work without opening the full menu. A date column swaps in a single **range field** instead: one popover, two-month calendar, both ends picked in one gesture. A range needs both ends - the filter stays inactive until the second one is picked. ```ts const columns = [ { field: 'age', header: 'Age', editorType: 'number' }, // number input { field: 'joinedAt', header: 'Joined', editorType: 'date' }, // date picker { field: 'name', header: 'Name', editorType: 'text' }, // text input ] ``` To show both the filter row and the column-menu funnel, set both surfaces: ```svelte ``` ## The filter row `showFilterRow` puts a persistent input under every header. It wins over `filterMode` when both are set, which is how you get a filter row alongside the menu rather than instead of it. ```svelte ``` ## Row and menu together The row handles the common case in one keystroke; the menu behind each header still carries the full operator list for the times that is not enough. ```svelte ``` ## Your own control in the row A column's `customFilter.floating` snippet takes the place of the operator button and input in that column's cell; the other columns keep theirs. See [Custom column filters](https://svgrid.com/docs/help/filtering/custom-column-filters/). ## See also - [Overview](https://svgrid.com/docs/help/filtering/overview/) - [Filter conditions](https://svgrid.com/docs/help/filtering/filter-conditions/) - two conditions per column - [Custom header components](https://svgrid.com/docs/help/columns/custom-header-components/) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/filtering/floating-filters/ . All docs: https://svgrid.com/llms.txt