DataTables React Component with Editor

mariofox

Hi All.

Very excited to see we have an official DataTables react component now. It looks great!

https://datatables.net/manual/react

My question is: Can I use DataTables editor on a table created with DT React Component? I'm asking because Editor relies on the DOM structure of the Table, and seems the React Component is designed to be reactive when the data changes, the Table can be re-rendered, so I'm not sure if DT Editor is aware of this changes. Also, since Editor also changes the DOM of the table (editing, creating, removing elements), it seems it would cause conflict with React.

allan

Can I use DataTables editor on a table created with DT React Component?

Yes. Editor can be imported and justed without any special considerations. It doesn't need to be registered as a component or put into JSX. Editor doesn't "exist" inside the DOM of the DataTable, so there should be no issue with the DataTable rerendering.

That's the idea at least, and it seems to work okay for me in the testing I've done, but if you do run into any issues, let me know and I'll get it resolved. As you've seen the React component is fairly new, so there might still be some stuff I've missed.

Allan

mariofox

Thank you for your answer.

The thing is: Normally, Editor retrieves de data with ajax option from an API endpoint, like:

https://editor.datatables.net/examples/simple/simple.html

But with the DT React component, we are passing the data to DT via React state. Since Editor changes the data (state), should I override the ajax method in Editor so it updates the React state and the table is re-rendered with the new/modified data (state)? Like shown here:

https://editor.datatables.net/examples/advanced/localstorage.html

I hope I'm clear

allan

Oh I see! To be perfectly honest, I hadn't tried that - I'd been thinking of the Ajax submit rather than something like a React state update. For such a case I'm reasonable sure that ajax would need to be used as a function and the relevent state update functions called. I'll give that a try though.

Allan