React-data-grid: Help with editable grid

[burton666]

Is it possible to get an working example of how to construct the editable table-grid example using the "new" react hooks ?

[partynikko]

Just replace the Class component with a functional component and use the useState hook: https://codesandbox.io/s/rdg-cell-editing-1omwh

[qili26]

Like @partynikko mentioned, here is what you need to do.

1. convert the class component to a functional component by using useState, useImperativehandle (for getInputNode and getValue).
2. use forwardRef to make sure your functional component can be passed a ref from parent component

[dgdosen]

Can you go into a bit more detail on using hooks?

I'm getting an error 'Cannot read property 'length' of undefined' and I'm unsure of the context.

[qili26]

@dgdosen
In what stage did you see the issue? After editing? Upon Grid loading? Upon the editors are opening , etc..?

[dgdosen]

FYI - I'm using typescript and react hooks.
This error is a runtime error when trying to load the initial grid.

I think I'm looking for more detail on using references with getInputNode and getValue - I think I'd be able to understand it better if there was an example that just used hooks and nested functional components.

I can look at the source code, and see that the component is trying to access rows.length - but the API doesn't pass in rows, it passes in a rowGetter...

Further, If I look at a sample in the code (CommonFeatures.tsx) I can see a DataGrid crufted up when passing in rows...

Any ideas?

[dgdosen]

I found my issue - I added types (@types/react-data-grid) to my project separately from react-data-grid - and it had an older api - which made me write code like in the current docs, which isn't similar to the current code.

I removed types from my package, and followed the lead from CommonFeatures.tsx

[dcsan]

@dgdosen thanks for this comment, i had the same issue.