https://github.com/tillhub/tableify
Generate HTML table everywhere and for everything
https://github.com/tillhub/tableify
frontend html server simple tables
Last synced: 4 months ago
JSON representation
Generate HTML table everywhere and for everything
- Host: GitHub
- URL: https://github.com/tillhub/tableify
- Owner: tillhub
- Created: 2018-11-05T09:29:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-10-24T16:08:27.000Z (over 4 years ago)
- Last Synced: 2025-11-23T16:02:31.498Z (7 months ago)
- Topics: frontend, html, server, simple, tables
- Language: JavaScript
- Homepage:
- Size: 236 KB
- Stars: 8
- Watchers: 4
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# @tillhub/tableify
Creates html table with customizable headers, classes and cell contents.
[](https://www.npmjs.com/package/@tillhub/tableify) [](https://standardjs.com)
## Install
```bash
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 |
```js
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
Product
net
VAT
Lipstick
€6.58
19
Shoelaces
€7.34
19
Apple
0.43
7
*/
```
### 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](https://github.com/qtotuan)