Abhilash Aruva Abhilash Aruva - 1 year ago 181
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 Source

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,  
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download