Display grid with minimal configuration

by stitot

HTML

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

<div id="container"></div>
<p class="highcharts-description">
    Grid with a bare-bone minimal configuration, using only the required <code>dataTable</code> API option.
</p>

CSS

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

* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

#container {
    padding: 8px;
}

.highcharts-description {
    padding: 0 10px;
}


@media (prefers-color-scheme: dark) {
    body {
        background-color: #141414;
        color: #ffffff;
    }
}

JavaScript

Grid.grid("container", {
  dataTable: {
    columns: {
      fluid1: ["Apples", "Pears", "Plums", "Bananas"],
      fluid2: [100, 40, 0.5, 200],
      fixed1: [1.5, 2.53, 5, 4.5],
      fixed2: [1.5, 2.53, 5, 4.5],
      fixed3: [1.9, 2.53, 5, 4.5],
    },
  },
  columns: [
    {
      id: "fixed1",
      width: 100,
    },
    {
      id: "fixed2",
      width: 100,
    },
    {
      id: "fixed3",
      width: 100,
    },
  ],
})