Abhilash Aruva Abhilash Aruva - 5 months ago 103
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.


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>' +

    // 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,