DEV Community

Cover image for Simple React DataTable
Hugo Sandoval
Hugo Sandoval

Posted on • Edited on

Simple React DataTable

Hi everyone, this time I want to show you a simple component that I made in React JS to visualize and manage your data in a table.

It's inspired in the popular JQuery library DataTables

Features

The next are the features that I added so far.

  • Set title of columns.
  • Set rows per page.
  • Filter the data.
  • Pagination control.
  • On row click callback.

Now I have a developer blog, continue reading this post here: https://hhsm95.dev/blog/simple-react-datatable/

Thank you!

Top comments (4)

Collapse
 
redefinitionof profile image
redefinitionof

When after an update the number of records in data changes, the pagination element becomes an invalid range (end number of items might be negative for example). I worked around this by always removing the table before an update and after a timeout of 0.5 seconds showing the table again.

Collapse
 
makingsoftware profile image
making-software • Edited

I want to add 2 buttons in 1 column in data table. Please i need your help. I also wanted to comment, I have a problem when I try to add styles to a column, the filter stops working.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.