DataTable: Checbox pass-through options not working

[peconomou929]

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.

[melloware]

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" />