Show huge tables in any device

We use Clusterize.js to avoid the full render and CSS Grid to fix our header

by Génesis García Morilla

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.js"></script>
<table>
  <thead><tr></tr></thead>
  <tbody id="contentArea" class="clusterize-scroll clusterize-content">
    <tr class="clusterize-no-data">
      <td>Loading data…</td>
    </tr>
  </tbody>
</table>

CSS

body {
  margin: 0;
  color: #252525;
  font-family: roboto;
  background-color: cornsilk;
}

.clusterize-scroll {
  max-height: calc(100vh - 55px);
}

table {
  display: inline-grid;
  grid-template-areas:
  "head-fixed"
  "body-scrollable";
}

thead {
  grid-area: head-fixed;
  background-color: cadetblue;
}

tbody {
  grid-area: body-scrollable;
  overflow-x: hidden !important;
}

tr:nth-child(even) {
  background-color: floralwhite;
}

th, td {
  min-width: 200px;
  padding: 5px 10px;
  text-align: left;
  border: 1px solid #ccc;
}

td:hover {
  font-weight: bold;
}

JavaScript

const columns = 500
const rows = 10

document.querySelector('thead > tr').innerHTML = 
  Array(rows).fill().reduce((acc, e, i) => acc += `<th>Random ${i + 1}</th>`, '')

const data = Array(columns).fill().map(() => 
  `<tr>${Array(rows).fill().reduce(acc => acc += `<td>${Math.random()}</td>`, '')}</tr>`)
  
new Clusterize({
  rows: data,
  scrollId: 'contentArea',
  contentId: 'contentArea'
})