Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TreeTable: Rows are not aligned when frozen #5508

Closed
kl-nevermore opened this issue Dec 4, 2023 · 7 comments · Fixed by #5511
Closed

TreeTable: Rows are not aligned when frozen #5508

kl-nevermore opened this issue Dec 4, 2023 · 7 comments · Fixed by #5511
Assignees
Labels
Type: Bug Issue contains a defect related to a specific component.
Milestone

Comments

@kl-nevermore
Copy link
Contributor

kl-nevermore commented Dec 4, 2023

Describe the bug

20231204155216_rec_

scrollBodyRef.current.style.paddingBottom = DomHandler.calculateScrollbarWidth() + 'px';

If page does not have scrollbar ,DomHandler.calculateScrollbarWidth return 0

paddingBottom should be calculated based on this DOM
I am not sure use DomHandler.find(findDataTableContainer(elementRef.current), '[data-pc-section="scrollablebody"]')[1] is safety and best way
image

const el = DomHandler.find(findDataTableContainer(elementRef.current), '[data-pc-section="scrollablebody"]')[1]
scrollBodyRef.current.style.paddingBottom = DomHandler.calculateScrollbarWidth(el) + 'px'; 

Reproducer

https://codesandbox.io/p/sandbox/primereact-demo-forked-thzsmk?file=%2Fsrc%2Findex.js%3A9%2C22

PrimeReact version

latest

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

@kl-nevermore kl-nevermore added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 4, 2023
@melloware melloware added Type: Bug Issue contains a defect related to a specific component. and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Dec 4, 2023
melloware added a commit to melloware/primereact that referenced this issue Dec 4, 2023
@melloware melloware added this to the 10.2.2 milestone Dec 4, 2023
@melloware
Copy link
Member

OK PR submitted can you please review it?

melloware added a commit to melloware/primereact that referenced this issue Dec 4, 2023
@kl-nevermore
Copy link
Contributor Author

By the way,the classname selector should be replaced by data- support unstyled?

@melloware
Copy link
Member

Which classname selector do you mean?

@kl-nevermore
Copy link
Contributor Author

example

let scrollableBodyTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-body-table');
let scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-header-table');
let scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-footer-table');

Other components may also exist

@melloware
Copy link
Member

Oh yeah I think Datatable has a bunch of these also. Can you create a new ticket that mentions DataTable and TreeTable have lots of these that need to be converted to data- lookups instead of className lookups?

@kl-nevermore
Copy link
Contributor Author

ok, I will deal with it when I go to work tomorrow. If I have more time, I can pr

哦,是的,我认为 Datatable 也有很多这样的东西。您能否创建一个新票证,其中提到 DataTable 和 TreeTable 有很多需要转换为data-查找而不是 className 查找的内容?

@melloware
Copy link
Member

Awesome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants