Render CSV Data As A Table – CSV Visualizer

Category: Javascript , Table | September 9, 2021
Views Total:815 views
Official Page:Go to website
Last Update:September 9, 2021


Render CSV Data As A Table – CSV Visualizer


CSV Visualizer is a CSV to Table JavaScript library that parses CSV strings and renders the CSV data as an HTML table.

Based on the Papa Parse Powerful CSV Parser for JavaScript.

How to use it:

1. Import the csv-visualizer.min.js JavaScript file into the document.

<script src="dist/csv-visualizer.min.js"></script>

2. Initialize the CSV Visualizer and define the CSV string that holds the table data.

const CSV = '"h1","h2","h3"\n"r1c1","r1c2","r1c3"\n"r2c1","r2c2","r2c3"';

3. Determine the root DOM element to which the table is appended. Default: body.

CsvVisualizer.visualize(CSV, document.querySelector('.container'));

4. Determine whether to show the table header. Default: true.

CsvVisualizer.visualize(CSV, document.querySelector('.container'),{
  showHeader: true,

5. Pass the Papa Parse options.

CsvVisualizer.visualize(CSV, document.querySelector('.container'),{
  parserOptions: {
    delimiter: "",  // auto-detect
    newline: "",  // auto-detect
    quoteChar: '"',
    escapeChar: '"',
    header: false,
    transformHeader: undefined,
    dynamicTyping: false,
    preview: 0,
    encoding: "",
    worker: false,
    comments: false,
    step: undefined,
    complete: undefined,
    error: undefined,
    download: false,
    downloadRequestHeaders: undefined,
    downloadRequestBody: undefined,
    skipEmptyLines: false,
    chunk: undefined,
    chunkSize: undefined,
    fastMode: undefined,
    beforeFirstChunk: undefined,
    withCredentials: undefined,
    transform: undefined,
    delimitersToGuess: [',', '\t', '|', ';',

You Might Be Interested In:

Leave a Reply