I just found this library and it looks awesome. I tried out the demo on https://iddan.github.io/react-spreadsheet/ and I'm seeing inconsistent behavior for formulas being executed. For example, I have this filled out:

In B1 is the int 1. In C1 is also the int 1. In D2 I have =B1+C1 which correctly outputs 2. In D3 I have =B1+D2 which returns an error.

Is this expected behavior or is this a bug in the lib?

I also saw this PR which perhaps is an improvement on formula execution? #101

Hello! I seem to have a hard time finding any of that Simple straightforward API documentation?

Some of the questions would be:

1. How do I define cell formulas on mount? If I pass them in the data prop, it'd just return #VALUE!.

2. How do I detect cell value changes ?

3. How do I programmatically update a cell ( if possible ) ?

I mean, is there any full use-case example I could happily look into?
The project looks very nice compared to everything else, but I have a hard time figuring out how to use actually use any of it ..

Please advise, thanks!

when a cell has the readOnly attribute set to true if you select a cell and press the backspace key the value is erased

I use the next.js. And try to run the example

/Users/pahaz/Code/node-docker-compose-dev/my-keystone-app/node_modules/react-spreadsheet/dist/SpreadsheetStateProvider.js:1
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1070:16)
    at Module._compile (internal/modules/cjs/loader.js:1120:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1042:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.react-spreadsheet (/Users/pahaz/Code/node-docker-compose-dev/my-keystone-app/apps/_example05app/.next/server/static/development/pages/index.js:10383:18)
    at __webpack_require__ (/Users/pahaz/Code/node-docker-compose-dev/my-keystone-app/apps/_example05app/.next/server/static/development/pages/index.js:29:31)
    at Module../pages/index.jsx (/Users/pahaz/Code/node-docker-compose-dev/my-keystone-app/apps/_example05app/.next/server/static/development/pages/index.js:10057:75)
    at __webpack_require__ (/Users/pahaz/Code/node-docker-compose-dev/my-keystone-app/apps/_example05app/.next/server/static/development/pages/index.js:29:31)
    at Object.4 (/Users/pahaz/Code/node-docker-compose-dev/my-keystone-app/apps/_example05app/.next/server/static/development/pages/index.js:10206:18)
    at __webpack_require__ (/Users/pahaz/Code/node-docker-compose-dev/my-keystone-app/apps/_example05app/.next/server/static/development/pages/index.js:29:31)
    at /Users/pahaz/Code/node-docker-compose-dev/my-keystone-app/apps/_example05app/.next/server/static/development/pages/index.js:104:18
    at Object.<anonymous> (/Users/pahaz/Code/node-docker-compose-dev/my-keystone-app/apps/_example05app/.next/server/static/development/pages/index.js:107:10)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1042:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.requirePage (/Users/pahaz/Code/node-docker-compose-dev/my-keystone-app/node_modules/next/dist/next-server/server/require.js:46:12)

I'm trying to get all data from table but I don't see any reference about it, I'd like to get the current data after the user made some changes in the cells

I'm relying on onCellCommit to send changes to my database – right now, it's not called on paste or cut.

Is the best way to implement this to paste props.onCellCommit to paste and cut (at https://github.com/iddan/react-spreadsheet/blob/master/src/Spreadsheet.js#L162 and https://github.com/iddan/react-spreadsheet/blob/master/src/Spreadsheet.js#L155) respectively, and have them call onCellCommit directly for the affected cells from there?

First of all, thanks for maintaining such a nice library.

I'm trying to react-spreadsheet with a custom DataViewer that will show a transformed version of the data entered into the cell. The problem is that the DataViewer does not update until it is selected again.

I tried to boil it down into a simplified version that shows my issue (this one just appends a ! after the text) but I'd be happy to share any details.

(ps. I understand that capturing a global ref to spreadsheet is probably not the right way to handle this. I'd be very grateful for a proper example!)

1.) Start

2.) Press a

3.) Press enter (Expect to see updated cell view)

4.) Press up-arrow to re-select cell (oh there, it is!)

// Custom Cell Viewer
const CellView = (c,r) => {
    const col = c; const row = r;
    return ({getValue, cell}) => 
    (   // Shows alternate 'display_value'
        <div> { cell.display_value } </div>
    )
  };

// Initialize empty data with custom cell viewer
const getInitialData = () =>{
  const initialData = [];
  const num_cols = 2;
  const num_rows = 2;

  for(let r=0; r<num_rows; r+=1) {
    var row = [];
    for(let c=0; c<num_cols; c+=1) {
      row.push ({ value: "" , DataViewer: CellView(c,r), display_value: "" });
    } 
    initialData.push(row);
  }
  return initialData;
};

//App with data bound by 'useState' hook
const simpleAppView = () =>{
    const [data, setData] = useState(getInitialData());

    return(<Spreadsheet 
        data={data} 
        ref={(spreadsheet) => {window.app_spreadsheet = spreadsheet}}
        onCellCommit={(prevCell, nextCell, coords) => { 
            nextCell.display_value = nextCell.value + "!";
            // Has same result with,
            setData(app_spreadsheet.prevState.data);
            // or,
            setData(data);
        }}
    />);
}

maybe with master version of react-spreadsheet?

const [initialData, setInitialData] = useState(data);
...
<Spreadsheet
        data={initialData}
        onKeyDown={(e) => {
          if (e.key === "Enter") {
            setInitialData((prev) => prev.concat([[{ value: "" }]]));
          }
        }}
 />

I'm trying this code on the OnKeyDown to add a new row in fact it is adding a new row but it is erasing all the previous data

@iddan is there any update for Performant. I'm so curious about this.

I want to use this library on my project but I had TS1128 error.

Can I get some help?

There are quite some unsolved Flow errors. Any plans to fix them soon?

Also, the exported component in SpreadsheetStateProvider.js has many props marked as required even though they are not.

Hey @iddan 👋

Any idea how difficult it would be to allow a single cell value to be copied and then pasted into multiple (highlighted) cells?

For example:

1. Copy a single cell
2. Highlight a range of cells
3. Paste
4. Have the single cell value pasted into each highlighted cell

If you don't see any immediate issues with implementing this, I will give it a try myself and raise a PR. I guess that this would be a good place for me to start? https://github.com/iddan/react-spreadsheet/blob/master/src/actions.ts#L138

Let's say there is a state like this

this.state = {
    data: [
        [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }], [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]
    ],
    columnLabels: [1,2,3,4],
}

Then I want to update the state like this:

this.setState(({columnLabels}) => {
    columnLabels[0] = 'random value'
    return {columnLabels}
})

The column values do not rerender

Hi, I get this error on the following line

import Spreadsheet from 'react-spreadsheet';

Could not find a declaration file for module 'react-spreadsheet'. 'handRecog/node_modules/react-spreadsheet/dist/SpreadsheetStateProvider.js' implicitly has an 'any' type.
  Try `npm install @types/react-spreadsheet` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-spreadsheet';`ts(7016)

Hi, the component looks great! Does it support TypeScript?
I don't see *.d.ts typings anywhere...

To follow up on #96.

I ran into issues when integrate react-contextmenu into this library.

The issue is so far seems I can only change DataViewer for the cell, but upon rendering, whatever element I returned from my custom DataViewer(which is the place I hook into react-contextmenu) is the inner children of a td element and that seems never trigger the context menu..

I felt the react-contextmenu needs to be hooked at td element level, not its children, but seems react-spreadsheet does not provide a way to change that..

thanks for the help!

not sure if it's supported, but didn't find anything from the readme?

if it's supported, where can I find an example?

Thanks a lot for the help!

Formula updating is buggy with the latest versions of React

Try,
A1 = 2
A2 = =A1 * 2
A3 = =A2 * 2

I am trying to get the "Getting Started" demo working but I am running into a security error.
Please see the attached codesandbox example: https://codesandbox.io/s/flamboyant-hopper-gkh0h

Any ideas on how to fix this?

below Json Structure would be good for table data all tables using like this only please give me suggestion how to do this

{
  "Id": "GridData",
  "Columns": [
    {
      "Key": "Id",
      "Name": "Id",
      "Width": 40,
      "Fixed": true
    },
    {
      "Key": "task",
      "Name": "Title",
      "Width": 100,
      "Fixed": true
    },
    {
      "Key": "priority",
      "Name": "Priority",
      "Width": 125
    },
    {
      "Key": "issueType",
      "Name": "Issue Type",
      "Width": 150
    },
    {
      "Key": "taskInfo",
      "Name": "Task info",
      "Width": 400
    },
    {
      "Key": "complete",
      "Name": "% Complete",
      "Width": 200
    },
    {
      "Key": "startDate",
      "Name": "Start Date",
      "Width": 300
    },
    {
      "Key": "completeDate",
      "Name": "Expected Complete",
      "Width": 300
    },
    {
      "Key": "notes",
      "Name": "Task notes",
      "Width": 300,
      "RightFixed": false
    }
  ],
  "Table::Employee": [
    {
      "Id": 1,
      "priority": "OrangeRed",
      "issueType": "Major",
      "task": "Task 1",
      "complete": 100,
      "taskInfo": "Test",
      "startDate": "Sun May 08 2016 13:59:24 GMT+0530 (IST)",
      "completeDate": "Fri Jun 24 2016 17:54:05 GMT+0530 (IST)",
      "notes": ""
    },
    {
      "Id": 2,
      "priority": "OrangeRed",
      "issueType": "Major",
      "task": "Task 1",
      "complete": 100,
      "taskInfo": "Test",
      "startDate": "Sun May 08 2016 13:59:24 GMT+0530 (IST)",
      "completeDate": "Fri Jun 24 2016 17:54:05 GMT+0530 (IST)",
      "notes": ""
    },
    {
      "Id": 3,
      "priority": "OrangeRed",
      "issueType": "Major",
      "task": "Task 1",
      "complete": 100,
      "taskInfo": "Test",
      "startDate": "Sun May 08 2016 13:59:24 GMT+0530 (IST)",
      "completeDate": "Fri Jun 24 2016 17:54:05 GMT+0530 (IST)",
      "notes": ""
    },
    {
      "Id": 4,
      "priority": "OrangeRed",
      "issueType": "Major",
      "task": "Task 1",
      "complete": 100,
      "taskInfo": "Test",
      "startDate": "Sun May 08 2016 13:59:24 GMT+0530 (IST)",
      "completeDate": "Fri Jun 24 2016 17:54:05 GMT+0530 (IST)",
      "notes": ""
    },
    {
      "Id": 5,
      "priority": "OrangeRed",
      "issueType": "Major",
      "task": "Task 1",
      "complete": 100,
      "taskInfo": "Test",
      "startDate": "Sun May 08 2016 13:59:24 GMT+0530 (IST)",
      "completeDate": "Fri Jun 24 2016 17:54:05 GMT+0530 (IST)",
      "notes": ""
    },
    {
      "Id": 6,
      "priority": "OrangeRed",
      "issueType": "Major",
      "task": "Task 1",
      "complete": 100,
      "taskInfo": "Test",
      "startDate": "Sun May 08 2016 13:59:24 GMT+0530 (IST)",
      "completeDate": "Fri Jun 24 2016 17:54:05 GMT+0530 (IST)",
      "notes": ""
    },
    {
      "Id": 7,
      "priority": "OrangeRed",
      "issueType": "Major",
      "task": "Task 1",
      "complete": 100,
      "taskInfo": "Test",
      "startDate": "Sun May 08 2016 13:59:24 GMT+0530 (IST)",
      "completeDate": "Fri Jun 24 2016 17:54:05 GMT+0530 (IST)",
      "notes": ""
    }
  ]
}

Hello,
I am wanting to style the elements in the table with text-alignment, and other CSS customization.
I tried to pass CSS classes via className and styles but neither worked for me. Any help on how to do this would be great! Thanks!

i need to be able to disable editing, but still allow viewing, including highlighting and selecting the cell content to copy.

Press delete (to clear the value), then hit enter, or move away from the cell. onCellCommit is not called.

Error:

usage:

import React from 'react';
import Spreadsheet from "react-spreadsheet";

class Expenses extends React.Component {
  constructor (props, context) {
    super(props, context);
  
  }
  render () {
    const data = [
  [{ value: "Vanilla" }, { value: "Chocolate" }],
  [{ value: "Strawberry" }, { value: "Cookies" }]
];
    return (
        <Spreadsheet data={data} />
    )
  }
}

export default Expenses;

fix: npm install fbjs --save

The api is rather unfriendly to the user. its also inefficient for use case of custom rendering, as you are duplicating the renders on each row of data

A better api:

1. replace columnLabels with displayRules, which has type as follows:

type DisplayRule = { label: string; key: string; view:DataViewer, edit: DataEditor };

As you can see, rather than creating many references of DataViewer/Editor throughout our data, we can just have it in display rules. you can also use this to change the column order, irrespective of its natural key ordering in javascript.

2. change data to accept Array<any> instead of Matrix<{value:any,DataViewer?:any,DataEditor?:any}>

example what this might look like from a developer perspective:

<Spreadsheet 
    displayRules={[
      { label: 'Name', key: 'name' },
      { label:'Date', key:'date', view: renderDateView, edit: renderDateInput }
      { label: 'Amount', key: 'amount', view: renderAmountView, edit: renderAmountInput  },
    ]}
    data={[
      { name: 'Hank Hill', date:'07-26-2020', amount: 93.50 },
      { name: 'Herbert Farnsworth', date:'07-25-2020', amount: 196.25 },
      { name: 'Bruce Wayne', date:'07-24-2020', amount: 7.36 },
    ]}
  />

Would you be receptive to such a change at all?

DataEditor is set as a property but is not used -- instead the default is always used

Have this error when loading component. Something is wrong when build

I'm using this component on my project and would love to know more about how to use React Spreadsheet, is there any documentation?

Now we can use columnLabels to custom the column labels.
Are there some prop for developer to custom the row label? It is useful for build page like schedule table(datetime as row label).

I noticed that on master branch there are a number of exports from src/index.ts that aren't in the most recent version 0.5.0.

Can you release another version from master with these additional exports?

There are some other exports that I also need (that aren't on master either) which I will include in a PR. FYI the other exports I need are the DataViewer and DataEditor components.

Great library overall though 👍

Copy and Paste functionality doesn't work with other Spreadsheet applications.

Values are copied as comma separated values, instead of tab separated values. This means that copying a set of four cells like this
a``b
c``d
pastes into excel and Google Sheets like this
a, b
c, d.

And values copied from the external applications will not paste into the react-spreadsheet, instead the last thing that was copied locally on react-spreadsheet, not what was copied from an external application. This is true for both Tab separated List and Comma Separated Value on the system clipboard.

How can I configure the cells to be numbers only?

Would be awesome if "Shift+Tab" moved you back a cell the same way the back arrow does

Is there some way to programatically set the cell selection?

Thank you!

Hello, how do I update the status after editing a cell?

I'd like to be able to do:

<Spreadsheet
  data={data}
  rowIndicator={rowNumber => <div> {rowNumber + 1} </div>
/>

or some general arbitrary customization.

I'm happy to PR this!

Would I just add a new prop to Spreadsheet CustomRowIndicator, and then use that component here https://github.com/iddan/react-spreadsheet/blob/master/src/Spreadsheet.js#L274 if defined?

Thanks for such elegant library !

I just have a question though. In my case, i need the header to be grouped or customized with title. Does the library support now or not yet ?

So in place of A,B,C, i want it to be like

Profile Detail                  | Column 1 | Colum 2
First name | Last Name
... row data

Thank your for this excelent spreadsheet in React.

I had two errors in console after compiling in dev mode with React 16.13.1 (created with create-react-app):

Error 1:
`index.js:1 Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: c, r

Learn more about this warning here: https://fb.me/react-legacy-context
in r (created by SpreadsheetStateProvider)
in SpreadsheetStateProvider (at Component.js:104)
in Component (at App.js:100)
in div (at App.js:99)
in article (at App.js:96)
in div (at App.js:95)
in div (at App.js:94)
in div (at App.js:84)
in div (at App.js:83)
in App (at src/index.js:27)
in StrictMode (at src/index.js:26)`

Error 2:
`Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

Please update the following components: c
console. @ index.js:1
`
I would appreciate a solution to this. I really enjoyed this project to be included in a bigger one. Thank you very much.

I've tried to add a Button to a cell using the DataViewer but without success, is there a way to do it?

The coordinates passed to the onCellCommit function are not the coordinates from the committed cell.
Example flow: Editing row: 0, cell: 0, press enter, and the onCellCommit function is called with coordinates row: 1, cell: 0, not row: 0, cell: 0.

Maybe it could be useful to have both coordinates passed to the function, the coordinates for the committed cell and the coordinates for the cell the user has moved to.

I am not sure if this is a concern, could this be validated