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

[Feat]: "Filter by this value" in the data grid cell context menu

Closed Beginner friendly
  • Is something wrong?
#853 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@M4Y4NK-V3RM4 is already working on this.

Since Oct 8, 2026.

  • #908 by @M4Y4NK-V3RM4 — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
85/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start from src/components/ui/DataGrid.tsx to add the context menu items and onFilterByValue prop. Then modify src/pages/Editor.tsx to build the filter clause using helpers from src/utils/filterBar.ts or src/utils/foreignKeys.ts, combining it with the existing filter via AND. Done when the menu appears only on table tabs, the toolbar WHERE input updates, the grid reloads at page 1, and unit tests for the clause builder pass.

Written by the indexing model from the issue text.

Description

feature request good first issue
🚀 Feature Proposal

In table view, right-clicking a cell should offer quick filters based on its value:

  • Filter: column = value
  • Filter: column <> value
  • for NULL cells: column IS NULL / column IS NOT NULL
Motivation

Drilling into data ("show me only rows with this status") currently means typing the condition by hand. A one-click filter from the value you are already looking at is much faster.

Where to start
  • src/components/ui/DataGrid.tsx: the cell context menu. Add an optional onFilterByValue(column, operator, value) prop and show the items only when tableName is set.
  • src/pages/Editor.tsx: build the clause and pass it through the existing handleToolbarUpdate, AND-ed with activeTab.filterClause.
  • Reuse the existing quoting helpers: buildSingleFilterClause in src/utils/filterBar.ts or buildForeignKeyFilterClause in src/utils/foreignKeys.ts.
Acceptance criteria
  • Menu items appear on table tabs only, not on ad-hoc query results.
  • Not offered for BLOB / JSON cells.
  • An existing filter is kept and combined with AND; the toolbar WHERE input reflects the new clause and the grid reloads at page 1.
  • Identifiers and string literals are quoted correctly per driver; numbers are not quoted.
  • Unit tests for the clause builder.
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 22h
Merged PRs (30d)
75

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.