React Bootstrap — Responsive Tables and Tabs

Image for post
Image for post
Photo by Raphael Nogueira on Unsplash

React Bootstrap is one version of Bootstrap made for React.

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

In this article, we’ll look at how to add responsive tables and tabs with React Bootstrap.

Responsive

We can add a responsive prop to make the table responsive.

To make it always responsive, we add the prop without a value.

So we can write:

We can also make it responsive on specific breakpoints.

We can set sm , md , lg , or xl to make them responsive on those breakpoints:

With sm , we make the table responsive if the screen is small.

Tabbed Components

We can add a tabbed interface with the Tabs and Tab components.

It can be controlled which means it’s controlled by a state.

Or it can be uncontrolled which means there are no states associated with it.

To add an uncontrolled tab component, we can write:

We have the Tabs component to create the tabbed interface.

Tab is the component for adding each tab.

eventKey is the key for each tab.

title is created for the title of the tab.

disabled makes a tab disabled.

defaultActiveKey is the default event key, which lets us set the default tab.

Controlled Tabs

We can also set the state to control the tabs.

For example, we can write:

to have tabs that are controlled by the key state.

We have the activeKey to set the key of the active tab.

We set which tab is active by setting keyto the eventKey of the tab.

onSelect will let us set key to the eventKey value of the active tab when a tab is clicked.

No Animation

We can disable animation with the transition set to false .

For instance, we can write:

to disable animation with transition set to false .

Conclusion

We can make tables responsive with React Bootstrap.

Also, we can add tabs with the Tabs component.

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