Render CSV Data As A Table – CSV Visualizer

Category: Javascript , Table | September 9, 2021
Author:pozil
Views Total:743 views
Official Page:Go to website
Last Update:September 9, 2021
License:MIT

Preview:

Render CSV Data As A Table – CSV Visualizer

Description:

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"';
CsvVisualizer.visualize(CSV);

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