Render CSV Data As A Table – CSV Visualizer

Preview:

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', '|', ';',
  }
});