felixrieseberg/react-spreadsheet-component

:clipboard: Spreadsheet Component for ReactJS

Spreadsheet Component for React

⚠️ Maintainers wanted! I haven't been able to keep this component up to date and would gladly hand the keys over to someone who is.

This is a spreadsheet component built in Facebook's ReactJS. You can see a demo here.

Usage

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 = require('react-spreadsheet-component');
React.render(<SpreadsheetComponent initialData={initialData} config={config} spreadsheetId="1" />, document.getElementsByTagName('body'));

Configuration Object

var config = {
    // Initial number of row
    rows: 5,
    // Initial number of columns
    columns: 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 cell
    emptyValueSymbol: '-',
    // 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', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '']
    ]
};

Data Lifecycle

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 cellValueChanged and 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 = require('./src/dispatcher');

Dispatcher.subscribe('dataChanged', function (data) {
    // data: The entire new data state
}, "spreadsheet-1")

Get the data change before state change

var Dispatcher = require('./src/dispatcher');

Dispatcher.subscribe('cellValueChanged', function (cell, newValue, oldValue) {
    // cell: An array indicating the cell position by row/column, ie: [1,1]
    // newValue: The new value for that cell
}, "spreadsheet-1")

Other Dispatcher Events

The dispatcher offers some other events you can subscribe to:

• headCellClicked A head cell was clicked (returns a cell array [row, column])
• cellSelected A cell was selected (returns a cell array [row, column])
• cellBlur A cell was blurred (returns returns a cell array [row, column])
• editStarted The user started editing (returns a cell array [row, column])
• editStopped The user stopped editing (returns a cell array [row, column])
• newRow The user created a new row (returns the row index)
• newColumn The 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.git
cd React-Spreadsheet-Component

Install npm packages and compile JSX

npm install
gulp

If you are using Windows, run the following commands instead:

npm install --msvs_version=2013
gulp

Open the example in example/index.html.

License

(C) Copyright 2015 Microsoft Corporation and Felix Rieseberg. Licensed as MIT, please see LICENSE for details.

react-spreadsheet-component's Issues

Not able to use lifecycle events

Are there any other configurations that needs to be done to get the data when it's changed using dataChanged or cellValueChanged events?

Also not able to change initial data once it is assigned.

I'm attaching sandbox link here: https://codesandbox.io/s/spready-forked-jb0wg

Integration with Electron

This may be due to me just getting into React and Electron very recently but I'm having a hard time getting this to run properly inside an Electron app. I was able to get it installed and compiled but if I try to generate a component I end up with the following error from the following source.

Error: Uncaught TypeError: Cannot read property 'createClass' of undefined

Code (error is on the React.createClass line):

},{"react/lib/ReactDOM":71}],32:[function(require,module,exports){
(function (global){
"use strict";

var React = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);
var ReactDOM = (typeof window !== "undefined" ? window['ReactDOM'] : typeof global !== "undefined" ? global['ReactDOM'] : null);

var Dispatcher = require('./dispatcher');
var Helpers = require('./helpers');

var CellComponent = React.createClass({displayName: "CellComponent",

Any quick ideas on what the cause might be?

Question about config settings

I'm in the process of dissecting your component and refactoring it as part of a research project. While digging through the implementation of CellComponent, I notice that there are two flags which do not appear to do what they say they do. Specifically:

var config = {
 ...
    // 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 data for the cells in the first row contains strings.
    // Set to false if you want to pass custom DOM elements.
    isHeadRowString: true,
...
};

According to the documentation, the intent has something to do with passing custom DOM components. However, this is unnecessary in React as passing JSX into a display value works just fine without a flag:

import React from 'react';
import './App.css';

function TestComponent(props) {
    return <div>{props.config.displayValue}</div>
}

function App() {
    const simpleText = {
        displayValue: 'Hello World'
    }

    const jsxElement = {
        displayValue: <b>Enhanced HTML for the masses</b>
    }

    return (
        <div>
            <TestComponent config={simpleText}/>
            <TestComponent config={jsxElement} />
        </div>
    );
}

export default App;

I also discovered that the only place these flags are used is as a guard condition in cell.js. The effect appears to enable clicking on a header:

            if ((config.isHeadRowString && headRow) || (config.isHeadColumnString && headColumn)) {
                return (
                    <th className={cellClasses} ref={this.uid_key}>
                        <div>
                            <span onClick={this.handleHeadClick.bind(this)}>
                                {displayValue}
                            </span>
                        </div>
                    </th>
                );
            } else {
                return (
                    <th ref={this.uid_key}>
                        {displayValue}
                    </th>
                );
            }

I suspect that these flags are some kind of legacy whose purpose mutated over the development of the component. My question is, could you confirm my suspicions or enlighten me as to the use of the flags?

If it turns out the flags are no longer necessary, I may simply remove them from my refactored prototype component.

Thank you.

Update Documentation

Looks like you're using Gulp now instead of Grunt. can you update the README.md for those of us who are not as familiar with Gulp? Running gulp example seems to break example/index.html.

Publish to npm

When will this be published to npm?

Component doesn't update on change of initialData

Hi.

I have the component like this:
<SpreadsheetComponent initialData={viewDataSet.initialData} config={viewDataSet.config} spreadsheetId="1" />

When i change the viewDataSet. It shows in the react devtools that the props are indeed updated to the new initialData but the state of the component is still using the original data.

Can't find module through npm installation

Installed this using npm install, I can see it in my node_modules folder, but when I import like so:

import Spreadsheet from 'react-spreadsheet-component', I get the error Error: cannot find module 'react-spreadsheet-component'. Any idea why this might be?

Update to React 15?

Any chance this great component gets updated to work with React 15?

Any options for updating the displayed data when the initialData's data source is replaced with other data source

Currently, this is my code

<SpreadsheetComponent initialData={this.state.data} config={config} spreadsheetId="1" />

Where data is from a csv.

Module not found: Cannot resolve module 'mousetrap' in .../spreadsheet @ .../spreadsheet/dispatcher.js

We just added mousetrap ~1.5.3 to our package.json and that fixed our builds. Haven't tested yet. We had tested with ~1.5.2 back when we first built it.

Upgrade dependencies

How to apply this component in my application?

Could I directly install this component using some command? Thanks.

addRows for spreadsheet

Hey,
I looked at the config where addrows:true needs to be written & it says it should work from the last line.

But I can't seem to go beyond the initialData that is loading (on mobile browsers). Should I use some kind of a Dispatcher for that?

Also wanted to know how to add custom components for columns eg; datepicker or autosuggest for customized row element data.

Thanks

Allow for copy/paste of multiple rows+columns

I'd like to see essentially the exact same thing as this person is requesting here: adazzle/react-data-grid#86

I'd like to be able copy & paste a range of rows and columns, similar to what you can do in Excel at the moment.

this could be copying between cell ranges on the same grid, between two separate grid instances, or from somewhere off-grid (e.g. Excel).

https://cloud.githubusercontent.com/assets/2393035/10424809/3fc45d68-70ca-11e5-907a-38d63878d50a.gif

Would this be possible to do with this component? If so it would be awesome!

Thanks!

"Data Lifecycle" is incorrect

I might be misunderstanding, but where it says in the "Data Lifecycle" section of the readme:

User input is not written to the initialData object, as it is merely used in initialization to populate the state.

Having just ran into this, I tried updating a mutable variable via the Dispatcher system, which didn't seem to work for some reason. However, I didn't need it to, as the initial data object seems to get mutated on user edit.

Documentation ?

I have been looking for something that does what your plugin does for a while and it seems as though 'react-spreadsheet-component' might be a winner.

Now, the problem i have is with the lack of documentation.

You have a very brief mention of dispatching the actions and other methods, and then you jump to the demo, which even when downloaded, it comes already bundled, so even then we can't see the source code of how it was built.

I really want to give this plugin a try, i just dont know where to start given the lack of documentation.

Any pointers ?

Thanks a lot in advance.

Can't import library

I have run the project on Laravel and use this library but not found this library when it's compiled it's always failed with this message
ERROR Failed to compile with 1 errors This dependency was not found: * react-spreadsheet-component in <MyComponent>

Add JEST Testing

Bringing the text (being entered) at the center of the cell

Will React Spreadsheet do Calculations?

First of all, love what you have implemented so far.

Just wondering if there is a plan for this component to eventually do some basic calculations like math and simple functions like sum() and average().

Since it is called spreadsheet (as opposed to data table) it feels like it should be on the roadmap but I thought I'd check.

There is no ./lib/spreadsheet.js in your folder

I noticed that you specify 'lib' in your multiple files: package.json and gulpfile. However there is no './lib/spreadsheet' at all. I suspect the main script should be './src/spreadsheet'. Could you explain why did you do in this way which raised mulple errors in building?