Search code examples
javascriptcssreactjsreact-bootstrapreact-props

React-Bootstrap Table with "responsive" prop doesn't have scrolling in a Vite project

I am having an issue where my React-Bootstrap Table overflows the viewport when the screen size is smaller than it in the x direction. I have made it into a responsive table using the responsive prop. However, the overflow-x: scroll functionality isn't working. How do I get the overflow to work?

I have a standard Typescript Vite project. The only files I have changed are App.tsx to the following:

import { Table } from "react-bootstrap";
import "./App.css";
import "./styles.scss";

function App() {
  return (
    <div>
      <span>Connected Devices:</span>
      <Table
        striped
        bordered
        hover
        responsive
      >
        <thead>
          <tr>
            <th>IP Address</th>
            <th>Protocol</th>
            <th>Duration</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>xxx.xxx.x.xx:xxxxx</td>
            <td> ASCII</td>
            <td>00:00:42</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

export default App;

and I am importing the React-Bootstrap CSS using a styles.scss file:

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";

@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/tables";

@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/toasts";
@import "../node_modules/bootstrap/scss/tooltip";

@import "../node_modules/bootstrap/scss/utilities/api";

The result can be seen below when the screen size is smaller than the width: responsive table at a small screen size

The other 3 option striped, bordered and hover work, just not responsive.

I have noticed that the selector added by this option uses the -webkit-overflow-scrolling property which is now considered invalid.

I am using bootstrap version ^5.3.2 and react-bootstrap ^2.9.0, the latest versions at time of posting.

Solution

  • The issue was to do with the #root element, into which the App component is rendered within main.jsx. There were no restrictions to the #root element's width, so as it is the descendant of the table element there was nothing restricting the tables width.

    To fix the issue I gave the root a width equal to 100vw.

    #root {
  margin: 0 auto;
  padding: 2rem;
  width: 100vw;
}