Minimal Grid

author(s): Sebastian Bochan

by stitot

HTML

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

<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>

CSS

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

@media (prefers-color-scheme: dark) {
    body {
        background-color: #292929;
        color: #eee;
    }
}

JavaScript

["container1", "container2", "container3"].forEach((containerId) =>
  Grid.grid(containerId, {
    dataTable: {
      columns: {
        product: ["Apples", "Pears", "Plums", "Bananas"],
        weight: [100, 40, 0.5, 200],
        price: [1.5, 2.53, 5, 4.5],
      },
    },
    rendering: {
      header: {
        enabled: containerId !== "container2",
      },
    },
    credits: {
        enabled: containerId !== "container2",
      },
    columnDefaults: {
      events: {
        afterSorting: function () {
          const sourceGrid = this.viewport.grid;
          const sorting = sourceGrid.querying.sorting.currentSorting;

          Grid.grids.forEach((grid) => {
            if (sourceGrid !== grid) {
              grid.querying.sorting.setSorting(sorting.order, sorting.columnId);
              grid.viewport.updateRows();

              for (const col of grid.viewport.columns) {
                  col.sorting?.addHeaderElementAttributes();
              }

              grid.a11y?.userSortedColumn(order);
            }
          });
        },
      },
    },
  }),
);