Spreadsheet Component for React
This is a spreadsheet component built in Facebook's ReactJS. You can see a demo here.
The component is initialized with a configuration object. If desired, initial data for the spreadsheet can be passed in as an array of rows. In addition, you can pass in a second array filled with class names for each cell, allowing you to style each cell differently.
var SpreadsheetComponent = ;React;
var config =// Initial number of rowrows: 5// Initial number of columnscolumns: 8// True if the first column in each row is a header (th)hasHeadColumn: true// True if the data for the first column is just a string.// Set to false if you want to pass custom DOM elements.isHeadColumnString: true// True if the first row is a header (th)hasHeadRow: true// True if the data for the cells in the first row contains strings.// Set to false if you want to pass custom DOM elements.isHeadRowString: true// True if the user can add rows (by navigating down from the last row)canAddRow: true// True if the user can add columns (by navigating right from the last column)canAddColumn: true// Override the display value for an empty cellemptyValueSymbol: '-'// Fills the first column with index numbers (1...n) and the first row with index letters (A...ZZZ)hasLetterNumberHeads: true;
Initial Data Object
The initial data object contains an array
rows, which itself contains an array for every single row. Each index in the array represents a cell. It is used by the component to pre-populate the cells with data. Be aware that user input is not written to this object, as it is merely used in initialization to populate the state. If you want to capture user input, read below.
var data =rows:'Key' 'AAA' 'BBB' 'CCC' 'DDD' 'EEE' 'FFF' 'GGG''COM' '0,0' '0,1' '0,2' '0,3' '0,4' '0,5' '0,6''DIV' '1,0' '1,1' '1,2' '1,3' '1,4' '1,5' '1,6''DEV' '2,0' '2,1' '2,2' '2,3' '2,4' '2,5' '2,6''ACC' '3,0' '3,1' '3,2' '3,3' '3,4' '3,5' '3,6';
Cell Classes Object
You can assign custom classes to individual cells. Follow the same schema as for the initial data object.
var classes =rows:'' 'specialHead' '' '' '' '' '' '''' '' '' '' '' '' '' '''' 'error' '' '' '' '' '' '''' 'error changed' '' '' '' '' '' '''' '' '' '' '' '' '' '';
User input is not written to the
initialData object, as it is merely used in initialization to populate the state. If you want to capture user input, subscribe callbacks to the
dataChanged events on the dispatcher.
The last parameter is the
spreadsheetId of the spreadsheet you want to subscribe to.
Get the full data state after each change
var Dispatcher = ;Dispatcher
Get the data change before state change
var Dispatcher = ;Dispatcher
Other Dispatcher Events
The dispatcher offers some other events you can subscribe to:
headCellClickedA head cell was clicked (returns a cell array
cellSelectedA cell was selected (returns a cell array
cellBlurA cell was blurred (returns returns a cell array
editStartedThe user started editing (returns a cell array
editStoppedThe user stopped editing (returns a cell array
newRowThe user created a new row (returns the row index)
newColumnThe user created a new column (returns the row index)
Running the Example
Clone the repository from GitHub and open the created folder:
git clone https://github.com/felixrieseberg/React-Spreadsheet-Component.gitcd React-Spreadsheet-Component
Install npm packages and compile JSX
If you are using Windows, run the following commands instead:
npm install --msvs_version=2013gulp
Open the example in example/index.html.
(C) Copyright 2015 Microsoft Corporation and Felix Rieseberg. Licensed as MIT, please see
LICENSE for details.