Building a Horizontally Scrollable Table in React.js & Bootstrap 5

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;

Table with a smaller dataset (5 x 5 grid)

// 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.

BigCodeNerd

Building a Horizontally Scrollable Table in React.js & Bootstrap 5

Leave a Reply Cancel reply