bookstoreHTML/grid.html at main · mr-body/bookstoreHTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo Handsontable com Fórmulas</title>

    <!-- Link para o CSS do Handsontable -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.0.0/dist/handsontable.full.min.css">
</head>
<body>

    <!-- Elemento onde a tabela será criada -->
    <div id="example1" class="hot"></div>

    <!-- Script do Handsontable -->
    <script src="https://cdn.jsdelivr.net/npm/handsontable@11.0.0/dist/handsontable.full.min.js"></script>

    <!-- Adicionar o script para o HyperFormula (engine para fórmulas) -->
    <script src="https://cdn.jsdelivr.net/npm/handsontable@11.0.0/dist/standalone/hyperformula.full.min.js"></script>

    <script>
        // Criando uma tabela Handsontable dentro do elemento com id "example1"
        var container = document.querySelector('#example1');
        var hot = new Handsontable(container, {
            data: [
                ["", "A", "B", "C", "D"],
                ["1", 1, 2, 3, "=A2+B2"],
                ["2", 4, 5, 6, "=A3+B3"],
                ["3", 7, 8, 9, "=A4+B4"]
            ],
            colHeaders: true,
            rowHeaders: true,
            contextMenu: true,
            formulas: {
                engine: HyperFormula // Configuração do engine para cálculos de fórmulas
            },
            licenseKey: 'non-commercial-and-evaluation' // Para uso não comercial
        });
    </script>

</body>
</html>