JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highcharts/[email protected]/js/controls.js" type="module"></script>

<div class="demo">
    <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>
</div>

<highcharts-controls target="#container">
  <highcharts-control path="credits.enabled"></highcharts-control>
  <highcharts-control path="caption.text"></highcharts-control>
  <highcharts-control path="description.text"></highcharts-control>
  <highcharts-control path="rendering.columns.resizing.enabled"></highcharts-control>
  <highcharts-control path="columnDefaults.width"></highcharts-control>
</highcharts-controls>

CSS

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


body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

:root,
.highcharts-light {
    --code-background: #f7f7f7;
    --code-border: #e1e1e1;
}

@media (prefers-color-scheme: dark) {
    :root {
        --code-background: #2a2a2a;
        --code-border: #4a4a4a;
    }
}

.highcharts-dark {
    --code-background: #2a2a2a;
    --code-border: #4a4a4a;
}

#container {
    padding: 8px 12px;
}

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

code {
    font-family: Consolas, "courier new", monospace;
    line-height: 1em;
    background: var(--code-background);
    border: 1px solid var(--code-border);
    color: var(--highcharts-neutral-color-100);
    padding: 2px 4px;
    border-radius: 5px;
    display: inline-block;
}

JavaScript

grid = Grid.grid('container', {
  dataTable: {
    columns: {
      product: ['Apples', 'Pears', 'Plums', 'Bananas'],
      weight: [100, 40, 0.5, 200],
      price: [1.5, 2.53, 5, 4.5],
    },
  },
  credits: {
    enabled: false
  },
})