Getting Started
npm install sprd
How it looks
or
Available features
- Keyboard navigation using arrow keys or page up and page down
- Copy and Paste
- Infinite scrolling vertically and horizontally
- Custom cell formatting
- Drag highlighting
Loading inital data
; let data = 'Name' 'Age' 'sam' 20 'Mike' 30 'Greg' 40 'Monroe' 50 'sam' 20 'Mike' 30 'Greg' 40 'Monroe' 50 'sam' 20 'Mike' 30 ; <SprdContainer width=800 height=600 data=data/>
Listening to events
; <SprdContainer width=800 height=600 onEvent= { console ifrange console } data=data/>
Overriding the cells with custom ones
; <SprdContainer width=800 height=600 cellOverride= { ifcellInforow === 0 innerCell = <select ...innerCellprops style=padding: 3 ref=innerCellref> <option>Hello</option> <option>World</option> </select> ifcellInforow === 0 outerCell = <span ...outerCellprops style=fontWeight: 'bold'/> ifcellInforow > 5 && cellInforow < 10 outerCell = <span ...outerCellprops style=color: 'green'/> ifcellInfodataType === "number" outerCell = <span ...outerCellprops style=color: 'blue' fontSize: 11 key=outerCellkey/> return innerCell outerCell} data=data/>
Getting all data currently in the spreadsheet
; console;
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
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
showHeaderLetters
- whether to show the excel like header letters at the top of columns, default is trueshowFooter
- whether to show the footer that displays the cell address, default is trueinfiniteScroll
- whether to scroll infinitely both vertically and horizontally, default is truewidth
- the width in pixels of the grid, default is 1000height
- the height in pixels of the grid, default is 800onEvent
- javascript function to listen to events in the spreadsheetcolumnDataTypes
- an array containing the list of column data typescellOverride
- a callback to override default cells with your own custom cellsdata
- an array of arrays containing the default data