style rowheader identical to row

[Hugh Anderson]

In our Design System it is required to have checkbox column with identical appearance to other columns.  I tried a few approaches to achieve that with smart theme system but it does not seem possible.  We use the webcomponent implementation and it is limited to the available variables due to shadow dom.

Our Design System depicts a checkbox in a column that has the same background color as other cells in that row.  So if that row is hovered, or selected, or has alternating row background color, the checkbox column needs to have the same background color as the rest of the columns.  Similarly in our Design we have no vertical border so we need to have no vertical border on row header.  Basically it needs to appear as a seamless bar that all has the same background and border.

In smart lib it seems there is some opinion that checkbox column is considered row header and row header should have a background color of surface and be treated more like a column header.  Request to support a null or transparent option for row header background and foreground color which means to inherit that from the row’s background color definition, for at rest, hover, and selected states.  I tried entering transparent color in theme builder but still the checkbox column background color not matches.

Ability to attach/upload/paste pictures is not present in this forum or I would share a picture of our grid design we are trying to achieve.  I have also a json file exported from the themebuilder with all of the options I have applied, which would be useful to share for troubleshooting, but it is not possible.

[svetoslav_borislavov]

Hi,

You can send us pictures and files here: svetoslav@jqwidgets.com
To match the background of the checkbox column with the other columns you can do the following:
In an onCellRender callback, you can select every smart-grid-cell with an attribute header.
Then remove the attributes ‘header’, ‘freeze’ and set the ‘role’ attribute to ‘gridcell’.

Here is an example of this: https://codepen.io/dkeamcaksoem/pen/eYrXOEP

To remove the column header lines, you can set the ‘showColumnHeaderLines’ of the ‘appearance’ object to the grid.
This is also shown in the above example.

Hope this help, if not, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts