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

DataTable Passthrough: rowExpansion className not set in DOM #6782

Open
LouisTrinczek opened this issue Jun 21, 2024 · 1 comment
Open

DataTable Passthrough: rowExpansion className not set in DOM #6782

LouisTrinczek opened this issue Jun 21, 2024 · 1 comment
Labels
Component: Unstyled Issue related to unstyled/passthrough attributes

Comments

@LouisTrinczek
Copy link

Describe the bug

When using the "rowExpansion" property in the DataTable Pass Through, the className is not set in the DOM.

Reproducer

https://stackblitz.com/edit/9dqyrn-cyspsk?file=src%2FApp.jsx

PrimeReact version

10.6.2

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Firefox 126.0, Chrome 125.0.6422.142

Steps to reproduce the behavior

Create a DataTable with all the necessary rowExpansion Code.
Add the pt prop with these values:

pt={{
          bodyRow: { className: 'CUSTOM-ROW-CLASSNAME' },
          rowExpansion: { className: 'CUSTOM-ROW-EXPANSION-CLASSNAME' },
        }}

Go in your browsers dev tools and select the row.

You will find, that the "CUSTOM-ROW-CLASSNAME" is applied to the bodyRow, but not the "CUSTOM-ROW-EXPANSION-CLASSNAME" to the expanded row.

Expected behavior

Custom className is set to the rowExpansion element and styling is applied.

@LouisTrinczek LouisTrinczek added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jun 21, 2024
@melloware melloware added Component: Unstyled Issue related to unstyled/passthrough attributes and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jun 21, 2024
@melloware
Copy link
Member

The bug is here its looking on the Column for PT instead of the DataTable

                const rowExpansionProps = mergeProps(
                    {
                        id,
                        className: cx('rowExpansion'),
                        role: 'row'
                    },
                    getColumnPTOptions('rowExpansion')
                );

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Unstyled Issue related to unstyled/passthrough attributes
Projects
None yet
Development

No branches or pull requests

2 participants