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

let isSyncing = false;
let i = 0;

const syncSorting = async function () {
  if (isSyncing) {
    return;
  }

  const sourceGrid = this.viewport.grid;
  const sorting = sourceGrid.querying.sorting.currentSorting;

  isSyncing = true;
  try {
    await Promise.all(
      Grid.grids
        .filter((grid) => grid !== sourceGrid)
        .map((grid) => {
          return grid.viewport
            .getColumn(sorting.columnId)
            ?.sorting.setOrder(sorting.order);
        }),
    );
  } finally {
    isSyncing = false;
  }
};

["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],
      },
    },
    header: {
              enabled: i === 0 ? true : false
          },
    columnDefaults: { events: { afterSorting: syncSorting } },
  })
);