import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'ODU3NTIzMzQ5NjM2Mjk0MWJhNTI0YzliNGQ3Y2M2OWVmZGEzNjJmMzhjMDY2Zjc3ZTJhMGQyYmJkMGY1ZDM4OWQ5OWRmZDdhNzI3MjkxODJlMTExNTk3MzYyOTVlZjEzMmQxYTc2ZTY5YjAyNjZiNWI3MzJjOWFlZjY2ZTFjOTUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMU1EVTJOVE01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license} tabs>
                <Worksheet minDimensions={[4, 3]} />
                <Worksheet minDimensions={[4, 3]} />
            </Spreadsheet>
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :license="license">
        <Worksheet :minDimensions="[4,3]" />
        <Worksheet :minDimensions="[4,3]" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        return {
            // License
            license: 'ODU3NTIzMzQ5NjM2Mjk0MWJhNTI0YzliNGQ3Y2M2OWVmZGEzNjJmMzhjMDY2Zjc3ZTJhMGQyYmJkMGY1ZDM4OWQ5OWRmZDdhNzI3MjkxODJlMTExNTk3MzYyOTVlZjEzMmQxYTc2ZTY5YjAyNjZiNWI3MzJjOWFlZjY2ZTFjOTUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMU1EVTJOVE01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5',
        };
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";

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

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
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, {
            // Allow create a new tab button
            tabs: true,
            // Initial worksheet
            worksheets: [
                { minDimensions: [4, 3] },
                { minDimensions: [4, 3] },
            ],
        });
    }
}

Sheet3

Sheet4

Sort smallest to largest

Sort largest to smallest

ContainsDoes not containBegins withEnds withEqualNot equalGreater thanLower than

addchart

Insert chart

Data to analyze

show_chart

bar_chart

incomplete_circle

donut_large

radar

area_chart

scatter_plot

stacked_bar_chart

InsertCancel

bar_chart

Chart settings

• Configuration
• Styling

add

Chart type

Done

Area Chart

Stacked Area Chart

100% Stacked Area Chart

Bar Chart

Stacked Bar Chart

100% Stacked Bar Chart

Column Chart

Stacked Column Chart

100% Stacked Column Chart

Line

Histogram

Pareto

Pie

Doughnut

Radar

Filled radar

Scatter

Data orientation

Done

Horizontal

Vertical

Data range

Labels

Done

Series

Use the first row as headers

Chart title

Chart title position

Done

Top

Bottom

Left

Right

Legend title

Done

Top

Bottom

Left

Right

Show Legend

SaveCancel

rule

Validations

Cell range

Action

Done

Warning message

Reject entry

Format style

Warning message

Type

Done

Number

Text

Date

Time

List

Text length

Cell is empty

Cell is not empty

Formula

Criteria

Done

between

is not between

less than

less than or equal to

bigger than

bigger than or equal to

equal to

different to

Value

Value

ResetDone

August 2025

arrow_drop_uparrow_drop_down

S

M

T

W

T

F

S

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

000102030405060708091011121314151617181920212223:000510152025303540455055

ResetDone

August 2025

arrow_drop_uparrow_drop_down

S

M

T

W

T

F

S

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

000102030405060708091011121314151617181920212223:000510152025303540455055

Value

Allow blank

Create list as a dropdown

Formatting Options

Color

ResetDone

• Grid
• Spectrum

add

Background color

ResetDone

• Grid
• Spectrum

add

Bold

Save

Back

interests

Insert Shape

Lines

Rectangles

Basic Forms

Block Arrows

Equation Shapes

Flowchart

interests

Shape Settings

Background Color

ResetDone

• Grid
• Spectrum

add

Transparent

Border Color

ResetDone

• Grid
• Spectrum

add

Border Width

Done

0

1

2

3

4

5

6

7

8

Font Color

ResetDone

• Grid
• Spectrum

add

SaveCancel

print

Print

Scope:

Current worksheet

Done

Current worksheet

Spreadsheet

Selected cells

Page size:

A4

Done

Letter

Tabloid

Legal

A3

A4

A5

B4

B5

Page orientation:

Landscape

Done

Portrait

Landscape

Scale:

Normal (100%)

Done

Normal (100%)

Fit to one page

Fit to width

Fit to height

Margins:

Normal

Done

Narrow

Normal

Wide

Order of pages:

Left to right

Done

Left to right

Top to bottom

Horizontal alignment:

Center

Done

Left

Center

Right

Vertical alignment:

Center

Done

Top

Center

Bottom

Show grid lines

Show notes

Show row and column identifiers

Show page number

Show spreadsheet title

Show worksheet title

Current date

Current time

Repeat frozen rows

Repeat frozen columns

Search and replace

Find
Replace by
Search	This worksheetAll worksheets
	Case sensitive
	Match all cell contents
	Search inside formulas

Search

Prev

Next

Replace

Replace All

Search:

	A	B	C	D
1
2
3

Search:

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<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://fonts.googleapis.com/css?family=Material+Icons" />

<div id="root"></div>

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

// Create the spreadsheet
let worksheets = jspreadsheet(document.getElementById('root'), {
    // Allow create a new tab button
    tabs: true,
    // Initial worksheet
    worksheets: [
        { minDimensions: [4, 3] },
        { minDimensions: [4, 3] },
    ],
});
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'ODU3NTIzMzQ5NjM2Mjk0MWJhNTI0YzliNGQ3Y2M2OWVmZGEzNjJmMzhjMDY2Zjc3ZTJhMGQyYmJkMGY1ZDM4OWQ5OWRmZDdhNzI3MjkxODJlMTExNTk3MzYyOTVlZjEzMmQxYTc2ZTY5YjAyNjZiNWI3MzJjOWFlZjY2ZTFjOTUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMU1EVTJOVE01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license} tabs>
                <Worksheet minDimensions={[4,3]} />
                <Worksheet minDimensions={[4,3]} />
            </Spreadsheet>
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :license="license">
        <Worksheet :minDimensions="[4,3]" />
        <Worksheet :minDimensions="[4,3]" />
    </Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'ODU3NTIzMzQ5NjM2Mjk0MWJhNTI0YzliNGQ3Y2M2OWVmZGEzNjJmMzhjMDY2Zjc3ZTJhMGQyYmJkMGY1ZDM4OWQ5OWRmZDdhNzI3MjkxODJlMTExNTk3MzYyOTVlZjEzMmQxYTc2ZTY5YjAyNjZiNWI3MzJjOWFlZjY2ZTFjOTUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMU1EVTJOVE01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        return {
            // License
            license: license,
        };
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

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

@Component({
    standalone: true,
    selector: "app-root",
    template: "<div #spreadsheet></div>"
})
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, {
            // Allow create a new tab button
            tabs: true,
            // Initial worksheet
            worksheets: [
                { minDimensions: [4,3] },
                { minDimensions: [4,3] },
            ],
        });
    }
}

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<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://fonts.googleapis.com/css?family=Material+Icons" />
<script src="https://cdn.jsdelivr.net/npm/jszip@3.6.0/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/parser/dist/index.min.js"></script>

<div id="spreadsheet"></div>
<input type="file" name="file" id='file' style='display:none'>
<p><input type='button' value='Upload a .XLSX' onclick="document.getElementById('file').click()"/></p>

<script>
// Set license
jspreadsheet.setLicense('ODU3NTIzMzQ5NjM2Mjk0MWJhNTI0YzliNGQ3Y2M2OWVmZGEzNjJmMzhjMDY2Zjc3ZTJhMGQyYmJkMGY1ZDM4OWQ5OWRmZDdhNzI3MjkxODJlMTExNTk3MzYyOTVlZjEzMmQxYTc2ZTY5YjAyNjZiNWI3MzJjOWFlZjY2ZTFjOTUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMU1EVTJOVE01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
// Set extensions
jspreadsheet.setExtensions({ parser });
// Root
let root = document.getElementById('spreadsheet');
// Create the spreadsheet from a local file
let load = function(e) {
    // Parse XLSX file and create a new spreadsheet
    jspreadsheet.parser({
        file: e.target.files[0],
        // It would be used to updated the formats only
        locale: 'en-GB',
        onload: function(config) {
            jspreadsheet(root, config);
        },
        onerror: function(error) {
            alert(error);
        }
    });
}
document.getElementById("file").onchange = (e) => load(e)
</script>
</html>

import React, { useRef } from "react";
import { jspreadsheet } from "@jspreadsheet/react";
import parser from "@jspreadsheet/parser";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set license
jspreadsheet.setLicense("ODU3NTIzMzQ5NjM2Mjk0MWJhNTI0YzliNGQ3Y2M2OWVmZGEzNjJmMzhjMDY2Zjc3ZTJhMGQyYmJkMGY1ZDM4OWQ5OWRmZDdhNzI3MjkxODJlMTExNTk3MzYyOTVlZjEzMmQxYTc2ZTY5YjAyNjZiNWI3MzJjOWFlZjY2ZTFjOTUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMU1EVTJOVE01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5");
// Set extensions
jspreadsheet.setExtensions({ parser });

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef(null);
    const inputRef = useRef(null);
    const style = { 'display: none' };
    // Create the spreadsheet from a local file
    const load = function (e) {
        // Parse XLSX file and create a new spreadsheet
        jspreadsheet.parser({
            file: e.target.files[0],
            // It would be used to update the formats only
            locale: "en-GB",
            onload: function (config) {
                jspreadsheet(spreadsheet.current, config);
            },
            onerror: function (error) {
                alert(error);
            },
        });
    };
    // Render component
    return (
        <>
            <div ref={spreadsheet}></div>
            <input
                ref={inputRef}
                id="file"
                type="file"
                name="file"
                onChange={load}
                style={style}
            />
            <input
                type="button"
                value="Load a XLSX file from my local computer"
                onClick={() => inputRef.current.click()}
            />
        </>
    );
}

<template>
  <div ref="spreadsheet"></div>
  <input
    type="file"
    name="file"
    ref="fileInput"
    @change="loadFile"
    style="display: none"
  />
  <input
    type="button"
    value="Load a XLSX file from my local computer"
    @click="triggerFileInput"
  />
</template>
<script>
import { jspreadsheet } from "@jspreadsheet/vue";
import parser from "@jspreadsheet/parser";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

jspreadsheet.setLicense('ODU3NTIzMzQ5NjM2Mjk0MWJhNTI0YzliNGQ3Y2M2OWVmZGEzNjJmMzhjMDY2Zjc3ZTJhMGQyYmJkMGY1ZDM4OWQ5OWRmZDdhNzI3MjkxODJlMTExNTk3MzYyOTVlZjEzMmQxYTc2ZTY5YjAyNjZiNWI3MzJjOWFlZjY2ZTFjOTUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMU1EVTJOVE01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

jspreadsheet.setExtensions({ parser });

export default {
  methods: {
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
    loadFile(e) {
      const spreadsheetEl = this.$refs.spreadsheet;
      jspreadsheet.parser({
        file: e.target.files[0],
        locale: "en-GB",
        onload: function (config) {
          jspreadsheet(spreadsheetEl, config);
        },
        onerror: function (error) {
          alert(error);
        },
      });
    },
  },
};
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import parser from "@jspreadsheet/parser";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ODU3NTIzMzQ5NjM2Mjk0MWJhNTI0YzliNGQ3Y2M2OWVmZGEzNjJmMzhjMDY2Zjc3ZTJhMGQyYmJkMGY1ZDM4OWQ5OWRmZDdhNzI3MjkxODJlMTExNTk3MzYyOTVlZjEzMmQxYTc2ZTY5YjAyNjZiNWI3MzJjOWFlZjY2ZTFjOTUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMU1EVTJOVE01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
// Set the extensions
jspreadsheet.setExtensions({ parser });

@Component({
    standalone: true,
    selector: "app-root",
    template: '<div #spreadsheet></div><input #file type="file" name="file" style="display:none" /><input type="button" value="Load a XLSX file from my local computer" (click)="this.file.click()"/>'
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    @ViewChild("file") file: ElementRef;
    ngAfterViewInit() {
        let spreadsheet = this.spreadsheet.nativeElement;
        // Add event to the file input
        this.file.nativeElement.onchange = function (e) {
            // Parse XLSX file and create a new spreadsheet
            jspreadsheet.parser({
                file: e.target.files[0],
                locale: "en-GB",
                onload: function (config) {
                    jspreadsheet(spreadsheet, config);
                },
                onerror: function (error) {
                    alert(error);
                }
            });
        };
    }
}