Repository navigation
perf(data-grid): optimize data-grid-filter-menu - #1039
Merged
Merged
Conversation
sadmann7
commented
Nov 25, 2025
sadmann7
commented
Owner
- Remove unnecessary state management and useEffect anti-patterns
- Use uncontrolled inputs with key-based reset for text/number filters
- Prevent re-renders on every keystroke during filtering
- Simplify conditional logic for filter value inputs
- Extract constants and improve variable naming
- Follow React best practices from workspace rules
- Remove unnecessary state management and useEffect anti-patterns - Use uncontrolled inputs with key-based reset for text/number filters - Prevent re-renders on every keystroke during filtering - Simplify conditional logic for filter value inputs - Extract constants and improve variable naming - Follow React best practices from workspace rules
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR optimizes the data-grid-filter-menu component by refactoring state management, simplifying conditional logic, and extracting constants. However, it introduces a critical bug in the text and number input handling.
Key Changes:
- Extracts
OPERATORS_WITHOUT_VALUEconstant for improved maintainability - Simplifies conditional rendering logic for filter inputs (fixes "between" operator bug)
- Attempts to optimize text/number inputs by switching to uncontrolled components with key-based reset
- Improves variable naming and removes duplicate declarations
Critical Issue:
The switch to uncontrolled inputs with key={inputId}-${value} causes inputs to remount and lose focus after the 300ms debounce period. This significantly degrades user experience as users will lose their cursor position while typing.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Rename value2 to endValue for better semantic clarity - Handle 'between' operator with side-by-side inputs (no layout shift) - Use single calendar with range mode for date ranges (like data-table) - Fix focus loss issue by using filter.id as key instead of values - Maintain local state with debounced updates for smooth typing - Consistent placeholders: 'Start' and 'End' for range inputs - Remove component-level key prop that caused remounting
noodleman1991
pushed a commit
to noodleman1991/tablecn
that referenced
this pull request
Mar 12, 2026
* refactor: optimize data-grid-filter-menu performance - Remove unnecessary state management and useEffect anti-patterns - Use uncontrolled inputs with key-based reset for text/number filters - Prevent re-renders on every keystroke during filtering - Simplify conditional logic for filter value inputs - Extract constants and improve variable naming - Follow React best practices from workspace rules * refactor: improve data-grid filter menu UX and naming - Rename value2 to endValue for better semantic clarity - Handle 'between' operator with side-by-side inputs (no layout shift) - Use single calendar with range mode for date ranges (like data-table) - Fix focus loss issue by using filter.id as key instead of values - Maintain local state with debounced updates for smooth typing - Consistent placeholders: 'Start' and 'End' for range inputs - Remove component-level key prop that caused remounting * feat: better date menu * feat: better filter menu
anhdd-kuro
pushed a commit
to anhdd-kuro/tablecn
that referenced
this pull request
Apr 8, 2026
* refactor: optimize data-grid-filter-menu performance - Remove unnecessary state management and useEffect anti-patterns - Use uncontrolled inputs with key-based reset for text/number filters - Prevent re-renders on every keystroke during filtering - Simplify conditional logic for filter value inputs - Extract constants and improve variable naming - Follow React best practices from workspace rules * refactor: improve data-grid filter menu UX and naming - Rename value2 to endValue for better semantic clarity - Handle 'between' operator with side-by-side inputs (no layout shift) - Use single calendar with range mode for date ranges (like data-table) - Fix focus loss issue by using filter.id as key instead of values - Maintain local state with debounced updates for smooth typing - Consistent placeholders: 'Start' and 'End' for range inputs - Remove component-level key prop that caused remounting * feat: better date menu * feat: better filter menu
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.