Skip to content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hecatomb</title>
</head>
<body>
<div class="hecatomb"></div>

<!-- Example AG Grid tables for the hecatomb view to discover. -->
<h3 style="font-family: sans-serif">Client-side row model</h3>
<div id="example-grid" style="height: 300px; width: 600px"></div>

<h3 style="font-family: sans-serif">Server-side row model</h3>
<div id="server-grid" style="height: 300px; width: 600px"></div>

<script src="https://cdn.jsdelivr.net/npm/ag-grid-enterprise@36.0.0/dist/ag-grid-enterprise.min.js"></script>
<script>
  // --- Client-side row model grid -----------------------------------------
  const clientGridOptions = {
    columnDefs: [
      { field: "make" },
      { field: "model" },
      { field: "price" },
      { field: "electric" },
    ],
    rowData: [
      { make: "Tesla", model: "Model Y", price: 64950, electric: true },
      { make: "Ford", model: "F-Series", price: 33850, electric: false },
      { make: "Toyota", model: "Corolla", price: 29600, electric: false },
      { make: "Mercedes", model: "EQA", price: 48890, electric: true },
      { make: "Fiat", model: "500", price: 15774, electric: false },
    ],
  };
  agGrid.createGrid(document.getElementById("example-grid"), clientGridOptions);

  // --- Server-side row model grid -----------------------------------------
  // A fake "backend": an in-memory dataset served in blocks via a datasource,
  // so hecatomb can exercise the server-side read/inject paths.
  const sectors = ["Tech", "Energy", "Finance", "Health", "Retail"];
  const serverData = Array.from({ length: 60 }, (_, i) => ({
    symbol: "SYM" + String(i + 1).padStart(3, "0"),
    sector: sectors[i % sectors.length],
    price: Math.round((20 + Math.random() * 480) * 100) / 100,
    change: Math.round((Math.random() * 10 - 5) * 100) / 100,
    active: Math.random() > 0.3,
  }));

  const serverDatasource = {
    getRows(params) {
      const { startRow, endRow } = params.request;
      const rows = serverData.slice(startRow, endRow);
      // Simulate async network latency.
      setTimeout(() => params.success({ rowData: rows, rowCount: serverData.length }), 50);
    },
  };

  agGrid.createGrid(document.getElementById("server-grid"), {
    rowModelType: "serverSide",
    cacheBlockSize: 20,
    columnDefs: [
      { field: "symbol" },
      { field: "sector" },
      { field: "price" },
      { field: "change" },
      { field: "active" },
    ],
    serverSideDatasource: serverDatasource,
  });
</script>

<script type="module" src="/hecatomb.js"></script>
</body>
</html>