html-table-cli
Create interactive tables from JSON on the command-line.
key features
- takes JSON via stdin, writes a standalone HTML file to stdout
- alternatively, view instantly in browser with
--open
- customize column-specific rendering through arguments
- uses
react-table
install
npm install -g html-table-cli
usage
cat data.json | html-table
options
Usage: html-table [options]
Render JSON as an interactive table to be viewed in a web browser.
By default, reads JSON from stdin and renders HTML to stdout.
Expected structure of input is [ object, object, ... ], where each object is
of the same shape.
-o, --open write to a temp file and open in browser
-h, --help view help
Customization:
--col.$key.width set width of a column
--col.$key.header set how header for a column is rendered
--col.$key.cell set how cell for a column is rendered
--col.$key.parse function to apply to values of specific column
--col.$key.filterable make column filterable
--cols comma-separated list of keys to be shown as columns
--generated-at show a timestamp of page generation at bottom
--[no-]pagination enable & disable pagination
Where $key is name of a key that appears in the provided list of objects.
examples
The examples below use npx
that comes with npm to install html-table-cli
on
demand, hence no installation is necessary to run them.
trending repositories on github
curl -s https://github-trending-api.now.sh/repositories\?since=weekly |\
npx html-table-cli -o --generated-at \
--cols project,description,languageColor,language,stars,forks \
--col.project.cell '<a href="${url}">${author}/${name}</a>' \
--col.project.width 250 \
--col.languageColor.width 20 \
--col.languageColor.cell \
'<div style="background-color: ${languageColor}; border-radius: 500px; width: 10px; height: 10px; display: inline-block;" />' \
--col.languageColor.header '' \
--col.language.width 120 \
--col.stars.width 100 \
--col.forks.width 100
https://raine.github.io/html-table-cli/github-trending.html
countries
curl -s https://restcountries.eu/rest/v2/all | \
npx html-table-cli -o \
--cols flag,code,name,population,area,capital,tld,languages \
--col.flag.cell '<div style="text-align: center"><img src="${flag}" height="20" /></div>' \
--col.flag.header '' \
--col.flag.width 50 \
--col.code.width 40 \
--col.code.cell '${alpha2Code}' \
--col.code.header '' \
--col.name.cell '<span>${name} (${nativeName})</span>' \
--col.name.filterable \
--col.tld.cell '<code>${topLevelDomain[0]}</code>' \
--col.tld.header 'TLD' \
--col.tld.width 50 \
--col.languages.cell '<span>${languages.map(x => x.name).join(", ")}</span>' \
--col.languages.header 'Languages' \
--col.population.cell '${population.toLocaleString()}' \
--col.area.cell '${area.toLocaleString()}'
https://raine.github.io/html-table-cli/countries.html
other notes
Goes well with ramda-cli
. Manipulate the
JSON before passing to html-table-cli
or use to convert a csv file to json.
e.g. cat mydata.csv | ramda -i csv identity | html-table