primefaces / primefaces/primereact

Horizontally scrolling in a DataTable with a left frozen column hide the vertical border of the frozen column

Open
#8,097 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Describe the bug

When you have a frozen column at the left in the DataTable and you scroll horizontally then you see that the vertical border of the frozen column is not visible anymore.

Reproducer

https://stackblitz.com/edit/kss27vxm?file=src%2FApp.jsx

System Information
System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    primereact: 10.9.6 => 10.9.6 
    react: 18.3.1 => 18.3.1
Steps to reproduce the behavior
  1. start the reproduction

Image

  1. scroll horizontally some pixels

  2. you see that the vertically border of the first frozen column is gone

Image

Expected behavior

The vertically border should always be visible when scrolling.

(It should be even better to emphasize the border between the frozen column and not a frozen column)

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 supplied StackBlitz reproducer in src/App.jsx and confirm the frozen-column border disappears after horizontal scrolling. Trace the DataTable styling used by that example, then verify that the left frozen column's vertical border remains visible and distinct after scrolling.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, react
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.