simple-csv-editor - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

.eslintrc.json

@@ -17,4 +17,8 @@ {
     "import/extensions": 0,
-    "no-new": 0
+    "no-new": 0,
+    "no-console": ["error", { "allow": ["error"] }]
+  },
+  "globals": {
+    "Papa": true
   }
 }

package.json

 {
   "name": "simple-csv-editor",
-  "version": "1.0.1",
-  "description": "A CSV editor for HTML/JavaScript using ES modules.",
+  "version": "1.1.0",
+  "description": "A table editor for easily editing and retrieving CSV data.",
   "main": "src/simple-csv-editor.js",
@@ -6,0 +6,0 @@ "type": "module",

README.md

 # Simple CSV Editor
 
-A CSV editor for HTML/JavaScript using ES modules.
+A table editor for easily editing and retrieving CSV data.
 
+## Demo
+
+[Demo page](https://dag0310.github.io/simple-csv-editor/demo/) - can be found under `demo/index.html`
+
 ## Usage
 
+Here is a basic HTML setup which should cover most needs:
+
 ```html
+<!-- The element in which the table editor will be displayed -->
 <div id="simpleCsvEditor"></div>
 
+<!-- PapaParse dependency, very important for the editor to work! -->
+<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',
   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.
+simpleCsvEditor.setCsv(`1,2,3,4
+one,two,three,four`);
 </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](https://www.papaparse.com)

src/simple-csv-editor.js

@@ -16,7 +16,10 @@ class SimpleCsvEditor {
     onChange = null,
+    delimiter = null,
+    quoteChar = '"',
     controls = null,
     enableDefaultControls = false,
-    valueSeparator = ',',
-    newLineCharacter = '\n',
   }) {
+    if (Papa == null) {
+      throw new Error('PapaParse dependency needs to be included beforehand');
+    }
     if (id == null) {
@@ -27,5 +30,4 @@ throw new Error('No editorId specified in config');
     if (this.editor == null) {
-      throw new Error(`No editor div element found with id="${id}"`);
+      throw new Error(`No editor element found with id="${id}"`);
     }
-    this.editor.innerHTML = '';
 
@@ -35,6 +37,14 @@ this.#registerControls(controls, enableDefaultControls);
 
-    this.valueSeparator = valueSeparator;
-    this.newLineCharacter = newLineCharacter;
     this.onChange = onChange;
 
+    this.papaParseConfig = {
+      quoteChar,
+      header: false,
+      dynamicTyping: false,
+      skipEmptyLines: true,
+    };
+    if (delimiter != null) {
+      this.papaParseConfig.delimiter = delimiter;
+    }
+
     this.setCsv(data);
@@ -78,10 +88,18 @@ }
 
-  setCsv(csvData) {
+  setCsv(data) {
+    const result = Papa.parse(data, this.papaParseConfig);
+    if (result.errors.length > 0) {
+      for (const error of result.errors) {
+        console.error(error);
+      }
+      return;
+    }
+
+    this.detectedLineBreak = result.meta.linebreak;
+    this.lastLineEmpty = data.slice(-1) === this.detectedLineBreak;
+
     this.table.innerHTML = '';
-    const lines = csvData.split(this.newLineCharacter);
 
-    for (let lineIdx = 0; lineIdx < lines.length; lineIdx += 1) {
-      const tokens = lines[lineIdx].split(this.valueSeparator);
-
-      for (let tokenIdx = 0; tokenIdx < tokens.length; tokenIdx += 1) {
+    for (const [lineIdx, lineTokens] of result.data.entries()) {
+      for (const [tokenIdx, token] of lineTokens.entries()) {
         if (this.table.rows[lineIdx] == null) {
@@ -93,3 +111,3 @@ this.addRow();
         }
-        this.table.rows[lineIdx].cells[tokenIdx].textContent = tokens[tokenIdx];
+        this.table.rows[lineIdx].cells[tokenIdx].textContent = token;
       }
@@ -103,4 +121,4 @@ }
         .map((cell) => cell.textContent)
-        .join(this.valueSeparator))
-      .join(this.newLineCharacter);
+        .join(this.papaParseConfig.delimiter))
+      .join(this.detectedLineBreak) + (this.lastLineEmpty ? this.detectedLineBreak : '');
   }
@@ -107,0 +125,0 @@

No alert changes

Improved metrics

Total package byte prevSize

29014

271.31%

Number of package files

11

10%

Lines of code

182

16.67%

Number of lines in readme file

46

142.11%

No dependency changes