JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<link
  rel="stylesheet"
  href="http://localhost:3030/code/dashboards/css/datagrid.css"
/>
<script src="http://localhost:3030/code/dashboards/datagrid.js"></script>

<div id="datagrid"></div>

<div><input type="checkbox" id="update" checked />Virtualization active</div>

CSS

:root {
  --border: 0px;
  --inset: 0px;
  --padding: 0px;
  --cell-border: 3px;
}

div {
  margin: 20px; /* Overrides e.g. div.highcharts-datagrid-header-cell-content. We might need a resetter? */
}

#datagrid {
  height: 250px;
}

/* Just overrides for the --variables to kick in */
.highcharts-datagrid-container,
.highcharts-datagrid-container * {
  /* See resetter comment above */
  margin: unset;
  padding: unset;
  border: unset;
  line-height: unset;
}

.highcharts-datagrid-table {
  border: var(--border) solid var(--highcharts-neutral-color-20);
}

.highcharts-datagrid-table thead {
  border-bottom: var(--border) solid var(--highcharts-neutral-color-20);
}

.highcharts-datagrid-table thead tr {
  border-top: var(--border) solid var(--highcharts-neutral-color-20);
}

.highcharts-datagrid-table thead th {
  border-left: var(--border) solid var(--highcharts-neutral-color-20);
}

.highcharts-datagrid-table tbody tr {
  border-bottom: var(--border) solid var(--highcharts-neutral-color-20);
}

.highcharts-datagrid-table tbody td {
  border-left: var(--border) solid var(--highcharts-neutral-color-20);
  padding: var(--padding) !important;
}
/* End overrides */

.outline {
  border: calc(var(--border) + var(--cell-border)) solid red !important;
  box-shadow: inset 0 0 0 var(--inset, 0) red !important;
}

td:hover {
  border: calc(var(--border) + var(--cell-border)) solid green !important;
  box-shadow: inset 0 0 0 var(--inset, 0) green !important;
}

JavaScript

let virtual = true;
const datagrid = DataGrid.dataGrid("datagrid", {
  dataTable: {
    columns: {
      dessert: [
        "Fruit Salad",
        "Rice Pudding",
        "Custard",
        "Bread Pudding"
      ],
      calories: [50, 118, 122, 153],
      fat: [0.3, 2.0, 3.5, 4.0]
    },
  },
  rendering: {
    rows: {
      virtualization: virtual,
    },
  },
  credits: {
    enabled: false
  },
  columnDefaults: {
    cells: {
      editable: true,
    },
  },
  columns: [
    {
      id: "dessert",
      cells: {
        formatter: function(){
            if (this.value == "Fruit Salad") this.htmlElement.classList.add("outline");
            return this.value;
      }
      },
    },
    {
      id: "fat",
      cells: {
        className: "{#if (eq value 2)}outline{/if}",
      },
    },
    {
      id: "calories",
      cells: {
        className: "{#if (eq value 122)}outline{/if}",
      },
    },
    
  ],
});



document.getElementById('update').addEventListener('click', e => {

    virtual = !virtual;

    console.log(virtual);

    const options = {
        rendering: {
            rows: {
                virtualization: virtual,
            },
         }
    };
   
    datagrid.update(options);

});