Enable scrolling feature for the table

I have integrated a bootstrap table into my React application, but I am facing an issue where the table is not scrollable. Whenever new content is loaded, it increases the height of the table instead of making it scrollable. Below is the code for my table component:

<div className='flex-vertical'>
                <Table className='flags-table' responsive hover>
                    <thead>
                    <tr>
                        <th></th>
                        <th> Time In</th>
                        <th> Time Out</th>
                        <th> Type</th>
                        <th> Category</th>
                    </tr>
                    </thead>
                    <tbody>
                    {
                        that.props.tag_fetch_reducer.tags.map((x, i) => (
                            <tr key={i} onClick={this.handleRowClick.bind(this, i)}>
                                <td>
                                    <div className='red-box'></div>
                                </td>
                                <td> {this.secondsToHms(x.time)} </td>
                                <td> {this.secondsToHms(x.stopTime)} </td>
                                <td> {x.tagname} </td>
                                <td contentEditable="false"> {x.category}</td>
                            </tr>
                        ))
                    }
                    </tbody>
                </Table>

Additionally, here is the Stylus code for the above HTML:

.flex-vertical
    display flex
    flex-direction column
    height 100%

.flags-table
    .red-box
      width 16px
      height 16px
      margin 3px 5px
      background-color red

After following the solution provided in the comments, this is the result I am seeing:

https://i.sstatic.net/6dMiB.png

I made the following modifications to the Stylus code:

.flex-vertical
    display flex
    flex-direction column
    height 100%
Table ,tr td{

}
tbody {
  display:block;
  height:50px;
  overflow:auto;
}
thead, tbody tr {
  display:table;
  width:100%;
  table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
  width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}

https://i.sstatic.net/6dMiB.png

Answer №1

Check out this example utilizing flex: ( http://codepen.io/gc-nomade/pen/zNyOpr )

html,
body,
.flex-vertical {
  height: 100%;
  margin: 0;
}
.flex-vertical {
  display: flex;
  flex-flow: column;
}
.flags-table {
  display: flex;
  flex-flow: column;
  flex: 1;
  overflow: hidden;
}
tbody {
  overflow-y: scroll;
  background: turquoise
}
.red-box {
  width: 16px;
  height: 16px;
  margin: 3px 5px;
  background-color: red;
  margin: auto;
}
thead {
  display: block;
  margin-right: 1.075em;
  flex-shrink: 0;
  background: tomato;
}
tr {
  display: flex;
  width: 100%;
}
th,
td {
  border: 1px solid;
  min-width: 25px;
  display: flex;
}
th ~th,
td ~td {
  display: table-cell;
  flex: 1 1 22%;
  margin: 1px;
  word-wrap: break-word;
}
h1,
footer {
  margin: 1px;
  padding: 5px;
  background: orange
}
<div class='flex-vertical'>
  <h1>test</h1>
  <Table class='flags-table' responsive hover>
    <thead>
      <tr>
        <th></th>
        <th>Time In</th>
        <th>Time Out</th>
        <th>Type</th>
        <th>Category</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class='red-box'></div>
        </td>
        <td>{this.secondsToHms(x.time)}</td>
        <td>{this.secondsToHms(x.stopTime)}</td>
        <td>{x.tagname}</td>
        <td contentEditable="false">{x.category}</td>
      </tr>
      <tr>
        <td>
          <div class='red-box'></div>
        </td>
        <td>{this.secondsToHms(x.time)}</td>
        <td>{this.secondsToHms(x.stopTime)}</td>
        <td>{x.tagname}</td>
        <td contentEditable="false">{x.category}</td>
      </tr>
      <tr>
        <td>
          <div class='red-box'></div>
        </td>
        <td>{this.secondsToHms(x.time)}</td>
        <td>{this.secondsToHms(x.stopTime)}</td>
        <td>{x.tagname}</td>
        <td contentEditable="false">{x.category}</td>
      </tr>
      <!-- More rows go here -->
    </tbody>
  </Table>
  <footer>
    footer
    </footer

Take a look at the following for inspiration: How to set tbody height with overflow scroll and How can I make my flexbox layout take 100% vertical space?


edit

If you are using the flex version of bootstrap, you can also utilize classes like this:

html,
body,
.flex-vertical {
  display:flex;
  flex-direction:column;
  height: 100%;
}

.flags-table {
  flex: 1;
  overflow: hidden;
}
tbody {
  flex:1;
  overflow-y: scroll;
  background: turquoise
}
.red-box {
  width: 16px;
  height: 16px;
  margin: 3px 5px;
  background-color: red;
  margin: auto;
}
thead {
  display: block;
  margin-right: 1.075em;
  flex-shrink: 0;
  background: tomato;
}
tr {
  width: 100%;
}
th,
td {
  border: 1px solid;
  min-width: 25px;
  display: flex;
}
th ~th,
td ~td {
  display: table-cell;
  flex: 1 1 22%;
  margin: 1px;
  word-wrap: break-word;
}
h1,
footer {
  margin: 1px;
  padding: 5px;
  background: orange
}
<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class='flex-vertical'>
  <h1>test</h1>
  <Table class='flags-table flex-vertical' responsive hover>
    <thead>
      <tr class="d-flex">
        <th></th>
        <th>Time In</th>
        <th>Time Out</th>
        <th>Type</th>
        <th>Category</th>
      </tr>
    </thead>
    <tbody>
      <tr class="d-flex">
        <td>
          <div class='red-box'></div>
        </td>
        <td>{this.secondsToHms(x.time)}</td>
        <td>{this.secondsToHms(x.stopTime)}</td>
        <td>{x.tagname}</td>
        <td contentEditable="false">{x.category}</td>
      </tr>
      <!-- Additional rows can be added here -->
    </tbody>
  </Table>
  <footer>
    footer
    </footer

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Troubleshooting a case where mongoDB's updateOne function is

I am in the process of removing certain references to objects within different sections (section1, section2, section3, others) in each file. Sample Document: { "_id": "64a3268474aa29e72b40c521", "name": "Test", ...

Error: Unable to locate module - Invalid generator instance detected. The Asset Modules Plugin has been started with a generator object that does not adhere to the API standards

Encountering an issue in nextjs when utilizing the 'asset/inline' Asset Module Type within a custom webpack configuration while running yarn dev. I attempted to utilize the 'asset/inline' asset module type to output the URI of the impor ...

I am looking to halt the AJAX requests within an asynchronous function after reaching a limit of 10 requests

I've been working on an async function that sends AJAX requests based on the previous response. The function is functioning properly, but it's sending multiple requests in quick succession. I need to implement a 5-second interval between each req ...

The navigation bar on the website highlights vibrant green arrows next to the

I'm having trouble implementing a bootstrap menu on my website using the code provided by Bootstrap. The menu is not displaying correctly and instead showing small green UL arrows. I have JavaScript and Bootstrap scripts in my project. Is there a way ...

Is there a way to modify the domain of an iFrame's scr based on the parent window's URL?

Is there a way to dynamically change the scr="" attribute of an iFrame based on the current URL of the window? The goal is to have different values for the scr attribute depending on the parent window's URL. For example, if the parent window's UR ...

Allow JavaScript to determine whether to link to an internal or external web address

Currently, I am in the process of setting up a new website and need to create an HTML page with some JavaScript that can determine whether to link to the external or internal IP address. I have researched some JavaScript code to fetch the IP address, whic ...

A Guide on Integrating a Javascript Reference into HTML while Displaying a PHP Object

Our website relies heavily on PHP modules to generate objects that are essential for constructing our web pages. Some of the key modules we have include: Anchor (ahref) Button CheckBox ComboBox DateTime Email Label Note Password Phone RadioButton RichTe ...

Button-triggered MUI autocomplete feature

I am currently working on an application that requires a selection menu to appear when a button is clicked. Here's a snippet of what I have in mind: import React from "react"; import AutoComplete from "@mui/material/Autocomplete"; ...

I am facing an issue with the routing functionality in the Quasar framework for Vue 3

I seem to be having an issue with my code where no matter what route I give, it only takes me to the home page. Specifically, when I give the path "auth", it still redirects me to the home page. Can someone please help me understand why this is happening a ...

CSS styling doesn't take effect until the page is reloaded due to the failure of cssText

After generating a new list item, it appears that the CSS styling is not being inherited until the page is reloaded. Even though I have added styling using cssText dynamically, it doesn't seem to be working as expected. I've attempted using cssT ...

What is the process of connecting JSON keys to one another?

I am currently brainstorming a solution to link two distinct JSON formats with their respective keys. Here are the two formats: { "price": [ 511, 499, 419, 312 ], "paid": "OK", "contract": "year", "begindate": "01/01/2018", " ...

The Mongoose findOneAndUpdate method will only return the newly added document when using the $push

Provided here is a structured representation of my "profile" collection: { _id : ObjectId("2bb0fad110"), name : "Tommy", defaultrates : [ {_id : ObjectId("444cbcfd52"), rate : 35.0, raisedOn : "5/2/2009"}, {_ ...

Achieving a full width vertical navigation on the left side using Bootstrap's grid system: a step-by

I am looking to design an admin panel using bootstrap. To start off, I want to create a navigation menu on the left side. However, I encountered an issue where my navigation menu with a red background does not stretch the full width of the left column. Her ...

Error: The function res.json is not recognized. Despite searching through related inquiries, I cannot find a solution to my specific issue

Struggling to find a solution and avoiding repetitive questions, I am facing an issue with my bug tracker. After submitting the form and sending it to the server side, the bug is created in the database. However, when I save the bug using await bug.save() ...

Is it possible to generate a "pop-up" window upon clicking on the register button?

As a backend programmer, I'm looking to create a popup window that appears in front of the current window when users click "register", eliminating the need for redirection to another page. I believe you understand the concept. How can I achieve this? ...

Can someone explain the distinction between 'return item' and 'return true' when it comes to JavaScript array methods?

Forgive me for any errors in my query, as I am not very experienced in asking questions. I have encountered the following two scenarios :- const comment = comments.find(function (comment) { if (comment.id === 823423) { return t ...

Create HTML content from a file retrieved from the server

I have been working on a dynamic website project, diving into web development from scratch despite having coding experience in general. As I navigate Angular CLI and Bootstrap, I've come across a fundamental question: Do modern websites house all thei ...

What is the best way to display the remaining items in an array when a user clicks the next button?

Having a total of 12 cameras, I want to be able to select 4 cameras from a drop-down menu option and have only those 4 cameras displayed. Then, when I click on the next button, I need to show the remaining cameras in the selected layout format. How can thi ...

Exploring the capabilities of Redux Toolkit's createEntityAdapter in designing versatile data grids

Seeking guidance on utilizing createEntityAdapter from Redux Toolkit. In my application, I display package information and details using the master/detail feature of the AG Grid library. Packages are loaded initially, followed by fetching detailed data as ...

Encountering the error message "Unable to instantiate User: constructor not found" while testing API functionality for

Currently, I am in the process of integrating my backend with MongoDB ATLAS. In order to achieve this, I am utilizing express, mongoose, and node.js for testing purposes. Specifically, I am focusing on testing my API routes, such as adding a user. Below i ...