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.

Sign up for GitHub

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

Jump to bottom

DataTable: Checbox pass-through options not working #6939

Closed
peconomou929 opened this issue Jul 27, 2024 · 1 comment · Fixed by #6941, leoo1992/GeradorQRCode#80 or leoo1992/GeradorQRCode#85 · May be fixed by mtech-31-quemistry/quemistry_client_web#20
Closed

DataTable: Checbox pass-through options not working #6939

peconomou929 opened this issue Jul 27, 2024 · 1 comment · Fixed by #6941, leoo1992/GeradorQRCode#80 or leoo1992/GeradorQRCode#85 · May be fixed by mtech-31-quemistry/quemistry_client_web#20
Assignees
@melloware
Labels
Component: Unstyled Issue related to unstyled/passthrough attributes
Milestone
10.8.0

Comments

@peconomou929
Copy link
Contributor

Describe the bug

The PrimeReact DataTable has built-in usage of Checkbox. Users of the DataTable should be able to easily pass attributes to the DOM elements for the Checkboxes. They should able to do these with Pass Through options, but the StackBlitz shows that this is not working properly. If you inspect the DOM, you will see none of the specified class names appearing.

I've tried to analyze the code to figure out the issue, but I find it quite chaotic. This brings up a more general issue, regarding inclusion of one PrimeReact component in another, and how the corresponding Pass Through options should be handled.

In my opinion, this is not handled well at all in the case of Radio Buttons and Checkbox in the DataTable. On the other hand, a great example of how they should be handled is where the dropdown is included in the paginator. The user simply passes an instance of DropdownPassThroughOptions inside the PaginatorPassThroughOptions object. The library then simply needs to pass this object through to the Dropdown, and no extra special logic is required. This approach is also more robust to external changes, as it points to a single source of truth: how the Dropdown processes Pass Through options.

My suggestion would be to follow this example in all such cases where one PrimeReact component is included in another. Because of how delicate all of these Pass Through helper functions are, I would not feel very comfortable myself opening a PR. I would be afraid to break something. Therefore, I hope that somebody else might be able to take this up.

Reproducer

https://stackblitz.com/edit/vitejs-vite-hcxla5

System Information

primereact: 10.7.0

Steps to reproduce the behavior

See StackBlitz.

Expected behavior

The specified class names in the pass through options should appear in the DOM.
@peconomou929 peconomou929 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jul 27, 2024
@peconomou929 peconomou929 changed the title Replace_With_Component_Name: Brief_Bug_Description DataTable: Check Box pass-through options not working Jul 27, 2024
@peconomou929 peconomou929 changed the title DataTable: Check Box pass-through options not working DataTable: Checbox pass-through options not working Jul 27, 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 Jul 28, 2024
melloware added a commit to melloware/primereact that referenced this issue Jul 28, 2024
@melloware
Fix primefaces#6939: Datatable fix row checkbox/radiobutton PT
b207066
@melloware melloware self-assigned this Jul 28, 2024
@melloware melloware added this to the 10.7.1 milestone Jul 28, 2024
@melloware melloware mentioned this issue Jul 28, 2024
Merged
@melloware
Copy link
Member

PR submitted. @ivanpajon I had to revert your previous change and fix it the correct way.

There are two new PT options and they are the correct ones rowCheckbox and rowRadiobutton You can use like this.

The value for headerCheckbox is only for the select all header checkbox not for the rows.

const pt: ColumnPassThroughOptions = {
    // nothing appearing in DOM....
    rowCheckbox: {
      root: {
        className: 'ROOT',
      },
      icon: {
        className: 'ICON',
      },
      box: {
        className: 'BOX',
      },
    },
  };
<Column pt={pt} selectionMode="multiple" />

melloware added a commit to melloware/primereact that referenced this issue Jul 28, 2024
@melloware
Fix primefaces#6939: Datatable fix row checkbox/radiobutton PT
286c2f5
melloware added a commit to melloware/primereact that referenced this issue Jul 28, 2024
@melloware
Fix primefaces#6939: Datatable fix row checkbox/radiobutton PT
ce5e6b7
This was referenced Aug 3, 2024
Closed
Merged
@peconomou929 peconomou929 mentioned this issue Aug 15, 2024
Closed
@leoo1992 leoo1992 mentioned this issue Aug 19, 2024
Merged
@hiterharris hiterharris mentioned this issue Aug 19, 2024
Closed
@hiterharris hiterharris mentioned this issue Aug 27, 2024
Closed
@leoo1992 leoo1992 mentioned this issue Aug 27, 2024
Merged
@raymondhtet raymondhtet mentioned this issue Sep 25, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@melloware melloware

Labels
Component: Unstyled Issue related to unstyled/passthrough attributes
Projects
None yet
Milestone
10.8.0
2 participants
@melloware @peconomou929