How is Data-Table row highlight implemented?

Questions
1

In the Data-Table, an entire row is given a shading when hovered over. I’ve watched the DOM and dug through the documentation but am unable to unearth any CSS classes related to it, or see any DOM changes when the highlight happens.

In my use case I am trying to add a vertical highlight as well, and would love to match the shade applied (or change the default shade).

Has anyone figured out what where the css style (or javascript) is kept for the row highlight?

2

If you can check and read the source-code of data table, I guess you can understand what it exactly does https://github.com/framework7io/framework7/blob/master/src/core/components/data-table/data-table-class.js

4

I think I’ve found related CSS in the file at src/core/components/data-table/data-table.less that mentions hover. I think the only rule that relates to it is around line 46.


    tr.data-table-row-selected,
    .device-desktop & tr:hover {
      background: var(--f7-table-selected-row-bg-color);
    }

Thanks.

1 Like