Abhilash Aruva Abhilash Aruva - 1 month ago 37
AngularJS Question

How to Create html table like structure using fabric js?

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.

Answer

Use Html Table inside svg as shown below and conver 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
    var DOMURL = window.URL || window.webkitURL || window;
    var img = new Image();
    var svg = new Blob([svgData], {type: 'image/svg+xml'});
    var url = DOMURL.createObjectURL(svg);
    img.src = url; 

    var imgInstance = new fabric.Image(img, {
      left: 0,
      top: 0,
      width: 200,
      height: 100,  
    });
    canvas.add(imgInstance);