CSV Importer
The JSS CSV importer extension allows importing CSV files with an unknown column order into the data grid. It will enable users to manually map each CSV file column to a corresponding grid column.Documentation
Installation
Please choose one of the following optionsUsing NPM
npm install @jspreadsheet/importerUsing a CDN
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/importer/dist/index.min.js"></script>
Translation
It is possible to translate this extension using the following code.jSuites.setDictionary({ 'CSV column': 'Coluna CSV', 'Spreadsheet column': 'Coluna da Planilha', 'Import loaded records': 'Importar os registros carregados', 'Load a new CSV file': 'Carregar um novo arquivo CSV', 'Advanced CSV': 'CSV Avançado', 'Import CSV': 'Importar CSV', '(Do not import)': 'Não importar', })
Invoke the dialog programmatically
To open programmatic open the importer modal, you can invoke the methodimporter()
Examples
General JavaScript CSV importer
This extension adds a new button on the toolbar.Click in the icon file_download or in the button above to import a new CSV file from your computer.
JavaScript example
<html> <link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/css/dist/style.min.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/importer/dist/index.min.js"></script> <div id='spreadsheet'></div> <input type="button" value="Import to first worksheet" onclick="importer(grid[0])" /> <script> // Set your JSS license key (The following key only works for one day) jspreadsheet.license = 'MmRhMTM3MTFjODhkNzUxZDQ0ODNjNjlkY2RlNGRlZjIwN2E4OGE5Mjg4NjI4ZWUwYjdmNjBhYjczZTU5NTdjNmE1ZTAxNzllZTAyYjZiMjcxNDhiNWExM2YxYjkyOTk3ZTg0OTYzY2JkODc2YTYyMTVkODIzNWFlNmE2NTZhMjEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6TnpReE5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; // Add-on for Jspreadsheet jspreadsheet.setExtensions({ importer }); // Create the spreadsheets let grid= jspreadsheet(document.getElementById('spreadsheet'), { toolbar: true, worksheets: [ { minDimensions: [6, 8] }, ], }); </script> </html>
React example
import React, { useRef } from "react"; import { Spreadsheet, Worksheet } from "@jspreadsheet/react"; import importer from "@jspreadsheet/importer"; import from "/modules/@jsuites/css/dist/style.css"; const license = 'MmRhMTM3MTFjODhkNzUxZDQ0ODNjNjlkY2RlNGRlZjIwN2E4OGE5Mjg4NjI4ZWUwYjdmNjBhYjczZTU5NTdjNmE1ZTAxNzllZTAyYjZiMjcxNDhiNWExM2YxYjkyOTk3ZTg0OTYzY2JkODc2YTYyMTVkODIzNWFlNmE2NTZhMjEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6TnpReE5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; const extensions = { importer } export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Render component return ( <> <Spreadsheet ref={spreadsheet} license={license} extensions={extensions} toolbar> <Worksheet /> </Spreadsheet> <input type="button" value="Import CSV" onClick={() => importer(spreadsheet.current[0])} /> </> ); }
Vue example
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue"; import importer from "@jspreadsheet/importer"; import "/node_modules/@jsuites/css/dist/style.css"; const license = 'MmRhMTM3MTFjODhkNzUxZDQ0ODNjNjlkY2RlNGRlZjIwN2E4OGE5Mjg4NjI4ZWUwYjdmNjBhYjczZTU5NTdjNmE1ZTAxNzllZTAyYjZiMjcxNDhiNWExM2YxYjkyOTk3ZTg0OTYzY2JkODc2YTYyMTVkODIzNWFlNmE2NTZhMjEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6TnpReE5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; export default { components: { Spreadsheet, Worksheet, }, methods: { import(cell) { // Worksheet where the new data should be imported into. importer(this.$refs.spreadsheet.current[0]); } }, data() { return { // License license: license, // Extensions extensions: { importer: importer, }, }; }, template: `<Spreadsheet ref="spreadsheet" :license="license" :extensions="extensions"> <Worksheet :minDimensions="[10,10]" /> </Spreadsheet> <input type="button" value="Import CSV" @click="import()" />`, }
Angular example
import { Component, ViewChild, ElementRef } from "@angular/core"; import * as jspreadsheet from "jspreadsheet"; import * as importer from "@jspreadsheet/importer"; import "/node_modules/jsuites/dist/jsuites.css"; import "/node_modules/@jsuites/css/dist/style.css"; import "/node_modules/jspreadsheet/dist/jspreadsheet.css"; const license = 'MmRhMTM3MTFjODhkNzUxZDQ0ODNjNjlkY2RlNGRlZjIwN2E4OGE5Mjg4NjI4ZWUwYjdmNjBhYjczZTU5NTdjNmE1ZTAxNzllZTAyYjZiMjcxNDhiNWExM2YxYjkyOTk3ZTg0OTYzY2JkODc2YTYyMTVkODIzNWFlNmE2NTZhMjEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6TnpReE5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense(license); // Extensions jspreadsheet.setExtensions({ importer }); @Component({ selector: "app-root", template: `<div #spreadsheet></div> <input type="button" value="Import CSV" (click)="this.import()" />` }) export class AppComponent { @ViewChild("spreadsheet") spreadsheet: ElementRef; // Worksheets worksheets: jspreadsheet.worksheetInstance[]; // Create a new data grid ngAfterViewInit() { // Create spreadsheet this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, { worksheets: [ { minDimensions: [10, 10], } ] }); } import() { // Worksheet where the new data should be imported into. importer(this.worksheets[0]); } }