DataTable: CSS Bug with attributes 'showGridLines' and 'scrollable'

[paulBrdInfotel]

Describe the bug

Firstaly, If you use a DataTable with the showGridLines and scrollable attributes, when you scroll the DataTable you can see the data in the top row because the header has no longer a border.

Then, I couldn't find an attribute to have a border at the bottom of the DataTable. Because if my table doesn't show all line and i have a scroll bar.

NO OK :

OK :

Reproducer

No response

PrimeReact version

10.7.0

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Edge

Steps to reproduce the behavior

No response

Expected behavior

No response

[github-actions[bot]]

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[paulBrdInfotel]

I tried to create the bug on Stackblitz but I can't do it. But i found the cause, I use PrimeReact with Tailwind Css and the layer of Tailwind has priority over PrimeReact layer. I do the same configuration like the documentation.

Tailwind css add the attribut 'border-collapse: collapse' in table :

[melloware]

Are you using Tailwind only or also a PF theme?

[paulBrdInfotel]

If you mean PrimeReact theme, I use lara light blue theme :

[melloware]

@paulBrdInfotel try this I can't reproduce: pr-6857.zip

Unzip it and run npm install then npm run dev and go to http://localhost:3000/ it looks fine for me with Tailwind and Lara Light Blue.

[paulBrdInfotel]

I've run your code and I'm having the same problem. You can see it on the screenshot. I've tried it on Edge and Chrome (I've put their version on) but I might try it on Firefox next Tuesday.

[melloware]

totally fine for me in latest Chrome and Firefox:

[paulBrdInfotel]

Have you tried scrolling down? Because in your screenshot, the scroll bar is at the top.

[melloware]

i see yeah it looks like the header is off one pixel.

I am sure you can look at the CSS in the inspector and figure out what TailWind or PR style is affecting it.

[paulBrdInfotel]

I'm going to try and solve this problem, but I imagine that other people will have the same bug.

It would be a pity not to fix this bug for future users.

Thanks for your help.

[melloware]

Yep it looks like its juts slightly off so i am sure its a CSS change somewhere in here.