Package Exports

simple-csv-editor
simple-csv-editor/src/simple-csv-editor.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (simple-csv-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Simple CSV Editor

A table editor for easily editing and retrieving CSV data.

Demo

Demo page - can be found under demo/index.html

Installation

npm install --save simple-csv-editor

Usage

Here is a basic HTML setup which should cover most needs:

<!-- The element in which the table editor will be displayed -->
<div id="simpleCsvEditor"></div>

<!-- PapaParse CSV parser dependency - very important for the editor to work!
Of course you can also use the library via "npm i papaparse" or download it yourself.
At least the vendored version here guarantees compatibility with the editor. -->
<script src="papaparse.min.js"></script>

<!-- ES module declaration -->
<script type="module">
import SimpleCsvEditor from './simple-csv-editor.js';

// Initializes the editor with config parameters:
// id:        Set according to the editor HTML element's id attribute
// onChange:  This function will be executed everytime a change happens inside the editor.
//            The paramater will contain the current CSV representation of the editor.
// delimiter: If not set it will be auto-detected, you might want to supply the delimiter to get consistent behavior.
const simpleCsvEditor = new SimpleCsvEditor({
  id: 'simpleCsvEditor',
  data: '1,2,3', // init with data already
  onChange: (csvData) => { console.log(csvData); },
  delimiter: ',',
});

// Set the CSV data. maybe check out the demo, you might want to set this using a text area or some other way.
// Returns an array of CSV parsing errors - should be empty if everything is fine
const errors = simpleCsvEditor.setCsv(`1,2,3,4
one,two,three,four`);

// Fetch the data again from the table
const csvData = simpleCsvEditor.getCsv();
</script>

For all public methods, properties and further constructor config parameters check out src/simple-csv-editor.js - it should be very readable 😜

Dependencies

PapaParse