Angular Data Grid Component

Used by the world's leading companies

Build an Angular Data Grid 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 a data grid with typed columns:

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

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

@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: [
                    ['SKU-100', 'Keyboard', 'Hardware', '2026-01-15'],
                    ['SKU-101', 'CRM License', 'Software', '2026-02-01'],
                    ['SKU-102', 'Monitor', 'Hardware', '2026-03-10'],
                ],
                columns: [
                    { title: 'SKU', width: '120px' },
                    { title: 'Product', width: '220px' },
                    { title: 'Category', type: 'dropdown', source: ['Hardware', 'Software'], width: '160px' },
                    { title: 'Added', type: 'calendar', width: '140px' },
                ]
            }]
        });
    }
}

Add the stylesheets to your angular.json:

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

You get an editable Angular data grid with dropdown and calendar editors, Excel-style keyboard navigation, and copy and paste that plays nicely with Excel and Google Sheets. The Angular documentation has working StackBlitz examples, and the columns documentation lists every column type.

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 Data Grid

Admin panels and CRUD interfaces

Replace per-row edit forms with inline editing. Users update records directly in the grid with dropdowns, calendars, and checkboxes enforcing valid input. The columns documentation lists every editor type.

Grids that stay in sync with your application

Every edit fires an event you can handle in the configuration, so keeping Angular services, an API, or a chart in sync is one handler away:

jspreadsheet(this.spreadsheet.nativeElement, {
    worksheets: [{ data, columns }],
    onchange: (worksheet, cell, x, y, value) => {
        this.updateRecord(y, x, value);
    },
});

Read the current grid state at any time with getData(). All events are listed in the events documentation.

Calculated columns with Excel formulas

Unlike most Angular data grids, Jspreadsheet ships a formula engine. Add computed columns with the same syntax users know from Excel:

data: [
    ['Keyboard', 25, 40, '=B1*C1'],
    ['Monitor', 12, 180, '=B2*C2'],
]

See the formulas documentation for custom functions and the complete 500+ function set.

Excel round trips

Import an XLSX file into the grid, edit it, and export it back with formulas, formatting, and worksheets intact. See import from XLSX and export to XLSX.

How Jspreadsheet Compares to Other Angular Data Grid Libraries

AG Grid excels at read-heavy analytics with server-side row models, grouping, and pivoting. If your grid is mostly presentation, it is a fine choice. Choose Jspreadsheet when users edit data: cell-level validation, Excel behavior, formulas, and XLSX round trips come standard, at a lower total cost per developer. See the detailed AG Grid comparison, Handsontable comparison, and pricing.

Frequently Asked Questions

Is there a free Angular data grid with editing?

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.

How does Jspreadsheet handle large datasets in Angular?

Virtual rendering draws only the visible cells, so grids with hundreds of thousands of rows scroll and edit smoothly, without pagination tricks.

Does the Angular data grid support column types and validation?

Yes. Columns can be text, numeric, dropdown, calendar, checkbox, color, image, and more. Each type brings its own editor and validation, so bad data never enters the grid.

Can I export the grid to Excel?

Yes. XLSX, XLS, and CSV import and export are built in, preserving formulas, formatting, and multiple worksheets. No third-party spreadsheet library required.

When should I choose a data grid over a spreadsheet component?

Choose a data grid for structured records with typed columns and validation. Choose a spreadsheet for free-form editing with formulas. Jspreadsheet does both: see the Angular spreadsheet page for the spreadsheet model, or the Angular table page for lightweight editable tables.

More resources

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