Angular Table Component

Used by the world's leading companies

Build an Editable Angular Table 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 an editable table with pagination:

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

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

@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: [
                    ['Ana', 'ana@company.com', 'Active'],
                    ['Bruno', 'bruno@company.com', 'Pending'],
                    ['Carla', 'carla@company.com', 'Active'],
                ],
                columns: [
                    { title: 'Name', width: '180px' },
                    { title: 'Email', width: '240px' },
                    { title: 'Status', type: 'dropdown', source: ['Active', 'Pending', 'Disabled'], width: '140px' },
                ],
                pagination: 10,
            }]
        });
    }
}

Add the stylesheets to your angular.json:

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

Unlike template-driven table components, nothing else is required: inline editing, keyboard navigation, copy and paste, sorting, and pagination all work out of the box. The Angular documentation has working StackBlitz examples, and the getting started guide explains every 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 Table

Editable lists and CRUD tables

User management, task lists, inventory: any list your users need to edit inline. Dropdown, calendar, and checkbox columns validate input at the cell, and the context menu handles row insertion and deletion without extra code.

Tables that report their own state

Read the whole table as an array at any time, or react to individual edits with an event handler:

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

// Read the full table whenever needed
const rows = this.worksheets[0].getData();

All events are listed in the events documentation.

Excel-friendly workflows

Users can paste ranges straight from Excel or Google Sheets into the table, and export the result to XLSX or CSV when they are done. See export to XLSX.

How Jspreadsheet Compares to Other Angular Table Libraries

Angular Material tables are excellent for displaying data inside a Material design system. Choose Jspreadsheet when your users need to edit: Excel-style interaction, typed editors, clipboard support, and pagination work today, with a path to a full data grid or spreadsheet later. See the Handsontable comparison and pricing.

Frequently Asked Questions

Is there a free Angular table component 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 is Jspreadsheet different from Angular Material tables?

Material tables are read-first: editing requires custom cell templates and forms. Jspreadsheet ships the complete editing UI, including Excel-style navigation, typed column editors, copy and paste, and formulas.

Does the Angular table support pagination and sorting?

Yes. Pagination, sorting, filtering, and search are built in and configurable per worksheet, as shown in the quickstart above.

Can users edit cells directly in the table?

Yes. Every cell is editable inline with Excel-style keyboard navigation. Columns enforce types such as dropdown, calendar, and checkbox, so invalid input never reaches your data.

When do I need a data grid or spreadsheet instead of a table?

Use a table for lightweight editable lists. Use an Angular data grid for large structured datasets with validation. Use an Angular spreadsheet for free-form editing with formulas. All three run on the same Jspreadsheet engine.

More resources

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