CSV Importer

The JSS CSV Importer extension is a powerful tool that simplifies importing CSV files with an unknown column order into the JSS Data Grid. With this extension, users can easily import CSV data and manually map each column to the corresponding grid column. Seamlessly integrating external data, the JSS CSV Importer empowers users to enhance their data management capabilities within Jspreadsheet. Effortlessly import and map CSV data, ensuring accurate and efficient data manipulation within the JSS Data Grid.

Documentation

Methods

Available 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.

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',
})

Examples

General JavaScript CSV importer

This extension adds a new button on the toolbar.

Click in the icon 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 = 'MDAzY2ZiY2U0MmIxMjIwZjVjMTA4ZGVhNjJiODk0YmI3YmZjYjdkZjIzMGNlYmQ5NTUyNTRhMzY2ZGViNmQwZTU2YWFkMTJiMjRhZTRlODQ0OTA2Y2VjZjQwM2ZhZjJhM2ZlZmQ1ZWRiNjYwODJlNzM1YzMxMmRkMTUyNzNjNTAsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTkRnMU1Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5';

// 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,
    ],
});
</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";

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

// 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])} />
        </>
    );
}

Vue example

<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 "/node_modules/@jsuites/css/dist/style.css";

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

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

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

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