Handsontable in ForeignObject

by Roman Bruckner

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" />
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
        <svg>
          <foreignObject width="600" height="300">
            <div xmlns="http://www.w3.org/1999/xhtml" id="hot"></div>
          </foreignObject>
        </svg>

JavaScript

const container = document.getElementById('hot');

const hot = new Handsontable(container, {
    data: [
        ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
        ['2019', 10, 11, 12, 13],
        ['2020', 20, 11, 14, 13],
        ['2021', 30, 15, 12, 13]
    ],
    rowHeaders: true,
    colHeaders: true,
    height: 'auto',
    licenseKey: 'non-commercial-and-evaluation' // for non-commercial use only
});