title: How to dynamically create a TypeScript table in POWER BI
body: <p>Using d3 and typeScript is not that hard from html ...</p>
  
  <p>Example which i have created --</p>
  
  <pre><code>&lt;table id="view"&gt;
    &lt;thead&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>TypeScript</p>
  
  <pre><code>// the table rows, typically loaded from data file using d3.csv
      var hours = [
          { title: "Fredrik", one: 8, two: 5, three: 6, four: 9, five: 5, six: 8, seven: 8, eight: 0, nine: 8, ten: 12 },
          { title: "Yoakim", one: 4, two: 6, three: 8, four: 3, five: 8, six: 4, seven: 2, eight: 1, nine: 7, ten: 10  },
          { title: "Lars", one: 8, two: 12, three: 6, four: 8, five: 5, six: 8, seven: 8, eight: 10, nine: 8, ten: 13  },
      ];
  
      // column definitions
      var columns = [
          { head: 'UserName', cl: 'title', html: ƒ('title') },
          { head: 'one', cl: 'center', html: ƒ('one') },
          { head: 'two', cl: 'center', html: ƒ('two', two()) },
          { head: 'three', cl: 'num', html: ƒ('three', d3.format('$,')) },
          { head: 'four', cl: 'num', html: ƒ('four', d3.format('.1f')) },
          { head: 'five', cl: 'num', html: ƒ('five', d3.format('$,')) },
          { head: 'six', cl: 'num', html: ƒ('six', d3.format('.1f')) },
          { head: 'seven', cl: 'num', html: ƒ('seven', d3.format('$,')) },
          { head: 'eight', cl: 'num', html: ƒ('eight', d3.format('.1f')) },
          { head: 'nine', cl: 'num', html: ƒ('nine', d3.format('$,')) },
          { head: 'ten', cl: 'num', html: ƒ('ten', d3.format('.1f')) }
      ];
  
      // create table
      var table = d3.select('body')
          .append('table');
  
      // create table header
      table.append('thead').append('tr')
          .selectAll('th')
          .data(columns).enter()
          .append('th')
          .attr('class', ƒ('cl'))
          .text(ƒ('head'));
  
      // create table body
      table.append('tbody')
          .selectAll('tr')
          .data(hours).enter()
          .append('tr')
          .selectAll('td')
          .data(function(row, i) {
              return columns.map(function(c) {
                  // compute cell values for this specific row
                  var cell = {};
                  d3.keys(c).forEach(function(k) {
                      cell[k] = typeof c[k] == 'function' ? c[k](row,i) : c[k];
                  });
                  return cell;
              });
          }).enter()
          .append('td')
          .html(ƒ('html'))
          .attr('class', ƒ('cl'));
  
      function two() {
          var fmt = d3.format('02d');
          return function(l) { return Math.floor(l / 60) + ':' + fmt(l % 60) + ''; };
      }
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    &lt;style type="text/css"&gt;
      view, td, th {
    height:50;
  }
  
  th {
   background-color:black;
    color:white  
  }
  
  td {
    border: 1px solid black;
    background-color:#ccc;
    width:200px;
    text-align: center;
  
  }
      &lt;/style&gt;
  </code></pre>
  
  <p>Here is the jsFiddle: <a href="https://jsfiddle.net/christoferhansen/dpuk9n55/1/" rel="nofollow">https://jsfiddle.net/christoferhansen/dpuk9n55/1/</a></p>
  
  <p>Now my question is how can i use the same structure in the Power BI envirnment and get the similar kind of result !</p>
  
  <p>Any one knows any answer of this problem !</p>