How to Create html table like structure using fabric js?

by

vertablo schema builder image

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.

45 thoughts on “How to Create html table like structure using fabric js?”

  1. 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;
    Reply

Leave a Comment