JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<div class="container">
<div class="highcharts-datagrid-container theme-allvariables">
    <div id="caption" class="highcharts-datagrid-caption">This is a caption</div>
    <table aria-labelledby="caption" aria-describedby="description">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Age</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John Doe</td>
                <td>[email protected]</td>
                <td>28</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jane Smith</td>
                <td>[email protected]</td>
                <td>34</td>
                <td>Los Angeles</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Mike Johnson</td>
                <td>[email protected]</td>
                <td>45</td>
                <td>Chicago</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Emily Davis</td>
                <td class="highlight">[email protected]</td>
                <td>22</td>
                <td>Houston</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Chris Lee</td>
                <td>[email protected]</td>
                <td>30</td>
                <td>Philadelphia</td>
            </tr>
        </tbody>
    </table>
    <div id="description" class="highcharts-datagrid-description">This is a description</div>
</div>
</div>

<div class="container">
<div class="highcharts-datagrid-container hcdg-theme-default">
    <div id="caption" class="highcharts-datagrid-caption">This is a caption</div>
    <table aria-labelledby="caption" aria-describedby="description">
        <thead>
            <tr>
                <th>ID</th>
               ...

CSS

@import url("https://code.highcharts.com/css/highcharts.css");

body {
    background-color: var(--highcharts-background-color);
}
div.container {
    margin: 20px;
    
}

.highcharts-datagrid-container * {
    --hcdg-table-border-radius: var(--border-radius, 0);

    --hcdg-font-weight: var(--font-weight, normal);
    --hcdg-font-size: var(--font-size, 1rem);
    --hcdg-font-family: var(--font-family, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif);
    --hcdg-color: var(--color, #000);
    --hcdg-font: var(--hcdg-font-weight) var(--hcdg-font-size) var(--hcdg-font-family);

    --hcdg-text-align: var(--text-align, left);

    --hcdg-header-font-weight: var(--header-font-weight, var(--hcdg-font-weight));
    --hcdg-header-font-size: var(--header-font-size, var(--hcdg-font-size));
    --hcdg-header-font-family: var(--header-font-family, var(--hcdg-font-family));
    --hcdg-header-color: var(--header-color, var(--hcdg-color));
    --hcdg-header-font: var(--hcdg-header-font-weight) var(--hcdg-header-font-size) var(--hcdg-header-font-family);

    --hcdg-header-text-align: var(--header-text-align, var(--hcdg-text-align));

    --hcdg-caption-font-weight: var(--caption-font-weight, var(--hcdg-font-weight));
    --hcdg-caption-font-size: var(--caption-font-size, var(--hcdg-font-size));
    --hcdg-caption-font-family: var(--caption-font-family, var(--hcdg-font-family));
    --hcdg-caption-color: var(--caption-color, var(--hcdg-color));
    --hcdg-caption-font: var(--hcdg-caption-font-weight) var(--hcdg-caption-font-size) var(--hcdg-caption-font-family);

    --hcdg-caption-text-align: var(--caption-text-align, var(--hcdg-text-align));

    --hcdg-description-font-weight: var(--description-font-weight, var(--hcdg-font-weight));
    --hcdg-description-font-size: var(--description-font-size, var(--hcdg-font-size));
    --hcdg-description-font-family: var(--description-font-family,...

JavaScript

const tables = [...document.querySelectorAll('table')];

const HIGHLIGHT_COLUMN = 'highcharts-datagrid-hovered-column';
const SYNC_COLUMN = 'highcharts-datagrid-synced-column';
const SYNC_ROW = 'highcharts-datagrid-synced-row';

function highlightAll(tables, colIndex, rowIndex, sourceTable) {
  tables.forEach(table => {
    const isSource = table === sourceTable;
    const colClass = isSource ? HIGHLIGHT_COLUMN : SYNC_COLUMN;
    [...table.querySelectorAll('tr')].forEach((tr, i) => {
      if (i === rowIndex && !isSource) {
        tr.classList.add(SYNC_ROW);
      }
      const cell = tr.cells[colIndex];
      if (cell) cell.classList.add(colClass);
    });
  });
}

function removeAllHighlights(tables, ...classes) {
  tables.forEach(table =>
    classes.forEach(cls =>
      table.querySelectorAll('.' + cls).forEach(el => el.classList.remove(cls))
    )
  );
}

tables.forEach(table => {
  table.querySelectorAll('th, td').forEach(cell => {
    cell.addEventListener('mouseover', () => {
      highlightAll(tables, cell.cellIndex, cell.parentNode.rowIndex, table);
    });
    cell.addEventListener('mouseout', () => {
      removeAllHighlights(tables, HIGHLIGHT_COLUMN, SYNC_COLUMN, SYNC_ROW);
    });
  });
});