Skip to content

Data-driven HTML tables with vanilla JavaScript

License

Notifications You must be signed in to change notification settings

divmgl/tabled.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

tabled.js

Build Status

Data-driven HTML tables with vanilla JavaScript

Usage

<table>
  <thead>
    <tr>
      <th>First Name</td>
      <th>Last Name</td>
      <th>Age</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Smith</td>
      <td>29</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
      <td>26</td>
    </tr>
  </tbody>
</table>

<script>
  tabled.create(document.getElementByTag("table")[0]);
</script>

UMD

$ npm install tabledjs
var tabled = require('tabledjs');
tabled.create(document.getElementByTag("table")[0]);

Schema specification

While it's very easy to specify a body for your table, you may want to dynamically populate it using JavaScript. For this, you will need to specify a schema.

At minimum, you will need to provide a <thead></thead> tag in your table.

<table>
  <thead>
    <th>First Name</th> <!-- Column index 0 -->
    <th>Last Name</th>  <!-- Column index 1 -->
    <th>Age</th>        <!-- Column index 2 -->
  </thead>
</table>

tabled will use these tags to create an initial schema for the table. By default, it will read these tags and convert them to camel case when creating your schema. Assuming your table looks like the latter, your schema now looks like this:

table.headers = [ "firstName", "lastName", "age" ]

The table can now be populated.

var tabled = require('tabledjs');
var table  = tabled.create(document.getElementByTag("table")[0], {
  data: [
    { firstName: "John", lastName: "Doe", age: "28" }
  ]
});

You can also update the table and it will adjust automatically.

table.data = [
  { firstName: "Jane", lastName: "Doe", age: "26" }
]

Interacting with tabled.js

You can toggle between pages by calling page and specifying a page number.

table.page(1);

You can also filter by a string by calling filter. Filtering is case-insensitive.

table.filter("john");

Roadmap

Feel free to open a pull-request and contribute to the development of tabled.js. Currently, these items are on the roadmap.

  • Hidden elements
  • Column ordering
  • Case-sensitive filtering

Tests

The test suite is on Node.js and uses PhantomJS with Mocha.

$ npm install -g
$ npm test

License

MIT

About

Data-driven HTML tables with vanilla JavaScript

Resources

License

Stars

Watchers

Forks

Packages

No packages published