Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[Feat]: Structured filter: pick values from the column's distinct values

Closed
#869 2 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@Detoy is already working on this.

Since Oct 10, 2026.

  • #956 by @Detoy — merged

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
58/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
react, sql, typescript

Research direction

Start with the value inputs in src/components/ui/FilterRow.tsx and the query-builder guidance in src/utils/filterBar.ts; check how the existing query command is used. Add unit tests for the query builder across the supported dialects, and follow the locale and accessibility requirements in the contributor notes. Done means the picker meets the listed acceptance criteria and pnpm lint, pnpm typecheck and pnpm test pass.

Written by the indexing model from the issue text.

Description

feature request help wanted
🚀 Feature Proposal

Add a value picker to the structured filter: a button next to the value field loads the column's most frequent distinct values with their counts, so users can pick one or several instead of typing them.

Motivation

Filtering on status or enum-like columns means remembering the exact values; typos silently return no rows.

Where to start
  • src/components/ui/FilterRow.tsx: the value inputs are plain <input>s. Add a button that opens a popover with a search box and the value list.
  • src/utils/filterBar.ts: a pure builder for SELECT col, COUNT(*) FROM table [WHERE current filter] GROUP BY col ORDER BY 2 DESC LIMIT 100 with per-driver identifier quoting, executed through the existing query command.
  • Picking several values switches the operator to IN.
Acceptance criteria
  • The picker shows up to 100 values with counts and a search box.
  • One value fills the input with =; several set IN.
  • Loading and error states are handled; cancelling leaves the filter untouched.
  • Not offered for BLOB / JSON columns.
  • Unit tests for the query builder per dialect.
Contributor notes
  • Follow the repo rules in .rules/ (TypeScript, React, design tokens, accessibility, testing).
  • Any new UI string needs a key in every locale under src/i18n/locales/.
  • Run pnpm lint, pnpm typecheck and pnpm test before opening the PR.
  • Questions? Ask here or on Discord.
Dominant language
TypeScript
Stars
5.1k
Forks
335
Avg merge
1d 15h
Merged PRs (30d)
188

Getting set up

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.

More from TabularisDB/tabularis

All issues in TabularisDB/tabularis

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.