primefaces / primefaces/primereact

DataTable: Filter component disappear when a new row is generated

Open
#4,374 5 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Discussion Type: Enhancement
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

If you have a DataTable that is being filled in-real-time, you have filters for the columns and with scrollable mode, if you are in the middle of the scroll and you open a filter, when a new data enters the DataTable, the filter option disappear.

It register that new element as a user's scroll.

This might make it difficult for clients to search values on in-real-time DataTables.

Reproducer

https://stackblitz.com/edit/react-bfqahr-ho6jls?file=src/App.js

PrimeReact version

9.2.2

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome

Steps to reproduce the behavior
  1. Create a DataTable that has a new value from time to time. It has to be scrollable and have a filter.
  2. Scroll down a little bit. Just enough to ensure you are not at the beginning of the table.
  3. Open a filter.
  4. Wait until a new value arrives the table.
  5. The filter should have disappeared.
Expected behavior

Maybe, the filter should not disappear or an option for the filter be present in order to prevent this if the developer wants.

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 the StackBlitz reproducer at src/App.js and inspect the DataTable behavior for scrollable tables with column filters. Reproduce the issue by opening a filter while scrolled, then adding a row. Done means the filter remains available when a new row arrives, with regression coverage added if the relevant test location can be identified.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.