Highcharts Dashboards Grid Sorting issue

by stitot

HTML

<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>

<div id="container"></div>

CSS

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

JavaScript

Dashboards.board('container', {
		editMode: {
    		enabled: true,
        contextMenu: {
        		enabled: true
        }
    },
		gui: {
  		layouts: [
    			{
        			rows: [
              		{
                  		cells: [
                      		{
                          		id: "fetched-columns"
                          }
                      ]
                  }
              ]
        	}
    	]
  	},
    dataPool: {
    		connectors: [
        		{
            	id: "fetch-data",
              type: "JSON",
              options: {
              		firstRowAsNames: false,
                	columnNames: ['time', 'open', 'high', 'low', 'close', 'volume'],
                	dataUrl: 'https://demo-live-data.highcharts.com/aapl-ohlcv.json',
                	enablePolling: true,
                	dataRefreshRate: 10,
                  beforeParse: function (data) {
                  	return data.map((item) => {
                    		const newItem = [...item];
                        newItem[1] = {value: newItem[1], status: 'ERROR'};
                        console.log(newItem)
                        return newItem;
                    });
                  }
              }
            }
        ]
    },
    components: [
    		{
        		renderTo: 'fetched-columns',
            type: 'Grid',
            connector: {
            		id: "fetch-data"
            },
            gridOptions: {
            		columns: [
                		{
                    		id: 'open',
                        useHTML: true,
                        cells: {
                        		formatter: function () {
                            		const value = this.value.value;
                                if(value <= 170) {
                                		return `<p style="color:#FF0000">Low</p>`
                                } else {
                                	  return `<p style="color: #008000">High</p>`
                                }
                            }
      ...