Handsontable example

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@31/dist/ag-grid-community.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/hyperformula@2/dist/hyperformula.full.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@31/styles/ag-grid.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@31/styles/ag-theme-alpine.css">
</head>
<body>
  <div id="myGrid" class="ag-theme-alpine" style="height: 400px;"></div>
  
</body>
</html>

JavaScript

// Initialize HyperFormula engine
    const hfInstance = HyperFormula.buildEmpty({
      licenseKey: 'gpl-v3'
    });
    
    // Create a new sheet
    const sheetName = hfInstance.addSheet('Sheet1');
    const sheetId = hfInstance.getSheetId(sheetName);
    
    // Initialize sheet with data (formulas will be set separately)
    hfInstance.setSheetContent(sheetId, [
      [10, 20, null],
      [15, 25, null],
      [5, 30, null]
    ]);
    
    // Add Named Expressions with ABSOLUTE references (using $)
    // Named expressions MUST use absolute cell references ($A$1) not relative ones (A1)
    hfInstance.addNamedExpression('SUM_ROW_0', '=Sheet1!$A$1+Sheet1!$B$1');
    hfInstance.addNamedExpression('SUM_ROW_1', '=Sheet1!$A$2+Sheet1!$B$2');
    hfInstance.addNamedExpression('SUM_ROW_2', '=Sheet1!$A$3+Sheet1!$B$3');
    
    // Store which formula/named expression is assigned to each row
    // This maps row index to the formula string that should appear in the editor
    const rowFormulas = {
      0: '=SUM_ROW_0',
      1: '=SUM_ROW_1',
      2: '=SUM_ROW_2'
    };
    
    // Set the formulas in the cells
    hfInstance.setCellContents({ sheet: sheetId, col: 2, row: 0 }, [['=SUM_ROW_0']]);
    hfInstance.setCellContents({ sheet: sheetId, col: 2, row: 1 }, [['=SUM_ROW_1']]);
    hfInstance.setCellContents({ sheet: sheetId, col: 2, row: 2 }, [['=SUM_ROW_2']]);
    
    // Log initial values of named expressions
    console.log('Named Expressions:');
    console.log('SUM_ROW_0:', hfInstance.calculateFormula('=SUM_ROW_0', sheetId));
    console.log('SUM_ROW_1:', hfInstance.calculateFormula('=SUM_ROW_1', sheetId));
    console.log('SUM_ROW_2:', hfInstance.calculateFormula('=SUM_ROW_2', sheetId));
    
    const gridOptions = {
      columnDefs: [
        { 
          field: 'value1', 
          headerName: 'Value 1', 
          editable: true,
          // valueGetter retrieves the cell value from HyperFormula
      ...