DataGrid vs table

by stitot

HTML

<link
  rel="stylesheet"
  href="https://code.highcharts.com/dashboards/css/datagrid.css"
/>
<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>

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

<div>
  <table class="collapse">
    <caption>
      border-collapse: collapse;
    </caption>
    <thead>
      <tr>
        <th>dessert</th>
        <th>calories</th>
        <th>fat</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="outline">Fruit Salad</td>
        <td>50</td>
        <td>0.3</td>
      </tr>
      <tr>
        <td>Rice Pudding</td>
        <td>118</td>
        <td class="outline">2</td>
      </tr>
      <tr>
        <td>Custard</td>
        <td class="outline">122</td>
        <td>3.5</td>
      </tr>
      <tr>
        <td>Bread Pudding</td>
        <td>153</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>

<div>
  <table class="separate">
    <caption>
      border-collapse: separate;
    </caption>
    <thead>
      <tr>
        <th>dessert</th>
        <th>calories</th>
        <th>fat</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="outline">Fruit Salad</td>
        <td>50</td>
        <td>0.3</td>
      </tr>
      <tr>
        <td>Rice Pudding</td>
        <td>118</td>
        <td class="outline">2</td>
      </tr>
      <tr>
        <td>Custard</td>
        <td class="outline">122</td>
        <td>3.5</td>
      </tr>
      <tr>
        <td>Bread Pudding</td>
        <td>153</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

:root {
            --border: 2px;
            --inset: 0px;
            --outset: 1px;
            --padding: 8px;
        }

        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);    
        }

        /* Inserting border-bottom on rows since that is common but not part of default theme */
        .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);
        }
        /* End overrides */




        /* Preferred implementation */
        table.collapse {
            border-collapse: collapse;
            font-family: Helvetica, Arial, sans-serif;
            table-layout: fixed;
            width: 100%;
            color: var(--highcharts-neutral-color-100);
            background-color: var(--highcharts-background-color);
            border: var(--border) solid...

JavaScript

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],
    },
  },
  caption: {
    text: "border-collapse: collapse;",
  },
  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}",
      },
    },
  ],
})