Infovis NPM | npm.io

TableVis

Live demo here

Install

npm install infovis

How to use in VueJS projects

<script>
import infovis from "infovis";
import "infovis/dist/infovis.css";

export default {
  mounted () {
    const conf = {
      // ’tableId’ is the id of our html table
      extractor: infovis.extractors.tableIdExtractor.getTable('tableId'),
      // our new table will be inserted
      // in div with id ’divId’
      newTableInDiv: document.getElementById('divId'),
      // replace will be the method to insert our new table
      // options are: append, insertBefore, replace 
      tableInsertMethod: 'replace',
      // div with id ’chartsDiv’ will be used
      // to insert our new table
      chartsDiv: document.getElementById('chartsDiv')
    }
    infovis.transformTable(conf)
  }
};
</script>

How to use in without VueJS

<head>
    <script src="https://unpkg.com/vue"></script>
    <script src="path/to/infovis.umd.js"></script>
    <link rel="stylesheet" href="path/to/infovis.css">
</head>

<script>
    new Vue({
      created () {
        const conf = {
          // ’tableId’ is the id of our html table
          extractor: infovis.default.extractors.tableIdExtractor.getTable('tableId'),
          // our new table will be inserted
          // in div with id ’divId’
          newTableInDiv: document.getElementById('divId'),
          // replace will be the method to insert our new table
          // options are: append, insertBefore, replace 
          tableInsertMethod: 'replace',
          // div with id ’chartsDiv’ will be used
          // to insert our new table
          chartsDiv: document.getElementById('chartsDiv'),
          // persistence could be true or false
          // depending if we want to persis our actions out not
          // by default is true
          persistence: false
        }
        infovis.default.transformTable(conf)
      }
    })
  </script>