JavaScript component to create web applications with spreadsheet UI

Compatible with
React, Angular, and Vue.

A complete solution to make rich and user-friendly web applications

Create an online spreadsheet from various data formats

Deliver high-quality interfaces and applications to your end-user

Component Ecosystem

Subscribe to our newsletter

Free and open-source JavaScript component to create web applications with spreadsheet UI.

23k+
Weekly downloads

6800+
GitHub stars

MIT License
Free and open-source

Jspreadsheet CE provides compatibility across different environments, ensuring your spreadsheet solution fits perfectly into your chosen stack.

Fully customizable JavaScript spreadsheet library, offering various components to enhance web development projects.

Column Types

A variety of customisable column types

Nested Headers

Create multi-level column headers

Cell Comments

Add comments to your spreadsheet cells

Custom Toolbar

Personalize your spreadsheet toolbar

Sheet1
TextNumericCalendarDCheckboxColor
1Hello$ 13.123,00Yes
2World!$ 8,00No
Jspreadsheet CE
<html>
<script src="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.css" type="text/css" />


<div id="spreadsheet"></div>

<script>
let table = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['Hello', 13123, '', 'Yes', true, '#AA4411'],
            ['World!', 8, '', 'No', false, '#99BE23']
        ],
        columns: [
            { type: 'text', title: 'Text' },
            { type: 'numeric', title: 'Numeric', mask:'$ #.##,00', decimal: ',' },
            { type: 'calendar', title: 'Calendar' },
            { type: 'dropdown', source: ['Yes', 'No', 'Maybe'] },
            { type: 'checkbox', title: 'Checkbox' },
            { type: 'color', title: 'Color', width: 50, render: 'square' }
        ]
    }]
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/react";
import "jspreadsheet-ce/dist/jspreadsheet.css";

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        ['Hello', 13123, '', 'Yes', true, '#AA4411'],
        ['World!', 8, '', 'No', false, '#99BE23']
    ];
    // Columns
    const columns = [
        { type: 'text', title: 'Text' },
        { type: 'numeric', title: 'Numeric', mask:'$ #.##,00', decimal: ',' },
        { type: 'calendar', title: 'Calendar' },
        { type: 'dropdown', source: ['Yes', 'No', 'Maybe'] },
        { type: 'checkbox', title: 'Checkbox' },
        { type: 'color', title: 'Color', width: 50, render: 'square' }
    ];

    // Render component
    return (
        <Spreadsheet ref={spreadsheet}>
            <Worksheet data={data} columns={columns} />
        </Spreadsheet>
    );
}
<template>
    <Spreadsheet ref="spreadsheetRef">
        <Worksheet 
            :data="data" 
            :columns="columns" 
        />
    </Spreadsheet>
</template>

<script setup>
import { ref } from 'vue';
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/vue";
import "jspreadsheet-ce/dist/jspreadsheet.css";

// Spreadsheet ref
const spreadsheetRef = ref(null);

// Data
const data = ref([
    ['Hello', 13123, '', 'Yes', true, '#AA4411'],
    ['World!', 8, '', 'No', false, '#99BE23']
]);

// Columns
const columns = ref([
    { type: 'text', title: 'Text' },
    { type: 'numeric', title: 'Numeric', mask:'$ #.##,00', decimal: ',' },
    { type: 'calendar', title: 'Calendar' },
    { type: 'dropdown', source: ['Yes', 'No', 'Maybe'] },
    { type: 'checkbox', title: 'Checkbox' },
    { type: 'color', title: 'Color', width: 50, render: 'square' }
]);
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet-ce";
import "jspreadsheet-ce/dist/jspreadsheet.css"

// Create component
@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, {
            worksheets: [{
                data: [
                    ['Hello', 13123, '', 'Yes', true, '#AA4411'],
                    ['World!', 8, '', 'No', false, '#99BE23']
                ],
                columns: [
                    { type: 'text', title: 'Text' },
                    { type: 'numeric', title: 'Numeric', mask:'$ #.##,00', decimal: ',' },
                    { type: 'calendar', title: 'Calendar' },
                    { type: 'dropdown', source: ['Yes', 'No', 'Maybe'] },
                    { type: 'checkbox', title: 'Checkbox' },
                    { type: 'color', title: 'Color', width: 50, render: 'square' }
                ]
            }],
        });
    }
}
Sheet1
Supermarket information
Location Other Information Costs
ABCDE
1
2
Jspreadsheet CE
<html>
<script src="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />


<div id="spreadsheet"></div>

<script>
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [[]],
        minDimensions: [5, 2],
        nestedHeaders:[
            [
                {
                    title: 'Supermarket information',
                    colspan: '6',
                },
            ],
            [
                {
                    title: 'Location',
                    colspan: '1',
                },
                {
                    title: ' Other Information',
                    colspan: '2'
                },
                {
                    title: ' Costs',
                    colspan: '3'
                }
            ],
        ]
    }]
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Nested headers
    const nestedHeaders = [
        [
            {
                title: 'Supermarket information',
                colspan: '6',
            },
        ],
        [
            {
                title: 'Location',
                colspan: '1',
            },
            {
                title: ' Other Information',
                colspan: '2'
            },
            {
                title: ' Costs',
                colspan: '3'
            }
        ],
    ];
    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet}>
                <Worksheet nestedHeaders={nestedHeaders} minDimensions={[5,2]} />
            </Spreadsheet>
        </>
    );
}
<template>
  <Spreadsheet ref="spreadsheet">
      <Worksheet 
          :nestedHeaders="nestedHeaders" 
          :minDimensions="[5,2]" 
      />
  </Spreadsheet>
</template>

<script setup>
import { ref } from 'vue'
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/spreadsheet.css";

// Nested headers
const nestedHeaders = ref([
  [
      {
          title: 'Supermarket information',
          colspan: '6',
      },
  ],
  [
      {
          title: 'Location',
          colspan: '1',
      },
      {
          title: ' Other Information',
          colspan: '2'
      },
      {
          title: ' Costs',
          colspan: '3'
      }
  ],
]);

const spreadsheet = ref(null);
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet-ce";
import "jspreadsheet-ce/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

// Create component
@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, {
            worksheets: [{
                data: [[]],
                minDimensions: [5, 2],
                nestedHeaders:[
                    [
                        {
                            title: 'Supermarket information',
                            colspan: '6',
                        },
                    ],
                    [
                        {
                            title: 'Location',
                            colspan: '1',
                        },
                        {
                            title: ' Other Information',
                            colspan: '2'
                        },
                        {
                            title: ' Costs',
                            colspan: '3'
                        }
                    ],
                ]
            }]
        });
    }
}
Sheet1
ABC
1USCheese2019-02-12
2CAApples2019-03-01
Jspreadsheet CE
<html>
<script src="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />


<div id="spreadsheet"></div>

<script>
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['US', 'Cheese', '2019-02-12'],
            ['CA', 'Apples', '2019-03-01'],
        ],
        columns: [
            {width: '170px'},
            {width: '170px'},
            {width: '170px'},
        ],
        allowComments: true,
        comments: {
            B1: 'Initial comments on B1',
            C1: 'Initial comments on C1'
        },
    }]
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";

export default function App() {
const spreadsheet = useRef();

    const data = [
        ['US', 'Cheese', '2019-02-12'],
        ['CA', 'Apples', '2019-03-01'],
    ];

    const columns = [
        { width: '170px' },
        { width: '170px' },
        { width: '170px' },
    ];

    const comments = {
        B1: 'Initial comments on B1',
        C1: 'Initial comments on C1'
    };

    return (
        <>
            <Spreadsheet ref={spreadsheet}>
                <Worksheet data={data} columns={columns} comments={comments} allowComments />
            </Spreadsheet>
        </>
    );
}
<template>
  <Spreadsheet ref="spreadsheetRef">
      <Worksheet 
          :data="data" 
          :columns="columns" 
          :comments="comments" 
      />
  </Spreadsheet>
</template>

<script setup>
import { ref } from 'vue';
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/spreadsheet.css";

// Spreadsheet ref
const spreadsheetRef = ref(null);

// Data
const data = ref([
  ["US", "Cheese", "2019-02-12"],
  ["CA", "Apples", "2019-03-01"],
]);

// Columns configuration
const columns = ref([
  { width: "170px" },
  { width: "170px" },
  { width: "170px" }
]);

// Initial comments
const comments = ref({
  B1: "Initial comments on B1",
  C1: "Initial comments on C1",
});
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet-ce";

import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    worksheets: jspreadsheet.worksheetInstance[];

    ngAfterViewInit() {
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [
                {
                    data: [
                        ['US', 'Cheese', '2019-02-12'],
                        ['CA', 'Apples', '2019-03-01'],
                        ['CA', 'Carrots', '2018-11-10'],
                        ['BR', 'Oranges', '2019-01-12'],
                    ],
                    columns: [
                        { width: '170px' },
                        { width: '170px' },
                        { width: '170px' },
                    ],
                    allowComments: true,
                    comments: {
                        B1: 'Initial comments on B1',
                        C1: 'Initial comments on C1'
                    },
                }
            ],
        });
    }
}
Sheet1
undo
redo
save
Default
Default
Verdana
Arial
Courier New
format_size
x-small
small
medium
large
x-large
format_align_left
format_align_left
format_align_center
format_align_right
format_align_justify
format_bold
format_color_text
format_color_fill
vertical_align_center
vertical_align_top
vertical_align_center
vertical_align_bottom
web
border_all
border_all
border_outer
border_inner
border_horizontal
border_vertical
border_left
border_top
border_right
border_bottom
border_clear
Reset
Done
Grid
Spectrum
Sliders
Red0
Green0
Blue0
a
color_lens
fullscreen
share
ABCDEF
1
2
Jspreadsheet CE
<html>
<script src="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />


<div id="spreadsheet"></div>

<script>
jspreadsheet(document.getElementById('spreadsheet'), {
    toolbar: function(toolbar) {
        // Add a new custom item in the end of my toolbar
        toolbar.items.push({
            tooltip: 'My custom item',
            content: 'share',
            onclick: function() {
                alert('Custom click');
            }
        });

        return toolbar;
    },
    worksheets: [{
        minDimensions: [6, 2]
    }]
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";

export default function App() {
    const spreadsheet = useRef();

    const toolbar = function(toolbar) {
        // Add a new custom item in the end of my toolbar
        toolbar.items.push({
            tooltip: 'My custom item',
            content: 'share',
            onclick: function() {
                alert('Custom click');
            }
        });

        return toolbar;
    }

    return (
        <>
            <Spreadsheet ref={spreadsheet} toolbar={toolbar}>
                <Worksheet minDimensions={[6, 2]} />
            </Spreadsheet>
        </>
    );
}
<template>
  <Spreadsheet ref="spreadsheetRef" :toolbar="toolbar">
      <Worksheet 
          :minDimensions="[5, 2]"
      />
  </Spreadsheet>
</template>

<script setup>
import { ref } from 'vue';
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/spreadsheet.css";

// Spreadsheet ref
const spreadsheetRef = ref(null);

const toolbar = (toolbar) => {
    // Add a new custom item in the end of my toolbar
    toolbar.items.push({
        tooltip: 'My custom item',
        content: 'share',
        onclick: function() {
            alert('Custom click');
        }
    });
    return toolbar;
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet-ce";

import "jspreadsheet-ce/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

// Create component
@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, {
            toolbar: function(toolbar) {
                // Add a new custom item in the end of my toolbar
                toolbar.items.push({
                    tooltip: 'My custom item',
                    content: 'share',
                    onclick: function() {
                        alert('Custom click');
                    }
                });
        
                return toolbar;
            },
            worksheets: [{
                minDimensions: [6, 2]
            }]
        });
    }
}

	Text	Numeric	Calendar	D	Checkbox	Color
1	Hello	$ 13.123,00		Yes
2	World!	$ 8,00		No

	A	B	C
1	US	Cheese	2019-02-12
2	CA	Apples	2019-03-01

With Jspreadsheet, you can quickly create online spreadsheets using JavaScript arrays, JSON, CSV, and XLSX files. This flexibility simplifies data integration and minimizes your application's need for complex processing.

Jspreadsheet reduces customers development time.
Here are some of their experiences.

Rich Interfaces

Make rich and user-friendly web interfaces and applications

User-Friendly Inputs

You can easily handle complicated data inputs in a way users are used to

Enhanced Experience

Improve your user software experience

Beautiful CRUDs

Create rich CRUDS and beautiful UI

Compatibility with excel spreadsheets

Users can move data around with common copy and paste shortcuts

Easy Customization

Easy customizations with easy third-party plugin integrations

Fast and Simple

Lean, fast and simple to use

Faster Data Entry

Speed up your work dealing with difficult data entry in a web-based software

Shareable Spreadsheets

Create and share amazing online spreadsheets

Explore the powerful and versatile components designed to elevate your productivity. From data management to collaboration, our ecosystem seamlessly integrates to meet your needs.

Jspreadsheet Pro

Enterprise JavaScript data grid component to integrate spreadsheet UI into your web-based application.

Intrasheets

Collaborate with ease using Intrasheets, an intuitive tool for managing spreadsheets across teams, ensuring that everyone stays on the same page.

Jsuites

Comprehensive JavaScript plugins and web components for diverse web-based applications and requirements.

LemonadeJS

A light and easy-to-use solution for creating elegant UI elements, giving your web apps a refreshing boost in both style and functionality.

Supermarket information

Other Information

Tech news, tips and technical advice

Edit this page on GitHub