I've been trying to get jQuery datatables to work in a react component. My app doesn't use bootstrap but I want to use it for my tables so I've scoped bootstrap to a class so i can use it in a div without affecting the rest of the application.
I read the following article Integrating React and Datatables — not as hard as advertised, but the article presents a use case that is more basic than I think many jQuery datatables users use. npm datatables doesn't give you access to extensions (search, scroller, button functions, etc), and everything that comes without the extensions is easy enough that you might as well use an existing react table like primereact, react-table, griddle, react-data-grid, reactabular, fixed-data-table, or react-virtualized.
These offer many options but when tested, had at least 1 or more problems that prevented it from being easily adopted and use all the features needed. Some have issues i think I could help fix after I'm more seasoned with react, but I'm not there yet. I've used jQuery datatables in many production environments without any problems. It's a major sticking point moving to react.
So after weeks of searching and testing and trying to work through bugs, I'm back to trying to bring jQuery datatables into my react app. I realize it's not the "react way" but based on the react docs it's possible and there's a proper way to approach it. I don't need it to react with anything outside of its container or div i place it in.
Using the builder is the recommended way to download datatables so you can get your customized components. I'm also downloading rather than using the CDN because this is a local app and needs to work when there is LAN but no WAN access. I'm using create-react-app and I tried to download datatables from here to a folder in my project and had the following problems:
- hot-reload started taking forever (>1min)
- the page itself was moving at a crawl
- extensions didn't seem to be working (could have been locked up?)
How do you use jQuery datatables in a react app while still being able to use the datatables extensions and without killing the hot-reload for create-react-app? Can anyone provide a working example?
Update
Apparently jQuery datatables has made some major updates since the last time I tried to use their builder and now it includes a way to npm install the extensions too. I'll post a github of a working solution if i find one before someone else can update.
Update Here is a github i made of a react version that is partially working and a basic html/js/css version that is fully working. The readme tells what is working and not working. Can anyone show me why this not working properly?
