Expose rowindex on html as a data attribute
Lets us use the hilite
functionality on the generated html without Vue.
Assuming these data attributes exist, we can (on our side) get highlighting with for examle:
const cells = Array.from(tableWrapper.querySelectorAll('[data-rowindex]')).map(elem => {
return {
elem,
rowindex: new Set(elem.getAttribute('data-rowindex').split(',')),
};
});
cells.forEach(cell => {
cell.elem.addEventListener('mouseover', event => {
cells.forEach(c => {
// While we wait for Firefox to implement Set.intersection:
let intersection = new Set([...cell.rowindex].filter(x => c.rowindex.has(x)));
if (intersection.size > 0) {
c.elem.style.backgroundColor = 'red';
}
});
});
cell.elem.addEventListener('mouseleave', event => {
cells.forEach(c => {
c.elem.style.backgroundColor = 'transparent';
});
});
});
(the above is just an example of how to use the data-attribute, not expected to go into this repo)
Edited by Kevin Brubeck Unhammer