html-tablify
This package is used to convert json data to html.
Installation -
How to use -
var html_tablify = require('html-tablify');
var options = {
data: [{a: 1, b: 2}, {b: 1, a: 2}, {a: 4}]
};
var html_data = html_tablify.tablify(options);
console.log(html_data);
<table border=1 cellspacing=0 cellpadding=0>
<thead>
<tr> <th>a</th> <th>b</th> </tr>
</thead>
</tbody>
<tr> <td>1</td> <td>2</td> </tr>
<tr> <td>2</td> <td>1</td> </tr>
<tr> <td>4</td> <td> </td> </tr>
</tbody>
</table>
- To specify order of header use 'header' (array) in options -
var html_tablify = require('html-tablify');
var options = {
data: [{a: 1, b: 2}, {b: 1, a: 2}, {a: 4, c: 5}],
header: ['a', 'b', 'c']
};
var html_data = html_tablify.tablify(options);
console.log(html_data);
<table border=1 cellspacing=0 cellpadding=0>
<thead>
<tr> <th>a</th> <th>b</th> <th>c</th> </tr>
</thead>
</tbody>
<tr> <td>1</td> <td>2</td> <td> </td> </tr>
<tr> <td>2</td> <td>1</td> <td> </td> </tr>
<tr> <td>4</td> <td> </td> <td>5</td> </tr>
</tbody>
</table>
- To map header text to something else use 'header_mapping' in options -
var html_tablify = require('html-tablify');
var options = {
data: [{a: 1, b: 2}, {b: 1, a: 2}, {a: 4, c: 5}],
header_mapping: {
a: 'X',
c: 'Z'
}
};
var html_data = html_tablify.tablify(options);
console.log(html_data);
<table border=1 cellspacing=0 cellpadding=0>
<thead>
<tr> <th>X</th> <th>b</th> <th>Z</th> </tr>
</thead>
</tbody>
<tr> <td>1</td> <td>2</td> <td> </td> </tr>
<tr> <td>2</td> <td>1</td> <td> </td> </tr>
<tr> <td>4</td> <td> </td> <td>5</td> </tr>
</tbody>
</table>
- To override border(default 1), cellpadding(default 0) and cellspacing(default 0) use 'border', 'cellpadding' and 'cellspacing' in options -
var html_tablify = require('html-tablify');
var options = {
data: [{a: 1, b: 2}, {b: 1, a: 2}, {a: 4, c: 5}],
border: 5,
cellspacing: 2,
cellpadding: 3
};
var html_data = html_tablify.tablify(options);
console.log(html_data);
<table border=5 cellspacing=2 cellpadding=3>
<thead>
<tr> <th>a</th> <th>b</th> <th>c</th> </tr>
</thead>
</tbody>
<tr> <td>1</td> <td>2</td> <td> </td> </tr>
<tr> <td>2</td> <td>1</td> <td> </td> </tr>
<tr> <td>4</td> <td> </td> <td>5</td> </tr>
</tbody>
</table>
- To apply styling (css) use 'css' in options -
var html_tablify = require('html-tablify');
var options = {
data: [{a: 1, b: 2}, {b: 1, a: 2}, {a: 4, c: 5}],
css: 'table {border: 1px solid red}'
};
var html_data = html_tablify.tablify(options);
console.log(html_data);
<style>
table {
border: 1px solid red
}
</style>
<table border=1 cellspacing=0 cellpadding=0>
<thead>
<tr> <th>a</th> <th>b</th> <th>c</th> </tr>
</thead>
</tbody>
<tr> <td>1</td> <td>2</td> <td> </td> </tr>
<tr> <td>2</td> <td>1</td> <td> </td> </tr>
<tr> <td>4</td> <td> </td> <td>5</td> </tr>
</tbody>
</table>
- To add class to table use 'tableClass' in options -
var html_tablify = require('html-tablify');
var options = {
data: [{a: 1, b: 2}, {b: 1, a: 2}, {a: 4, c: 5}],
tableClass: 'my-table'
};
var html_data = html_tablify.tablify(options);
console.log(html_data);
<table border=1 cellspacing=0 cellpadding=0 class="my-table">
<thead>
<tr> <th>a</th> <th>b</th> <th>c</th> </tr>
</thead>
</tbody>
<tr> <td>1</td> <td>2</td> <td> </td> </tr>
<tr> <td>2</td> <td>1</td> <td> </td> </tr>
<tr> <td>4</td> <td> </td> <td>5</td> </tr>
</tbody>
</table>