Quick Spreadsheet/CSV Viewer in Vanilla JavaScript | Heihō

The heiho.js is a fast and simple spreadsheet viewer. It is intended to preview the contents of the CSV files inside your browser without the need for any other tools.

Uses vanilla javascript so it doesn’t have any dependencies, but for the applied design from the CSS file.

How to make use of it:

1. Add the Heiho’s JavaScript and CSS information to the web page.

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

2. Populate the web spreadsheet with the CSV information you present.

var data = [ CSV Data Here ];
Heiho(data);

3. Or instantly load an exterior CSV file into the CSV viewer. Requires the PapaParse library.

<script src="https://cdn.jsdelivr.net/gh/mholt/[email protected]/papaparse.min.js"></script>

4. Determine whether or not to type the primary row.

Papa.parse('sample.csv', {
  download: true, 
  complete: function(results){ 
    Heiho(results.data) 
  }}
);

5. Customize the title of the CSV viewer.

Heiho(data, {
  header: null
});

6. Determine the utmost variety of rows to preview.

Heiho(data, {
  title: 'sample.csv'
});
// or
var file = {filename: 'sample.csv', size: '10KB', created: '2020-09-28 13:06:36'}
Heiho(data, { title: function(el, o)
  {
    el.innerHTML = '<b>'
      + file.filename + '<\/b> <code>'
      + file.size + '<\/code> '
      + file.created;
  }
});

7. Determine to find out how to truncate the content of the rows reach the max.

Heiho(data, {
  max: 50
});
Heiho(data, {
  truncate: function(el, max, data, o){
    el.innerHTML = 'Showing only first ' + max + ' rows';
    el.style.display = '';
  }
});

Fullscreen CSV Viewer In JavaScript, Heihō Plugin/Github


See Demo And Download

Official Website(kktsvetkov): Click Here

This superior jQuery/javascript plugin is developed by kktsvetkov. For extra Advanced usage, please go to the official website.

Share