How to Create html table like structure using fabric js?

I am trying to build schema builder similar to vertabelo. I’m using fabric.js for interactions. How can i create html table like structure where i can add columns and their types as shown in the image.

Answer

Use Html Table inside svg as shown below and convert it into image and use it as fabric object

var svgData = '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">' +
           '<foreignObject width="100%" height="100%">' +
           '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:30px">' +
             '<table border="1"><thead><tr><td>Title</td></tr></thead><tbody><tr><td>Id</td><td>char</td></tr></tbody></table>' + 
           '</div>' +
           '</foreignObject>' +
           '</svg>';

    // creating image from svg
    const dataUri = `data:image/svg+xml;base64,${window.btoa(svgData)}`;
    const img = new Image();
    img.onload = () => {
        var imgInstance = new fabric.Image(img, {
            left: 0,
            top: 0,
            width: 300,  
            height: 200,  
        });

        canvas.add(imgInstance);
        canvas.renderAll();
    };
    img.src = dataUri;