React Table Responsive
Have you ever think of how to make your table responsive in react environment. Table responsive requires that your table must be able to be responsive when view in all devices. This tutorial requires that you are a react developer , and if you are not you can start from here https://reactjs.org/
So let us begin create a folder and name it ‘component’ and create another folder inside it, name it ‘table’ .In the folder we are going to have our CSS and JavaScript .After that, create two files name them table.js and table.css respectively.
in your table.css, paste below css in it
.table table{
width: 100%;
padding-top: 2em;
border:1px solid #fff;
overflow-x: auto;
overflow-y: hidden;
}
div h2{
display: flex;
justify-content: center;
align-items: center;
padding-top: 1em;
font-size: 2.5rem;
text-transform: capitalize;
letter-spacing: .2em;
transition: cubic-bezier(0.165, 0.84, 0.44, 1);
}
table thead tr th{
border-bottom: 1.5px solid #eee;
padding: 0 1.5em;
font-size: 1.5rem;
}
table tbody tr td{
border-bottom: .1em solid #eee;
background: #fff;
box-shadow: 0 2px 5px #eee;
padding: 1.5em;
}
table tbody tr th{
border-bottom: .1em solid #eee;
background: #fff;
box-shadow: 0 2px 5px #eee;
padding: 1.5em;
}
As we all know that react used to have index.css , in index.css paste below CSS codes:
*{
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, ‘Roboto’, ‘Oxygen’,
‘Ubuntu’, ‘Cantarell’, ‘Fira Sans’, ‘Droid Sans’, ‘Helvetica Neue’,
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, ‘Courier New’,
monospace;
}
html{
scroll-behavior: smooth;
}
.App{
width: 1230px;
min-height: 100vh;
margin: 0 auto;
padding: 0 20px;
box-shadow:0 0 35px #eee ;
}
ul li{
text-decoration: none;
}
@media screen and (min-width:1200px) {
.App{
min-height: 100vh;
min-width: 100vh;
margin: auto;
box-shadow:0 0 35px #eee ;
}
.table table{
overflow-x: visible;
}
}
@media(min-width:1200px){
.App{
min-height: 100vh;
min-width: 100vh;
margin: auto;
box-shadow:0 0 35px #eee ;
}
.table table{
overflow-x: visible;
width: 100%;
}
}
@media(min-width:375px){
.App{
min-height: 100vh;
min-width: 100vh;
margin: auto;
box-shadow:0 0 35px #eee ;
}
}
@media(min-width:320px){
.App{
min-height: 100vh;
min-width: 100vh;
margin: auto;
box-shadow:0 0 35px #eee ;
}
}
/**********table.css*************/
@import url(“component/table/table.css”);
In your table.js we are going to have:
import React from ‘react’
function Table() {
return (
<>
<div>
<h2>Table responsive</h2>
</div>
<div className=”table”>
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<th scope=”column”>1</th>
<td>Busari Mutairu</td>
<td>mtreal62@gmail.com</td>
<td>Road D, House 3</td>
</tr>
<tr>
<th scope=”column”>1</th>
<td>Busari Mutairu</td>
<td>mtreal62@gmail.com</td>
<td>Road D, House 3</td>
</tr>
<tr>
<th scope=”column”>1</th>
<td>Busari Mutairu</td>
<td>mtreal62@gmail.com</td>
<td>Road D, House 3</td>
</tr>
<tr>
<th scope=”column”>1</th>
<td>Busari Mutairu</td>
<td>mtreal62@gmail.com</td>
<td>Road D, House 3</td>
</tr>
</tbody>
</table>
</div>
</>
)
}
export default Table;
In your App.js you can call it like this:
import Table from ‘./component/table/Table’;
function App() {
return (
<div className=”App”>
<Table/>
</div>
);
}
export default App;
if you open the terminal in your root project and type
npm start
after you might have started the server it will automatically open in the browser we are you can view the responsiveness on various devices. If you are using chrome is very easy to view the responsiveness, just right click and click on ‘inspect’ you will see ‘toggle device toolbar’ we are you can view it on various devices.
My name is Busari Mutairu Afolabi.
I am a Laravel PHP and MERN stack developer. I love coding my frontend from scratch
you can follow me on:
twitter:
facebook:https://web.facebook.com/mutairu.busari
LinkedIn:https://www.linkedin.com/in/mutairu-busari-a3789393/