https://github.com/constantoduol/sprd

A spreadsheet from the future
https://github.com/constantoduol/sprd

excel javascript reactjs spreadsheet

Last synced: about 19 hours ago
JSON representation

A spreadsheet from the future

• Host: GitHub
• URL: https://github.com/constantoduol/sprd
• Owner: constantoduol
• License: mit
• Created: 2017-07-10T11:07:38.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-26T06:56:55.000Z (over 6 years ago)
• Last Synced: 2025-01-12T12:02:08.647Z (2 days ago)
• Topics: excel, javascript, reactjs, spreadsheet
• Language: JavaScript
• Size: 883 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Getting Started

`npm install sprd`

## How it looks

![Alt text](images/sprd.gif?raw=true "Sprd in Action")

or 

[Demo Video](https://www.useloom.com/share/1106217b86584231b2bcdb583384fd5f)

## Available features

1. Keyboard navigation using arrow keys or page up and page down

2. Copy and Paste

3. Infinite scrolling vertically and horizontally

4. Custom cell formatting

5. Drag highlighting

## Loading inital data

```javascript

import {SprdContainer} from 'sprd';

let data = [

  ['Name', 'Age'], 

  ['sam', 20], 

  ['Mike', 30], 

  ['Greg', 40], 

  ['Monroe', 50],

  ['sam', 20], 

  ['Mike', 30], 

  ['Greg', 40], 

  ['Monroe', 50],

  ['sam', 20], 

  ['Mike', 30], 

];

```

## Listening to events

```javascript

import {SprdContainer} from 'sprd';

 {

     console.log(eventType, range, data) 

     if(range) console.log(range.getAddress())

  }}

  data={data}/>

```

## Overriding the cells with custom ones

```javascript

import {SprdContainer} from 'sprd';

 {

    if(cellInfo.row === 0){

      innerCell = (

        

          Hello

          World

        

      )

    }

    if(cellInfo.row === 0){

      outerCell = 

    }

    if(cellInfo.row > 5 && cellInfo.row < 10){

      outerCell = 

    }

    if(cellInfo.dataType === "number"){

      outerCell = 

    }

    return {innerCell, outerCell}}

  }

  data={data}/>

```

## Getting all data currently in the spreadsheet

```javascript

import {Store} from 'sprd';

console.log(Store.getData());

```

This will return a json object with the top level keys corresponding to the row indices

and the keys in the nested json objects corresponding to column indices

e.g

```javascript

{

  0:{0: "Name", 1: "Age"},

  1:{0: "sam", 1: 20},

  2:{0: "Mike", 1: 30},

  3:{0: "Greg", 1: 40}

}

```

NB: Any cells without data are not captured

## Props and meaning

1. `showHeaderLetters` - whether to show the excel like header letters at the top of columns, default is true

2. `showFooter` - whether to show the footer that displays the cell address, default is true

3. `infiniteScroll` - whether to scroll infinitely both vertically and horizontally, default is true

4. `width` - the width in pixels of the grid, default is 1000

5. `height` - the height in pixels of the grid, default is 800

6. `onEvent` - javascript function to listen to events in the spreadsheet

7. `columnDataTypes` - an array containing the list of column data types

8. `cellOverride` - a callback to override default cells with your own custom cells

9. `data` - an array of arrays containing the default data