Amazing JavaScript Data Grid with Spreadsheet Controls
With the best front-end data grid component, developers can integrate professional spreadsheet-like controls to their applications faster and more flexibly than ever.
Data Grid: 100 columns x 50000 rows (five million cells)
Manipulate large amounts
of data in a tabular format
Work with literally millions of records in milliseconds. The new data grid version includes a navigation system that leverages the viewport to load only the data visible to the user. This feature enhances the user experience by creating a seamless and speedy performance while minimizing the application's resource utilization.
Deliver an Excel experience to your end user
Over 400 implemented excel-like formulas. A feature-rich data grid component that includes functions like cross worksheets, filtering, export to xlsx, import from xlsx, data binding, and more.
<html> <script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" /> <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://fonts.googleapis.com/css?family=Material+Icons" /> <div id="spreadsheet"></div> <script> // Set your JSS license key jspreadsheet.setLicense('your license'); // Create the spreadsheet let worksheets = jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ minDimensions: [10,10] }] }); </script> </html>
import React, { useRef, useState } from "react"; import { Spreadsheet, Worksheet } from "@jspreadsheet/react"; // Set your license here const license = 'your-license'; export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Render component return ( <Spreadsheet ref={spreadsheet} license={license}> <Worksheet /> </Spreadsheet> ); }
<template> <Spreadsheet ref="spreadsheet" :license="license"> <Worksheet /> </Spreadsheet> </template> <script> import { Spreadsheet, Worksheet } from "@jspreadsheet/vue"; // Set your license here const license = 'your-license'; // Create component export default { components: { Spreadsheet, Worksheet }, data() { return { license: license, } } } </script>
import { Component, ViewChild, ElementRef } from "@angular/core"; import * as jspreadsheet from "jspreadsheet"; jspreadsheet.setLicense('your license'); @Component({ selector: "app-root", template: `<div #spreadsheet></div>` }) export class AppComponent { @ViewChild("spreadsheet") spreadsheet: ElementRef; // Worksheets worksheets: jspreadsheet.worksheetInstance[]; // Create a new data grid ngOnInit() { // Create spreadsheet this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, { worksheets: [{ minDimensions: [10,10] }] }); } }
Choose how you want to work
In an agnostic platform, you’ve got all the flexibility to work with JavaScript, React, Angular, Vue, and Typescript. Jspreadsheet Data Grid gives you extensive documentation, excellent technical support, and the freedom to create custom plugins.
Keep control of your data
Jspreadsheet is a frontend data grid tool; for this reason, we don’t have access to, process or store your data. All data is managed offline on the client side.
Integrations
Jspreadsheet allows you to integrate your spreadsheet with other plugins to create rich applications.Lightweight
Just 0.3 Mb. Jspreadsheet is designed to be lean and efficient, making it a breeze to integrate into your application.Persistence
Different methods, events, and features to help with the backend data persistence.What Our Customers Are Saying
Jspreadsheet reduces customers development time. Here are some of their experiences.
Software Engineer - SplitC
CTO & Co-founder - Bizzcontrol
Developer - Metrex