Using tablesaw with Angular2 and Webpack

[alelapi]

Anyone know how to use it in a Webpack+Angular2 project? I tried with webpack.config, including:

const TableSaw = require('tablesaw');

but i got this error: Exception: Call to Node module failed with error: TypeError: Cannot read property 'attachEvent' of undefined

So i tried to include it manually. In main layout page i added:

<link rel="stylesheet" href="tablesaw.css">
<script src="tablesaw.js"></script>
<script src="tablesaw-init.js"></script>

and to table: <table class="table-striped table-condensed tablesaw tablesaw-swipe" data-tablesaw-mode="swipe"> but i didn't get any result. Any suggestion?

[whiteboardmonk]

+1 facing similar issue while trying to include this manually in an Angular project (ionic framework)

[edmondko]

+1

[amrithyerramilli]

We have got this working with Angular 1.4.3 and Ionic Framework.

https://github.com/filamentgroup/tablesaw/#manual-initialization-of-tablesaw-components

• You should not use the tablesaw-init.js

• In the main page (usually index.html), add the script and style references

<link rel="stylesheet" href="tablesaw.css">
<script src="tablesaw.js"></script>
<script src="tablesaw-init.js"></script>

• In your view, add the necessary table markup

<table id="my-tab-content" tableSaw class="tablesaw tablesaw-swipe" data-tablesaw-minimap data-tablesaw-mode="swipe">
   <thead>
      <tr>
         <th class="title" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
         <th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
         <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
         <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
         <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
         <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
         <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
         <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
         <td>1</td>
         <td>2009</td>
         <td>83%</td>
         <td>$2.7B</td>
         <td>2009</td>
         <td>83%</td>
         <td>$2.7B</td>
      </tr>
      <tr>
         <td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
         <td>2</td>
         <td>1997</td>
         <td>88%</td>
         <td>$2.1B</td>
         <td>1997</td>
         <td>88%</td>
         <td>$2.1B</td>
      </tr>
      <tr>
         <td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
         <td>3</td>
         <td>2012</td>
         <td>92%</td>
         <td>$1.5B</td>
         <td>2012</td>
         <td>92%</td>
         <td>$1.5B</td>
      </tr>
   </tbody>
</table>

• In your controller add this to instantiate tablesaw :

$scope.$on('$viewContentLoaded', function(){
    //Here your view content is fully loaded !!
        angular.element(document).trigger("enhance.tablesaw");
    });

• If you are using Ionic Framework, use ionic's view loaded event.

Please note that you will have to trigger the event enhance.tablesaw on the document and not the individual table element as mentioned in the tablesaw docs

[zachleat]

@amrithyerramilli awesome comment, thank you! Custom events in jQuery and shoestring both bubble, that’s why we can trigger on the individual table elements (you’re probably already aware of this, but just adding it for completeness).

Everyone else: did @amrithyerramilli’s comment solve the issue? How can we make this easier in the plugin?

[zachleat]

I have finally tested a webpack build of Tablesaw and did some cleanup work to the module definition to get this working properly. It’ll be available in 3.0.6.

Working example code available here: https://github.com/filamentgroup/tablesaw/tree/master/demo/webpack

[zachleat]

3.0.6 is available.

[ArulRozario]

How can I initialize Tablesaw in angular 5 components?

[jdieguez89]

@ArulRozario Hi, you managed to initialize table saw in angular 5 component??