heiho

Quick spreadsheet viewer in vanilla JS

View the Project on GitHub kktsvetkov/heiho

Heihō

Quick spreadsheet viewer in vanilla JS

Heihō

What it does ?

The heiho.js script is quick and simple spreadsheet viewer. It is meant to preview the contents of csv files inside your browser without needing any other tools. It uses plain vanilla javascript so it has no dependencies, but for the applied styling from the css file.

This is not a spreadsheet editor, this is a preview tool only.

How to use ?

Simply include both the javascript file and the css stylesheet in your HTML document. It’s best if you put them at the bottom, close to the closing <\body> tag.

<link rel="stylesheet" href="/path/to/heiho.css" />
<script src="/path/to/heiho.js"></script>

Or include it via jsDelivr CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kktsvetkov/heiho@latest/heiho.css" />
<script src="https://cdn.jsdelivr.net/gh/kktsvetkov/heiho@latest/heiho.js"></script>

Once included in your document, simply call Heiho() and pass the data as argument

var data = [ ['a', 'b', 'c'], [1,2,3], [4,5,6] ];
Heiho(data);

You can modify some of the output using a second argument that passes additional options

Heiho(data, {max:20}); // shows only 20 rows from data

Explore more cases in the examples section below.

Options

There is a small set of options used to influence the output of the spreadsheet preview.

Options are passed as a second argument to Heiho() function.

Heiho(data, { max: 20, title: 'proba.csv' });

You can add more elements to the options argument which you can later use in some of the functions inside it such as options.title and options.truncate.

Examples

Let’s explore few examples of what you can do with Heihō

Title

You can modify what is rendered in the header title of the preview. The basic approach here is to just pass the title as a string in the options, like this:

Heiho(data, { title: 'users.csv' });

You can also do more with it if you pass a function as the title. In that case it will be executed to populate the contents of the header title will be. The arguments are the header title element, and the options used.

var file = {filename: 'Proba.csv', size: '123KB', created: '2009-08-21 14:01:36'}
Heiho(data, { title: function(el, o)
	{
		el.innerHTML = '<b>'
			+ file.filename + '<\/b> <code>'
			+ file.size + '<\/code> '
			+ file.created;
	}
});

Truncate

Similar to how options.title is used as a function, options.truncate is used to populate the contents of the “truncate” element (the warning shown when there are more rows to preview than the options.max restriction). This function gets more arguments:

/**
* @param {DomElement} el the truncate element
* @param {Integer} max
* @param {Array|Object} data data previewed
* @param {Object} o options
*/
options.truncate = function(el, max, data, o)
{
	el.innerHTML = 'Showing only first ' + max + ' rows';
	el.style.display = '';
}

Papa Parse

You can use the popular Papa Parse (github) library to parse CSV data inside your browser. You can use it together with Heihō to preview the result from the CSV parsing

Papa.parse(file, {
	complete: function(results) {
		Heiho(results.data);
	}
});

Explore all the examples on papaparse.com, they are a blast!

Here’s an example of Papa Parse and Heiho previewing a remote csv file:

Papa.parse("http://example.com/file.csv", {
	download: true,
	complete: function(results) {
		Heiho(results.data);
	}
});

Demo

Here’s a quick and silly example with a list of all the members of Monty Python.

<script>var monty_python = [
	['first_name', 'last_name', 'year_of_birth', 'wiki_url'],
	['Graham', 'Chapman', 1941, 'https://en.wikipedia.org/wiki/Graham_Chapman'],
	['John', 'Cleese', 1939, 'https://en.wikipedia.org/wiki/John_Cleese'],
	['Terry', 'Gilliam', 1940, 'https://en.wikipedia.org/wiki/Terry_Gilliam'],
	['Terry', 'Jones', 1942, 'https://en.wikipedia.org/wiki/Terry_Jones'],
	['Eric', 'Idle', 1943, 'https://en.wikipedia.org/wiki/Eric_Idle'],
	['Michael', 'Palin', 1943, 'https://en.wikipedia.org/wiki/Michael_Palin'],
];</script>
<input type=button value="A very naughty button" onclick="Heiho(monty_python, {title:'Monty Python List'})" />

Here’s another demo using Papa Parse csv parsing library and a csv file: list of best pictures from cs.uwaterloo.ca/~s255khan/oscars.html