Output: Initialize Highcharts Grid Pro with API data

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>


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

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid-lite.css");

JavaScript

const API_BASE = "https://demo-data-server.highdev.dev";
const columnsInclude = ["employeeId", "firstName", "lastName", "department"];

// Fetch a page from the server
async function fetchData() {
  const params = new URLSearchParams({
    dataset: "small",
    format: "js",
    columnsInclude: columnsInclude.join(","),
    limit: 100
  });

  const res = await fetch(`${API_BASE}/data?${params.toString()}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

async function initGrid() {
  try {
    const {data} = await fetchData();
    grid = Grid.grid("container", {
      dataTable: {
        columns: data,
      },
      rendering: {
        rows: {
          minVisibleRows: 10,
        },
      }
    });

  } catch (err) {
    console.error("Error:", err);
  }
}

initGrid();