Dynatable.js + Faker.js in IPython

In [5]:

    

%%html
<!--
  Styles to make table headers nicer
-->
<!-- Remote link to stylesheet -->
<link rel="stylesheet" href="https://s3.amazonaws.com/dynatable-docs-assets/css/jquery.dynatable.css" type="text/css" />
<style type="text/css">
  # Local link to stylesheet
  #@import url("/static/custom/jquery.dynatable.css");

  .dynatable-head {
    background: #202060;
  }
  .dynatable-head a:focus, .dynatable-head a:hover {
    color: #fff;
  }
</style>


    

In [16]:

    

%%javascript
// Set libray paths
require.config({
  paths: {
    // Local link (example):
    // 'dtab': "/static/custom/jquery.dynatable"
    // Remote link(s):
    'dtab': "https://s3.amazonaws.com/dynatable-docs-assets/js/jquery.dynatable",
    'fakr': "https://cdnjs.cloudflare.com/ajax/libs/Faker/0.7.2/MinFaker"
  }
});
require(['dtab'], function(dynatable) {
  console.log('dynatable dynamically loaded...');
});


    

In [36]:

    

%%html
<br />
<table id="text-transform-example" class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Hobby</th>
<th>Favorite Music</th>
</tr>
</thead>
<tr>
  <td>Fred</td>
  <td>Roller Skating</td>
  <td>Disco</td>
</tr>
<tr>
  <td>Helen</td>
  <td>Rock Climbing</td>
  <td>Alternative</td>
</tr>
<tr>
  <td>Glen</td>
  <td>Travelling</td>
  <td>Classical</td>
</tr>
<tr>
  <td>Robin</td>
  <td>Working</td>
  <td>Rap</td>
</tr>
</table>
<br />


    

    










Name
Hobby
Favorite Music



  
Fred
  
Roller Skating
  
Disco


  
Helen
  
Rock Climbing
  
Alternative


  
Glen
  
Travelling
  
Classical


  
Robin
  
Working
  
Rap

In [1]:

    

%%javascript
// Download the notebook then
// press shift-Enter to convert the displayed table into a Dynatable
$('#text-transform-example').dynatable();


    

In [23]:

    

%%html
<!-- 
Start with an empty table
-->
<table id="show-my-json" class="table table-bordered">
  <thead>
    <th>Name</th>
    <th>Email</th>
    <th>Address</th>
  </thead>
  <tbody>
  </tbody>
</table>


    

    







  

    
Name
    
Email
    
Address
  
  

  

In [3]:

    

%%javascript
// Download the notebook then
// press shift-Enter to populate the html table with fake data and display a Dynatable
require.config({
  paths: {
    // Local link (example):
    // 'dtab': "/static/custom/jquery.dynatable"
    // Remote link(s):
    'fakr': "https://cdnjs.cloudflare.com/ajax/libs/Faker/0.7.2/MinFaker"
  }
});
require(['fakr'], function(faker) {
    
    console.log( 'faker dynamically loaded...' );

    // We need fake user data, lots of it.
    
    var COUNT = 500;

    var users = [];
    var user  = null;

    _.each( _.range(COUNT), function() {

        user = {
          name: faker.Name.findName(),
          email: faker.Internet.email(),
          address: faker.Address.streetAddress()
        };

        users.push( user );

    });
    
    console.log( users );
    
    $('#show-my-json').dynatable({
        dataset: {
            records: users
        }
    });
        
});


    

In [ ]: