JavaScript component to create web applications with spreadsheet UI

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

23k+

Weekly downloads

6700+

GitHub stars

MIT License

Free and open-source

Compatible with
React, Angular, and Vue.

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

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

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

```html



```
```jsx
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 (
        
            
        
    );
}
```
```vue

```
```angularjs
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: `
`,
})
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' }
                ]
            }],
        });
    }
}
```



```html



```
```jsx
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 (
        <>
            
                
            
        
    );
}
```
```vue

```
```angularjs
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: `
`,
})
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'
                        }
                    ],
                ]
            }]
        });
    }
}
```



```html



```
```jsx
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 (
        <>
            
                
            
        
    );
}
```
```vue

```
```angularjs
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: `
`
})
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'
                    },
                }
            ],
        });
    }
}
```



```html



```
```jsx
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 (
        <>
            
                
            
        
    );
}
```
```vue

```
```angularjs
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: `
`,
})
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]
            }]
        });
    }
}
```

Create an online spreadsheet from various data formats

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.

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

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

Component Ecosystem

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.

Subscribe to our newsletter

Tech news, tips and technical advice