Skip to content

Expose rowindex on html as a data attribute

Kevin Brubeck Unhammer requested to merge data-rowindex into master

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

Merge request reports