An Interest In:
Web News this Week
- March 22, 2024
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
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:
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:
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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To