Here’s an example of a horizontally Scrollable table in React.js and Bootstrap. For this example, we will not be using any other third-party library or utility except for Bootstrap 5. Since we are just focused on the table, the data I’m using to show in the table is just a set of random numbers between 0-9999
.
Just like the ritual with a typical React.js project, we will start with initializing the project and installing the app using create-react-app
.
1. Go to your projects folder and run the following commands to initiate a react project and install the required dependencies which are just bootstrap
and react-bootstrap
packages.
npx create-react-app hrz_scroll_bootstrap_table;
cd hrz_scroll_bootstrap_table;
npm install --save [email protected] react-bootstrap
2. These commands will create a new react app project in the hrz_scroll_bootstrap_table
folder on your PC. You can run it locally using the npm start
command.
3. By default, you will probably see some unnecessary files like a service-worker and some other components. You can safely remove them. Just keep App.css,
App.js
, index.js
. Remove other js
files from the project.
4. The content of the relevant files should be as follows:
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
/* index.css */
body {
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;
}
// App.jsx
import { Container } from 'react-bootstrap';
import './App.css';
import ScrollableTable from './Components/ScrollableTable';
function App () {
const rows = 5;
const cols = 5;
return (
<Container className="App d-flex justify-content-center align-items-center" fluid>
<ScrollableTable rows={rows} cols={cols} />
</Container>
)
}
export default App;
/* App.css */
.App {
text-align: center;
min-height: 80vh;
}
.main-card {
max-width: '800px';
max-height: '540px';
overflow-x: 'auto';
overflow-y: 'auto';
}
// src/Components/ScrollableTable/index.jsx;
import { Card, Table } from "react-bootstrap";
import { getRandomNumber } from "../../utils";
const ScrollableTable = ({ rows, cols }) => {
return (
<Card body className="main-card shadow-sm">
<Table striped bordered hover responsive className="mb-0">
<thead className="table-dark">
<tr>
{[...new Array(cols)].map((_, i) => {
const name = `col_${i}`;
return (
<th key={name} className="text-uppercase">
{name}
</th>
);
})}
</tr>
</thead>
{[...new Array(rows)].map(() => {
return (
<tbody key={getRandomNumber()}>
<tr>
{[...new Array(cols)].map((_, i) => {
const value = getRandomNumber();
return <td key={`${value}_${i}`}>{value}</td>;
})}
</tr>
</tbody>
);
})}
</Table>
</Card>
);
};
export default ScrollableTable;

// package.json
{
"name": "hrz_scroll_bootstrap_table",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "5.1.3",
"react": "17.0.2",
"react-bootstrap": "1.5.1",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

You can adjust the count of rows and columns in this table by changing their values in the App.jsx
file.
One thing you should note. To keep things simple, I have added the key field with the same value as the value inside a cell. In the case of a larger table, this will suffer from clashing keys, and React will complain about this.
You can preview and edit the code live at code sandbox.
Leave a Reply