Reactstrap — Tables

Image for post
Image for post
Photo by Abel Y Costa on Unsplash

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add tables with Reactstrap.

Tables

Reactstrap comes with its own table component.

For instance, we can use it by writing:

We just add the Table component and use the usual table elements inside it to create our table.

By default, it’ll have a bottom border.

Dark Table

We can make the background dark with the dark prop.

For instance, we can write:

Striped Rows

We can make the rows striped with the striped prop:

Bordered Table

We can add borders to the cells with the bordered prop:

Borderless Table

We can make the cells borderless with the borderless prop:

Hoverable Rows

The rows can be made hoverable with the hover prop:

Small Table

To make the rows smaller, we can set the size prop to sm :

Responsive Table

We can make a table responsive with the responsive prop:

Now it’ll display properly on any screen.

Image for post
Image for post
Photo by Sonnie Hiles on Unsplash

Conclusion

Reactstrap provides us with a simple Table component to display tables.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store