iddan / react-spreadsheet Goto Github PK
View Code? Open in Web Editor NEWSimple, customizable yet performant spreadsheet for React
Home Page: https://iddan.github.io/react-spreadsheet
License: MIT License
Simple, customizable yet performant spreadsheet for React
Home Page: https://iddan.github.io/react-spreadsheet
License: MIT License
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!)
a
enter
(Expect to see updated cell view)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);
}}
/>);
}
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
DataEditor is set as a property but is not used -- instead the default is always used
Would be awesome if "Shift+Tab" moved you back a cell the same way the back arrow does
I am not sure if this is a concern, could this be validated
Hello! I seem to have a hard time finding any of that Simple straightforward API documentation?
Some of the questions would be:
How do I define cell formulas on mount? If I pass them in the data prop, it'd just return #VALUE!.
How do I detect cell value changes ?
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!
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
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
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)
Is there some way to programatically set the cell selection?
Thank you!
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?
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": ""
}
]
}
Try,
A1 = 2
A2 = =A1 * 2
A3 = =A2 * 2
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
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!
@iddan is there any update for Performant. I'm so curious about this.
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?
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.
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!
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)
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.
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.
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 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?
Formula updating is buggy with the latest versions of React
maybe with master version of react-spreadsheet?
Hi, the component looks great! Does it support TypeScript?
I don't see *.d.ts typings anywhere...
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.
Hello, how do I update the status after editing a cell?
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
Press delete (to clear the value), then hit enter, or move away from the cell. onCellCommit is not called.
ERROR in ./node_modules/react-spreadsheet/dist/index.mjs 21:0-60
Module not found: Error: Can't resolve 'hot-formula-parser/lib/helper/cell' in '/Users/project/node_modules/react-spreadsheet/dist'
Did you mean 'cell.js'?
BREAKING CHANGE: The request 'hot-formula-parser/lib/helper/cell' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
@ ./frontend/src/components/Upload.tsx 16:0-44 84:40-51 86:40-51
@ ./frontend/src/App.tsx 19:0-41 49:133-139
@ ./frontend/src/index.tsx 3:0-24 9:28-31
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).
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:
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
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
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:
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.
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?
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 ๐
How can I configure the cells to be numbers only?
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!
I want to use this library on my project but I had TS1128 error.
Can I get some help?
react-spreadsheet/src/matrix.js
Line 68 in fadb80d
I'm using this component on my project and would love to know more about how to use React Spreadsheet, is there any documentation?
I've tried to add a Button to a cell using the DataViewer but without success, is there a way to do it?
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 need to be able to disable editing, but still allow viewing, including highlighting and selecting the cell content to copy.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.