@tillhub/tableify

Creates html table with customizable headers, classes and cell contents.

Install

npm install --save @tillhub/tableify

Usage

Tableify takes two arguments: items and options.

| Argument | Type | Example | Required | |----------|------------------|-----------------------------------------------|----------| | items | Array of objects | [{ name: 'a' }, { name: 'b' }, { name: 'c' }] | true | | options | Object | { showHeaders: false } | false |

const tableify = require('@tillhub/tableify')

const items = [
  {
    name: 'Lipstick',
    vat_rate: 19,
    net: 6.58,
    currency: 'EUR'
  },
  {
    name: 'Shoelaces',
    vat_rate: 19,
    net: 7.34,
    currency: 'EUR'
  },
  {
    name: 'Apple',
    vat_rate: 7,
    net: 0.43
  },
  {
    name: 'Pears',
    vat_rate: 7,
    net: 0.77
  }
]

const options = {
  headers: [
    'name',
    'net',
    { field: 'vat_rate', show: true },
    { field: 'currency', show: false }
  ],
  headerCellClass: function(row, col) {
    if (col === 'vat_rate') return 'green'
  },
  bodyCellClass: function(row, col, content) {
    if (content === 'Apple') return 'apple'
    if (col === 'name') return 'red'
  },
  headerCellContent: function(row, col) {
    if (map[col]) {
      return map[col].custom || map[col].default
    }
  },
  bodyCellContent: function(row, col, content) {
    if (row.currency) {
      if (col === 'net') {
        return content.toLocaleString('de-DE', {
          style: 'currency',
          currency: row.currency
        })
      }
    }
  },
  hideRow: function(row) {
    if (row.name === 'Pears') return true
  }
}

console.log(tableify(items, options))

/* RESULT

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>net</th>
      <th class="green">VAT</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="red">Lipstick</td>
      <td>€6.58</td>
      <td>19</td>
    </tr>
    <tr>
      <td class="red">Shoelaces</td>
      <td>€7.34</td>
      <td>19</td>
    </tr>
    <tr>
      <td class="apple">Apple</td>
      <td>0.43</td>
      <td>7</td>
    </tr>
  </tbody>
</table>

*/

Options

There are multiple alternatives for the options object.

| Name | Description | Type | Default | |-------------------|------------------------------------------------------------------------------------------|------------------------------------|-----------------------------------| | headers | Array of strings with headers. If omitted, tableify will get all keys from item objects. | Array of strings | unique keys from all item objects | | headerCellClass | function that returns custom class names for a cell in the table header | Function(row, col)/String | -- | | bodyCellClass | function that returns custom class names for a cell in the table body | Function(row, col, content)/String | -- | | headerCellContent | function that returns custom content for a cell in table header | Function(row, col)/String | -- | | bodyCellContent | function that returns custom content for a cell in table body | Function(row, col, content)/String | -- | | hideRow | function that returns a boolean; if true, it will skip the row | Function(row)/Boolean | -- | | showHeaders | boolean that hides/shows the complete header section | Boolean | true |

License

MIT © qtotuan