Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Datables in React

This is a basic example of how to implement datatables from (from Spry Media) in React, it doesn't include plugins or extensions. It is not ported from jquery, however it works great in react apps in all my testing. I have also included an external search bar to show how you can access the datables API from the parent component.

I realise that using jquery in react is a no no, but if you make sure react is unaware of the dom changes happening with datatables it should work fine. This is done by using react's own recommnded approach of render() { return <table ref={(el) => (this.el = el)} />; } which renders an 'empty' table as far as react knows. Therefore it will not try to rerender it ever, giving the jquery within datatables free reign to manipulate the dom.

I may try to make this into an npm component in the future but for now it is just an example you can clone to see how it's done.

If someone is willing to port it from jquery that would be great! Please fork away.

There are quite a lot of configuration options with datatables please refer to the documentation.


React implementation of Datatables (



No releases published


No packages published