CSV Importer
The CSV Importer extension is a JavaScript plugin tool designed to facilitate the importation of data from CSV files into JSS data grids, even when the column order in the CSV is not predetermined. This extension enables users to import CSV data efficiently, allowing for manual mapping each CSV column to its corresponding column in the data grid.
Documentation
Methods
Method | Description |
---|---|
importer(object?) | To open the importer modal and specify the import destination, you must provide the instance of the worksheet to which the data should be imported.importer(worksheetInstance?: Object) => void |
Installation
Please choose one of the following options
Using NPM
$ npm install @jspreadsheet/importer
Using 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.
jspreadsheet.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',
})
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.
<html>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/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/v11/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>
<p><input type="button" value="Import to first worksheet" id="btn1" /></p>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.license = 'NTFkNDcxZDRjMDhlNTI1NTQ3Zjk4YTc0ODc4NjdiMGYxYmIzYzY5MDNkMDg3YjA5MTk0MWU5NmNkNjI1NjJlNzAxZDA4YjMyZDg5YWUwNDA1MDA3MzEwYjVlNjAwNWE1MTBkYzAwNWJmMTJhMWYzOTJlMGUyNzY3YTQ0NTQwODYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTJPRFE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
// Add-on for Jspreadsheet
jspreadsheet.setExtensions({ importer });
// Create the spreadsheets
let grid = jspreadsheet(document.getElementById('spreadsheet'), {
toolbar: true,
worksheets: [{
minDimensions: [10, 10],
tableOverflow: true,
tableHeight: 300,
tableWidth: 720,
}],
});
document.getElementById("btn1").onclick = () => importer(grid[0])
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import importer from "@jspreadsheet/importer";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";
import "@jsuites/css/dist/style.css";
// Define the license
const license = 'NTFkNDcxZDRjMDhlNTI1NTQ3Zjk4YTc0ODc4NjdiMGYxYmIzYzY5MDNkMDg3YjA5MTk0MWU5NmNkNjI1NjJlNzAxZDA4YjMyZDg5YWUwNDA1MDA3MzEwYjVlNjAwNWE1MTBkYzAwNWJmMTJhMWYzOTJlMGUyNzY3YTQ0NTQwODYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTJPRFE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
// Define the extensions
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="true">
<Worksheet tableOverflow="true" tableHeight="300" tableWidth="720" />
</Spreadsheet>
<input type="button" value="Import CSV" onClick={() => importer(spreadsheet.current[0])} />
</>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license" :extensions="extensions">
<Worksheet :minDimensions="[10,10]" :tableOverflow="true" tableHeight="300" tableWidth="720" />
</Spreadsheet>
<input type="button" value="Import CSV" @click="import" />
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import importer from "@jspreadsheet/importer";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";
import "@jsuites/css/dist/style.css";
// Set the license
const license = 'NTFkNDcxZDRjMDhlNTI1NTQ3Zjk4YTc0ODc4NjdiMGYxYmIzYzY5MDNkMDg3YjA5MTk0MWU5NmNkNjI1NjJlNzAxZDA4YjMyZDg5YWUwNDA1MDA3MzEwYjVlNjAwNWE1MTBkYzAwNWJmMTJhMWYzOTJlMGUyNzY3YTQ0NTQwODYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTJPRFE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
// Define extensions
const extensions = { importer };
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
import() {
// Worksheet where the new data should be imported into.
importer(this.$refs.spreadsheet.current[0]);
}
},
data() {
return {
license,
extensions,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import importer from "@jspreadsheet/importer";
import "jsuites/dist/jsuites.css";
import "@jsuites/css/dist/style.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NTFkNDcxZDRjMDhlNTI1NTQ3Zjk4YTc0ODc4NjdiMGYxYmIzYzY5MDNkMDg3YjA5MTk0MWU5NmNkNjI1NjJlNzAxZDA4YjMyZDg5YWUwNDA1MDA3MzEwYjVlNjAwNWE1MTBkYzAwNWJmMTJhMWYzOTJlMGUyNzY3YTQ0NTQwODYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTJPRFE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Extensions
jspreadsheet.setExtensions({ importer });
@Component({
standalone: true,
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],
tableOverflow: true,
tableHeight: 300,
tableWidth: 720,
}
]
});
}
import() {
// Worksheet where the new data should be imported into.
importer(this.worksheets[0]);
}
}