CD2H gitForager

helpers/helper-html-table

Name: helper-html-table

Owner: Helpers

Description: Create an HTML table from JSON configuration.

Created: 2016-12-23 02:16:27.0

Updated: 2017-08-16 20:24:12.0

Pushed: 2016-12-23 02:29:46.0

Homepage: null

Size: 19

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

helper-html-table

Create an HTML table from JSON configuration.

Install

Install with npm:

m install --save helper-html-table

Usage

htmlTable = require('helper-html-table');

EJS

Use with an ejs style template engine like engine:

Engine = require('engine');
engine = new Engine();
ne.helper('htmltable', htmlTable);

tmpl = '<%= htmltable(table) %>';
data = {
ble: {
attr: 'class="table"',
thead: [['Foo', 'Bar', 'Baz']],
tbody: [
  ['foo', 'bar', 'baz'],
  ['FOO', 'BAR', 'BAZ']
]


html = engine.render(tmpl, data);
ole.log(html);

tml
le class="table">
head>
<tr>
  <th>Foo</th>
  <th>Bar</th>
  <th>Baz</th>
</tr>
thead>
body>
<tr>
  <td>foo</td>
  <td>bar</td>
  <td>baz</td>
</tr>
<tr>
  <td>FOO</td>
  <td>BAR</td>
  <td>BAZ</td>
</tr>
tbody>
ble>

Handlebars

Use with handlebars:

Handlebars = require('handlebars');
lebars.registerHelper('htmltable', htmlTable);

tmpl = '{{htmltable table}}';
data = {
ble: {
attr: 'class="table"',
thead: [['Foo', 'Bar', 'Baz']],
tbody: [
  ['foo', 'bar', 'baz'],
  ['FOO', 'BAR', 'BAZ']
]


compiled = handlebars.compile(tmpl);
html = compiled(data);
ole.log(html);

tml
le class="table">
head>
<tr>
  <th>Foo</th>
  <th>Bar</th>
  <th>Baz</th>
</tr>
thead>
body>
<tr>
  <td>foo</td>
  <td>bar</td>
  <td>baz</td>
</tr>
<tr>
  <td>FOO</td>
  <td>BAR</td>
  <td>BAZ</td>
</tr>
tbody>
ble>

API

Example

table = {
 attributes to add to the <table> tag
tr: 'class="table"',

 thead rows (each row has an array of columns)
ead: [['Foo', 'Bar', 'Baz']],

 tbody rows (each row has an array of columns)
ody: [
['foo', 'bar', 'baz'],
['FOO', 'BAR', 'BAZ']



html = htmlTable(table);
ole.log(html);
 <table class="table">
   <thead>
     <tr>
       <td>Foo</td>
       <td>Bar</td>
       <td>Baz</td>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>foo</td>
       <td>bar</td>
       <td>baz</td>
     </tr>
     <tr>
       <td>FOO</td>
       <td>BAR</td>
       <td>BAZ</td>
     </tr>
   </tbody>
 </table>

Params

table {Object}: object containing properties describing the rows and columns in a table head and body. See formats for additional options.
returns {String}: HTML table generated from configuration object.

Formats

The table object passed in may be in the following formats. These will all be normalized to the most expanded format before generating the table.

The table object may have the following root level properties:

attr: basic attr string that will be added to the <table> tag.
thead: section object that contains table head rows and columns
tbody: section object that contains the main table body rows and columns
tfoot: section object that contains table foot rows and columns

Attr

When a attr property is on the main table object, section objects, row objects, or column objects, the string will be included in the opening tag for the related html element. This allows customization of any attribute on the html element.


 adds class="table" to the <table> tag
tr: 'class="table"',
ead: { ... },
ody: { ... }

tml
le class="table">
head>...</thead>
body>...</tbody>
ble>

Sections

Section objects may be a simple array of row objects or a complex object with an attr property and a rows property.

simple array


row1', 'foo', 'bar', 'baz'],
row2', 'foo', 'bar', 'baz'],
row3', 'foo', 'bar', 'baz'],
row4', 'foo', 'bar', 'baz']

complex object


tr: 'class="error"',
ws: [
['row1', 'foo', 'bar', 'baz'],
['row2', 'foo', 'bar', 'baz'],
['row3', 'foo', 'bar', 'baz'],
['row4', 'foo', 'bar', 'baz']

Rows

Rows contain row objects that may be a simple array of column objects or complex objects with an attr proprety and a cols property. Rows are on section objects.

simple array


 rows property may be on section objects
ws: [
// each item in the row is a column
['foo', 'bar', 'baz'],
['FOO', 'BAR', 'BAZ']

complex object


 rows property may be on section objects
ws: [
{cols: ['foo', 'bar', 'baz']},
{attr: 'class="alternate"', cols: ['FOO', 'BAR', 'BAZ']}

Columns

Columns contain column objects that may be a simple string or a complex object with an attr property and a text property. Columns are on row objects.

simple string


 cols property may be on row objects
ls: ['foo', 'bar', 'baz']

complex object


 cols property may be on row objects
ls: [
{attr: 'align="right"', text: 'foo'},
{attr: 'align="center"', text: 'bar'},
{attr: 'align="left"', text: 'baz'}

Collapsed

A collapsed table object may represent each section as an array of arrays for rows and columns:

table = {
 1 row of 4 columns
ead: [['ID', 'Foo', 'Bar', 'Baz']],
 3 rows of 4 columns
ody: [
['row-1', 'foo', 'bar', 'baz'],
['row-2', 'foo', 'bar', 'baz'],
['row-3', 'foo', 'bar', 'baz'],

Expands into:

table = {
 1 row of 4 columns
ead: {
rows: [
  {cols: [{text: 'ID'}, {text: 'Foo'}, {text: 'Bar'}, {text: 'Baz'}]}
]

 3 rows of 4 columns
ody: {
rows: [
  {cols: [{text: 'row-1'}, {text: 'foo'}, {text: 'bar'}, {text: 'baz'}]},
  {cols: [{text: 'row-2'}, {text: 'foo'}, {text: 'bar'}, {text: 'baz'}]},
  {cols: [{text: 'row-3'}, {text: 'foo'}, {text: 'bar'}, {text: 'baz'}]},
]

Expanded

The most expanded format of a table object may have attr properties on any object and may include the thead, tbody, and tfoot sections:

table = {
tr: 'class="table"',
ead: {
attr: 'class="foo"',
rows: [
  {
    attr: 'class="bar"',
    cols: [
      {attr: 'class="primary"', text: 'ID'},
      {attr: 'class="sortable"', text: 'Foo'},
      {attr: 'class="disabled"', text: 'Bar'},
      {attr: 'class="filterable"', text: 'Baz'}
    ]
  }
]

ody: {
attr: 'class="baz"',
rows: [
  {
    attr: 'class="row-first row-odd"',
    cols: [{text: 'row-1'}, {text: 'foo'}, {text: 'bar'}, {text: 'baz'}]
  },
  {
    attr: 'class="row-even"',
    cols: [{text: 'row-1'}, {text: 'foo'}, {text: 'bar'}, {text: 'baz'}]
  },
  {
    attr: 'class="row-odd row-selected"',
    cols: [{text: 'row-1'}, {text: 'foo'}, {text: 'bar'}, {text: 'baz'}]
  },
  {
    attr: 'class="row-event error"',
    cols: [{text: 'row-1'}, {text: 'foo'}, {text: 'bar'}, {text: 'baz'}]
  },
]

oot: {
attr: 'class="qux"',
rows: [
  {
    attr: 'class="info"',
    cols: [
      {attr: 'class="summary"', text: 'Summary'},
      {attr: 'class="number"', text: '1'},
      {attr: 'class="number"', text: '2'},
      {attr: 'class="number"', text: '3'}
    ]
  }
]

This will generate the following table html:

le class="table">
head class="foo">
<tr class="bar">
  <th class="primary">ID</th>
  <th class="sortable">Foo</th>
  <th class="disabled">Bar</th>
  <th class="filterable">Baz</th>
</tr>
thead>
body class="baz">
<tr class="row-first row-odd">
  <td>row-1</td>
  <td>foo</td>
  <td>bar</td>
  <td>baz</td>
</tr>
<tr class="row-even">
  <td>row-1</td>
  <td>foo</td>
  <td>bar</td>
  <td>baz</td>
</tr>
<tr class="row-odd row-selected">
  <td>row-1</td>
  <td>foo</td>
  <td>bar</td>
  <td>baz</td>
</tr>
<tr class="row-event error">
  <td>row-1</td>
  <td>foo</td>
  <td>bar</td>
  <td>baz</td>
</tr>
tbody>
foot class="qux">
<tr class="info">
  <td class="summary">Summary</td>
  <td class="number">1</td>
  <td class="number">2</td>
  <td class="number">3</td>
</tr>
tfoot>
ble>

About

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Please read the contributing guide for avice on opening issues, pull requests, and coding standards.

Building docs

(This document was generated by verb-generate-readme (a verb generator), please don't edit the readme directly. Any changes to the readme must be made in .verb.md.)

To generate the readme and API documentation with verb:

m install -g verb verb-generate-readme && verb

Running tests

Install dev dependencies:

m install -d && npm test

Author

Brian Woodward

License

This file was generated by verb-generate-readme, v0.2.0, on December 22, 2016.

This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.