JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script>

<h1>✅ Fixed height grid</h1>
<div style="height: 200px" id="grid1"></div>

<h1>✅ Percentage height grid inside fixed container</h1>
<div style="height: 200px">
    <div style="height: 100%" id="grid2"></div>
</div>

<h1>❌ Max height inside fixed container</h1>
<div style="height: 200px; overflow: hidden">
    <!-- <div style="max-height: 180px" id="grid3"></div> -->
    <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Row 1 — Column 1</td><td>Row 1 — Column 2</td></tr>
      <tr><td>Row 2 — Column 1</td><td>Row 2 — Column 2</td></tr>
      <tr><td>Row 3 — Column 1</td><td>Row 3 — Column 2</td></tr>
      <tr><td>Row 4 — Column 1</td><td>Row 4 — Column 2</td></tr>
      <tr><td>Row 5 — Column 1</td><td>Row 5 — Column 2</td></tr>
      <tr><td>Row 6 — Column 1</td><td>Row 6 — Column 2</td></tr>
      <tr><td>Row 7 — Column 1</td><td>Row 7 — Column 2</td></tr>
      <tr><td>Row 8 — Column 1</td><td>Row 8 — Column 2</td></tr>
      <tr><td>Row 9 — Column 1</td><td>Row 9 — Column 2</td></tr>
      <tr><td>Row 10 — Column 1</td><td>Row 10 — Column 2</td></tr>
      <tr><td>Row 11 — Column 1</td><td>Row 11 — Column 2</td></tr>
      <tr><td>Row 12 — Column 1</td><td>Row 12 — Column 2</td></tr>
      <tr><td>Row 13 — Column 1</td><td>Row 13 — Column 2</td></tr>
      <tr><td>Row 14 — Column 1</td><td>Row 14 — Column 2</td></tr>
      <tr><td>Row 15 — Column 1</td><td>Row 15 — Column 2</td></tr>
      <tr><td>Row 16 — Column 1</td><td>Row 16 — Column 2</td></tr>
      <tr><td>Row 17 — Column 1</td><td>Row 17 — Column 2</td></tr>
      <tr><td>Row 18 — Column 1</td><td>Row 18 — Column 2</td></tr>
      <tr><td>Row 19 — Column 1</td><td>Row 19 — Column 2</td></tr>
      <tr><td>Row 20 — Column 1</td><td>Row 20 — Column 2</td></tr>
    </tbody>
 ...

CSS

@import url('https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid-lite.css');

.fixed-placeholder {
  height: 100px;
  width: 100px;
  background-color: red;
}

table {
  border-collapse: collapse;
  width: 100%;
  max-width: 800px;
  margin: 16px auto;
}
th,
td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}

JavaScript

const dataTable = {
    columns: {
        product: Array(20).fill('key'),
        weight: Array(20).fill(0).map((_, i) => i)
    }
};

['grid1', 'grid2', 'grid3', 'grid4'].forEach(id => Grid.grid(id, { dataTable }));