JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
  <script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
  <script src="https://code.highcharts.com/dashboards/modules/dashboards-plugin.js"></script>
  
  
  <div id="container"></div>

CSS

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

JavaScript

Dashboards.board("container", {
  gui: {
    layouts: [
      {
        id: "layout-1",
        rows: [
          {
            cells: [
              {
                id: "datagrid",
              },
            ],
          },
        ],
      },
    ],
  },
  dataPool: {
    connectors: [
      {
        id: "connector",
        type: "CSV",
        options: {
          csv: `a, b
            2,3
            7,3
            2,7
            2,8
            1,3
            1,3
            `,
          firstRowAsNames: true,
        },
      },
    ],
  },
  components: [
    {
      cell: "datagrid",
      type: "DataGrid",
      dataGridOptions: {
        columnHeaders: {
          enabled: false,
        },
      },
      connector: {
        id: "connector",
      },
    },
  ],
});