CSV Importer

Compatible with React, Vue, and Angular, the General CSV Importer streamlines the process of importing data into data grids. It offers efficient column mapping and integrates with Jspreadsheet controls for flexible data management.

Documentation

Methods

Method	Description
importer(object?)	Opens the importer modal and specifies the import destination. Provide the worksheet instance to which the data should be imported. `importer(worksheetInstance?: Object) => void`

Installation

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" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/style.min.css" type="text/css" />

<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/@lemonadejs/studio/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/importer/dist/index.min.js"></script>

<style>
    #btn1 {
        border: 2px solid #737373;
        background-color: #737373;
        margin-right: 2px;
    }
</style>


<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 = 'NmJhMDRjZGRkYWY4MjJhMmNjNjc0YzlhM2U0Yzc1MTA4NjRiZDEwMDMzYmEzMzNiNmIzNDhlYTVjMTZjOTJlYmQ1MDgzNDBmZTczZjdmNGY4ODIyNjIxYjdhMDI2MTFlMzMyN2RjOWMzZmY2ZjA0Yjg0NDFjM2JmZjlhZDVhMzIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU9ETXhNVGN5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';

// 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>

<style>
    #btn1 {
      border: 2px solid #737373 !important;
      background-color: #737373 !important;
      margin-left: 5px !important;
      color: white !important;
      padding: 5px 10px;
      cursor: pointer;
    }
</style>

</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import importer from "@jspreadsheet/importer";
import studio from '@lemonadejs/studio';

import '@lemonadejs/studio/dist/style.css';
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";
import "@jsuites/css/dist/style.css";

// Define the license
const license = 'NmJhMDRjZGRkYWY4MjJhMmNjNjc0YzlhM2U0Yzc1MTA4NjRiZDEwMDMzYmEzMzNiNmIzNDhlYTVjMTZjOTJlYmQ1MDgzNDBmZTczZjdmNGY4ODIyNjIxYjdhMDI2MTFlMzMyN2RjOWMzZmY2ZjA0Yjg0NDFjM2JmZjlhZDVhMzIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU9ETXhNVGN5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';

// 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" toolbar="true">
        <Worksheet :minDimensions="[10,10]" :tableOverflow="true" tableHeight="300" tableWidth="720" />
    </Spreadsheet>
    <input type="button" value="Import CSV" @click="importCSV" />
</template>

<script>
import { Spreadsheet, Worksheet } from '@jspreadsheet/vue';
import importer from '@jspreadsheet/importer';
import studio from '@lemonadejs/studio';

import '@lemonadejs/studio/dist/style.css';
import 'jspreadsheet/dist/jspreadsheet.css';
import 'jsuites/dist/jsuites.css';
import '@jsuites/css/dist/style.css';

// Set the license
const license = 'NmJhMDRjZGRkYWY4MjJhMmNjNjc0YzlhM2U0Yzc1MTA4NjRiZDEwMDMzYmEzMzNiNmIzNDhlYTVjMTZjOTJlYmQ1MDgzNDBmZTczZjdmNGY4ODIyNjIxYjdhMDI2MTFlMzMyN2RjOWMzZmY2ZjA0Yjg0NDFjM2JmZjlhZDVhMzIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU9ETXhNVGN5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';

// Define extensions
const extensions = { importer };

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        importCSV() {
            // 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';

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NmJhMDRjZGRkYWY4MjJhMmNjNjc0YzlhM2U0Yzc1MTA4NjRiZDEwMDMzYmEzMzNiNmIzNDhlYTVjMTZjOTJlYmQ1MDgzNDBmZTczZjdmNGY4ODIyNjIxYjdhMDI2MTFlMzMyN2RjOWMzZmY2ZjA0Yjg0NDFjM2JmZjlhZDVhMzIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU9ETXhNVGN5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// 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,
        },
      ],
      toolbar: true,
    });
  }
  import() {
    // Worksheet where the new data should be imported into.
    importer(this.worksheets[0]);
  }
}

Edit this page on GitHub