vuetifyjs / vuetifyjs/vuetify

[Feature Request] Built-in Filter Editor for v-data-table (multi-condition, per-column, with operators)

Open
#22,862 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

C: VDataTable T: feature
Dominant language
TypeScript
Stars
41k
Forks
7.1k
Avg merge
1d 21h
Merged PRs (30d)
11

Description

Problem to solve

v-data-table currently exposes only a single global search prop and a per-call custom-filter. Anything beyond "type one string, match all columns" — per-column filtering, choosing an operator (equals / contains / starts with / is greater than / is blank…), combining multiple conditions with And/Or, nested groups — has to be rebuilt by hand in every project, usually by overriding the header slot with menus, autocompletes, or text fields. The community has produced many partial recipes for this (DEV.to "Multi Filter Column in Vuetify Data Table", several CodePens, Medium write-ups), which is itself evidence that the need is common and there is no canonical answer.
For business / LOB applications — ERP, accounting, admin panels, anything with a grid of hundreds or thousands of rows — this is a baseline expectation users bring from desktop grids. WinForms developers in particular have had the DevExpress Filter Editor for years and expect equivalent ergonomics on the web.
Reference
DevExpress Filter Editor (WinForms) — the prior art this request is modeled on: https://docs.devexpress.com/WindowsForms/2471/controls-and-libraries/data-grid/visual-elements/view-common-elements/filter-editor

Proposed solution

DevExpress Filter Editor (WinForms) — the prior art this request is modeled on: https://docs.devexpress.com/WindowsForms/2471/controls-and-libraries/data-grid/visual-elements/view-common-elements/filter-editor

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with v-data-table's existing global search prop and per-call custom-filter behavior, then compare the requested operators and nested And/Or groups with the linked DevExpress Filter Editor reference. No files, tests, or acceptance criteria are named, so agree on the API and interaction scope with maintainers first; done would require an agreed filter editor covering the requested conditions.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.