Angular Spreadsheet Component

Used by the world's leading companies

Create an Angular Spreadsheet in Two Minutes

The fastest way to start is the install wizard. It detects Angular and sets up everything:

npx @jspreadsheet/install

Or install manually:

npm install jspreadsheet

Then create your first spreadsheet component:

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import jspreadsheet from "jspreadsheet";

// Get a free 30-day trial certificate at jspreadsheet.com
jspreadsheet.setLicense('MmNmNGRiNWE1YzdiZDE4MmQ2MzFlZTczMzQ3ZmIxZDFmZTdlYjljMDA5NTVhNThjZmU3Mjk5ZjAwZjk2YmVhYzVjZTQyMDRkMDUyYWQ0Zjk2YzYxZGJiNzI1YmIwZGYwZjQ5YWYzMDVjNjIzYmViNzg2ZTViYzM0MDkzZGIzNjIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpnMk56WTRPVEExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

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

    ngAfterViewInit() {
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                data: [
                    ['Mazda', 2001, 2000, '=B1*C1'],
                    ['Peugeot', 2010, 5000, '=B2*C2'],
                    ['Honda Fit', 2009, 3000, '=B3*C3'],
                ],
                columns: [
                    { title: 'Model', width: '250px' },
                    { title: 'Year', width: '100px' },
                    { title: 'Price', width: '100px' },
                    { title: 'Total', width: '120px' },
                ]
            }]
        });
    }
}

Add the stylesheets to your angular.json:

"styles": [
    "jsuites/dist/jsuites.css",
    "jspreadsheet/dist/jspreadsheet.css"
]

That is a complete Excel-like Angular spreadsheet: editable cells, live formulas, keyboard navigation, and copy and paste from Excel. The Angular documentation has working StackBlitz examples, and the getting started guide explains every configuration option.

Proven Solution, Backed by Users

In their own words: How teams saved hours and reduce rework.

What Our Customers Are Saying

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

"At SplitC we struggled sometimes when users wanted to bulk insert/edit things (sometimes over 100k rows) and we needed performance. Jspreadsheet is probably the fastest spreadsheet component you'll find out there, and with a small bundle size. By the way, support is awesome."

Lucas Segers,

"We vetted 10 JavaScript components and we must say that Jspreadsheet comes out as the best."

Lode Cools,

"The latest version of Jspreadsheet is a powerful data grid tool, providing an excellent front end for our spreadsheet interface. The Jspreadsheet team is helpful and quick to respond."

Dana Stoesz,

What Developers Build with This Angular Spreadsheet

Spreadsheets with Excel-compatible formulas

Formulas work out of the box: type them in cells or ship them with your data, as in the quickstart above. Calculations run on the client with the same syntax users know from Excel, including cross-worksheet references. The formulas documentation covers custom functions, and Formula Pro adds the complete 500+ function set.

Excel file import and export

Let users drop an XLSX file into your Angular application, edit it, and download the result. Formulas, formatting, merged cells, and multiple worksheets survive the round trip. See import from XLSX and export to XLSX.

Data entry with typed columns

Each column can enforce a type with its own editor: dropdowns, calendars, checkboxes, images, colors, and more.

columns: [
    { title: 'Product', type: 'text', width: '200px' },
    { title: 'Category', type: 'dropdown', source: ['Hardware', 'Software'], width: '160px' },
    { title: 'Launch date', type: 'calendar', width: '140px' },
]

The full list of editors is in the columns documentation.

Reacting to user changes

Every edit fires an event you can handle in the configuration, which makes it straightforward to sync spreadsheet data with your Angular services, an API, or a chart library:

jspreadsheet(this.spreadsheet.nativeElement, {
    worksheets: [{ minDimensions: [10, 10] }],
    onchange: (worksheet, cell, x, y, value) => {
        console.log(`Cell (${x}, ${y}) changed to ${value}`);
    },
});

All events are listed in the events documentation.

How Jspreadsheet Compares to Other Angular Spreadsheet Libraries

AG Grid is a strong choice for read-heavy analytics grids. Handsontable is a capable spreadsheet component with a different licensing model. Choose Jspreadsheet when your users expect a real spreadsheet: formulas, XLSX round trips, and Excel behavior, at a lower total cost of ownership. See the detailed Handsontable comparison, AG Grid comparison, and pricing.

Frequently Asked Questions

Is there a free Angular spreadsheet component?

Yes. Jspreadsheet CE is MIT-licensed and free, including for commercial use. The Pro edition on this page adds XLSX import and export, the 500+ function formula engine, real-time collaboration, and more, with a 30-day free trial and no credit card required.

Does Jspreadsheet work with modern Angular and TypeScript?

Yes. Jspreadsheet ships full TypeScript definitions and works with modern Angular, including standalone components, as shown in the quickstart above. Initialization happens in ngAfterViewInit with a ViewChild reference.

Can users open and save Excel files?

Yes. XLSX, XLS, and CSV import and export are built in. Formulas, cell formatting, merged cells, and multiple worksheets are preserved in both directions.

How many rows can an Angular spreadsheet handle?

Hundreds of thousands of rows. Virtual rendering only draws visible cells, so scrolling and editing stay smooth as data grows.

What is the difference between an Angular spreadsheet and an Angular data grid?

A spreadsheet gives users free-form editing with formulas and Excel behavior. A data grid presents structured records with typed columns and validation. Jspreadsheet does both: see the Angular data grid page for the data-centric view, or the Angular table page for lightweight editable tables.

More resources

Angular documentation · Getting started · Examples · Angular data grid · Angular table · React spreadsheet · Vue spreadsheet