Implementing tables using reactjs

I basically came up with this post to show you that maybe you don't need to install any library when implementing a "simple" table.

The goal is to consume data from somewhere, and populate a table to display the information to the user as fast as you can.

Sometimes you can think of using a library because of the features it might offer, but in 95% of the cases you are going to be using only the sort function, here some of my pros and cons : )

Cons

Performance issues.

• Some lib's perform unnecessary array maps in order to make easier to use and works in a dynamic way
• Some of them don't even use tables, they calculate columns and rows and convert to "div's".
• Wasting time to read the library documents, most of the times looking for flags to disable some unexpected behaviours or learning how to use a "table".
• Complexity to customise layout and bad UI experience.

Pros

Maybe you might want to test a different feature.

Really I don't see much here, even for a MVP purpose, I would go without any library.

Here are some examples that I've implemented, hope one of them fit's your needs, or at least a simple start.

Tables

Simple

Pagination

Row selection

Sorting

Sticky column

Static next.js

Feel free to use any of the examples and build your own component with the needs of your project.