Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 16, 2022 03:02 am GMT

Create Excel-like javascript spreadsheet in less than 10 lines of code

Spreadsheets are one of the most important format that stores and calculates data, and are also key components of products that focus on online document.

In this blog, we will see how to create a rich-featured javascript spreadsheet in just 10 minutes.

This is what it will look like when you finish:

spreadsheet

Setup

Let's start by creating an empty project with create-react-app

If you already have a react project, you can skip this step.

npx create-react-app my-spreadsheet

or if you are using yarn

yarn create react-app my-spreadsheet

Then, go into my-spreadsheet folder, install our spreadsheet library

# using npmnpm install @fortune-sheet/react# or using yarnyarn add @fortune-sheet/react

Using the library

Replace src/App.js with the following content

import { Workbook } from "@fortune-sheet/react";import "@fortune-sheet/react/dist/index.css"function App() {  return <Workbook data={[{ name: "Sheet1" }]} />}export default App;

Add the following lines into src/index.css

html, body, #root {  height: 100%;}

Great, all things are set up!

Now, start the project by running

# using npmnpm start# or using yarnyarn start

and there you go!

You can play around it and try the features.

Next

In the next blog we will show you how to persist sheet data and make it collabrative, which will end up like this:

collabration

The spreadsheet library is completely opensource, for more information, check out

https://github.com/ruilisi/fortune-sheet

It is under active development, feedbacks are appreciated!


Original Link: https://dev.to/zyc9012/create-excel-like-javascript-spreadsheet-in-less-than-10-lines-of-code-4a5o

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To