helper-html-table

Create an HTML table from JSON configuration.

Install

Install with npm:

$ npm install --save helper-html-table

Usage

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

EJS

Use with an ejs style template engine like engine:

var Engine = require('engine');
var engine = new Engine();
engine.helper('htmltable', htmlTable);
 
var tmpl = '<%= htmltable(table) %>';
var data = {
  table: {
    attr: 'class="table"',
    thead: [['Foo', 'Bar', 'Baz']],
    tbody: [
      ['foo', 'bar', 'baz'],
      ['FOO', 'BAR', 'BAZ']
    ]
  }
}
var html = engine.render(tmpl, data);
console.log(html);

<table class="table">
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
      <th>Baz</th>
    </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>

Handlebars

Use with handlebars:

var Handlebars = require('handlebars');
handlebars.registerHelper('htmltable', htmlTable);
 
var tmpl = '{{htmltable table}}';
var data = {
  table: {
    attr: 'class="table"',
    thead: [['Foo', 'Bar', 'Baz']],
    tbody: [
      ['foo', 'bar', 'baz'],
      ['FOO', 'BAR', 'BAZ']
    ]
  }
}
var compiled = handlebars.compile(tmpl);
var html = compiled(data);
console.log(html);

<table class="table">
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
      <th>Baz</th>
    </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>

API

Example

var table = {
  // attributes to add to the <table> tag
  attr: 'class="table"',
 
  // thead rows (each row has an array of columns)
  thead: [['Foo', 'Bar', 'Baz']],
 
  // tbody rows (each row has an array of columns)
  tbody: [
    ['foo', 'bar', 'baz'],
    ['FOO', 'BAR', 'BAZ']
  ]
};
 
var html = htmlTable(table);
console.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
  attr: 'class="table"',
  thead: { ... },
  tbody: { ... }
}

<table class="table">
  <thead>...</thead>
  <tbody>...</tbody>
</table>

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

{
  attr: 'class="error"',
  rows: [
    ['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
  rows: [
    // each item in the row is a column
    ['foo', 'bar', 'baz'],
    ['FOO', 'BAR', 'BAZ']
  ]
}

complex object

{
  // rows property may be on section objects
  rows: [
    {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
  cols: ['foo', 'bar', 'baz']
}

complex object

{
  // cols property may be on row objects
  cols: [
    {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:

var table = {
  // 1 row of 4 columns
  thead: [['ID', 'Foo', 'Bar', 'Baz']],
  // 3 rows of 4 columns
  tbody: [
    ['row-1', 'foo', 'bar', 'baz'],
    ['row-2', 'foo', 'bar', 'baz'],
    ['row-3', 'foo', 'bar', 'baz'],
  ]
};

Expands into:

var table = {
  // 1 row of 4 columns
  thead: {
    rows: [
      {cols: [{text: 'ID'}, {text: 'Foo'}, {text: 'Bar'}, {text: 'Baz'}]}
    ]
  },
  // 3 rows of 4 columns
  tbody: {
    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:

var table = {
  attr: 'class="table"',
  thead: {
    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'}
        ]
      }
    ]
  },
  tbody: {
    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'}]
      },
    ]
  },
  tfoot: {
    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:

<table class="table">
  <thead 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>
  <tbody 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>
  <tfoot 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>
</table>

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:

$ npm install -g verb verb-generate-readme && verb

Running tests

Install dev dependencies:

$ npm install -d && npm test

Author

Brian Woodward

• github/doowb
• twitter/doowb

License

Copyright © 2016, Brian Woodward. Released under the MIT license.

---

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