Is it possible to enable table scrolling within Semantic-UI-React by utilizing Next.js?

My issue involves a wide table in the Grid component with a width of 16 on mobile resulting in strange behavior.

If you view my work in progress at the following URL, you'll notice that every component is responsive on mobile except for the stretched table. Take a look on your phone and zoom in to see what I mean:

I'm aiming for the table to fit into the mobile view like the other components and be scrollable (users can swipe right and left for more details).

Check out this website for an example of the desired result:

On that site, everything is responsive, and the table is scrollable.

I think there might be a way to achieve this using Semantic-UI-React through some sort of augmentation:

 import { Table } from "semantic-ui-react";

Table as={*some sort of styled div}

I've experimented with a few styled divs without success, such as:

style={{overflow: 'auto'}}
cssreactjsresponsive-designsemantic-uisemantic-ui-react

Answer №1

To create a container with specified height, simply place the table inside a div and apply the following styles:

CSS

.container__table {
  height: 290px;
  overflow-y: scroll;  /* or auto */
}

HTML

<div className="container__table">                                        
     <--- your table --->
</div>

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

Experiencing a repetitive occurrence of the error: "SyntaxError: Encountered an invalid or unfore

I've encountered a persistent error when attempting to execute my index.mjs file. Here is the content of my index.mjs file: import WebSocket, { WebSocketServer } from "ws"; import http from "http"; import express from 'express ...

reactjsnode.jsbabeljses6-modules

When I try to pass a variable as a prop to another .js file, it mysteriously transforms into an undefined value

Upon successful login, my app file sets the isAuthenticated variable to true and redirects to the /admin page. The Firebase API call is functioning as expected, allowing access only with a valid username and password. The issue arises when I try to hide t ...

javascriptreactjs

Swapping IMG depending on breakpoint in Material-UI

I understand how to adjust styling with breakpoints for various properties like height, width, and font size. However, I am struggling to find examples of switching images based on screen sizes. My goal is to replace an image with a different one dependin ...

cssreactjsmaterial-uiresponsive-images

What is the best way to display an entire string in a DataGridPro cell without truncating it with an ellipsis?

After reviewing all of the available DataGrid documentation, I am still unable to find a solution for displaying strings in multiple lines within a cell without ellipses. The current behavior is as follows: https://i.stack.imgur.com/TO8vB.png What I am a ...

javascriptreactjsmaterial-uidatagrid

What could be the reason for my user input not being captured and saved as variable data on the HTML webpage?

Here is the code I am working with: var g = document.getElementById("al").value; function start() { document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g); } <p id="test2">Output will be displayed here:</p> <form> ...

javascripthtmlcss

React app malfunctioning following a recent installation

I have been running a React SSR (Node and MongoDB backend) application smoothly for more than a year. Throughout this time, I have regularly updated the application without any issues. The application was functioning well with Node 13.8.0 until I decided t ...

node.jsreactjsnpmwebpackupgrade

React Typescript: The specified argument type cannot be assigned to the parameter type

Creating a Check Box Button React component has resulted in an error related to setRSelected(1) and setRSelected(2)... const [cSelected, setCSelected] = useState([]); const [rSelected, setRSelected] = useState(); const onCheckboxBtnClick = (selected ...

reactjstypescriptcomponents

Designing a webpage compatible across different browsers that features an image positioned relatively over two rows of a table

I am working on creating a unique table layout for a web page that resembles the design linked below: Click here to view the image http://kelostrada.pl/upload/test.png Your assistance in achieving this would be greatly appreciated. Currently, I have imp ...

htmlcsscross-browserhtml-table

Error encountered while deploying NodeJS application on Heroku platform

I encountered some errors while trying to deploy my project to herokuapp: 2018-07-27T08:27:30.827410+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/robots.txt" host=ihealth99.herokuapp.com request_id=54687736-9467-4484-93d6 ...

node.jsreactjsheroku

Splitting the page into four sections with a unique H layout using CSS styling

Attempting to create an H page layout: body { background-color: grey; background-size: 100%; background-repeat: no-repeat; } html, body { height: 100%; margin: 0px; } .a { float: left; width: 25%; height: 100%; border: 1px solid blue ...

htmlcssflexboxcss-float

Encountering a 500 Internal Server Error when deploying a Next.js application with MongoDB and Mongoose on Vercel

My application is functioning properly on localhost. However, when I deploy it to Vercel through GitHub, I encounter errors. The building logs show the following: Cloning github.com/sayinmehmet47/electronic-products47 (Branch: main, Commit: 2ae970b) Cloni ...

reactjsmongodbnext.jsvercel

Merge the variables extracted from an array of objects

I need to extract specific data from an array of objects and perform a calculation. For example, the provided data is as follows: const item = [{ "act": "Q", "line": 1, &quo ...

javascriptreactjstypescriptreact-native

The customization of jQuery UI Slider is failing to function as expected

In my quest to create a customized jQuery slider, I encountered the need to change the background of the slider handle. After experimenting with some code on this link, I am still unable to achieve the desired effect. Following the documentation, I have a ...

jqueryhtmlcssjquery-uiuislider

Experiencing a compatibility issue in React while attempting to integrate Material-UI (MUI

Working on a react project, I decided to incorporate MUI and MUI icons by using npm install @mui/material and npm install @mui/icons-material. After importing the SearchIcon, however, an error message appears on my react page: ./node_modules/@mui/styled- ...

node.jsreactjsmaterial-ui

Angular Space-Friendly Table

After attempting to code the sample in Angular, I realized it wasn't what I was looking for. <table> <th >Number</th> <th >Merchant Name</th> ...

htmlcssangular

Dynamically change the state based on intricate layers of objects and arrays

Here is the issue I am facing I am attempting to update the state of an object named singleCarers I have the index of the roster in the rosters array that I need to update However, the key monday: needs to be dynamic, as well as the keys start: and fini ...

javascriptreactjsstate

How long does it typically take to build a ReactJS application with a Gatsby theme?

I'm currently working on a ReactJS application using a gatsby-theme, but the build time is taking over 6 minutes. Is this typical for this type of application? If not, what can I do to improve and optimize the build time for my gatsby-theme project? ...

reactjsgatsby

Styling a modal popup using session storage in CSS

I recently created a modal popup using CSS by following a helpful tutorial that can be found at this link: Now, I am curious about how to store the value entered in a textbox as session data. I came across some code in another tutorial that demonstrated h ...

javascripthtmlcss

Ways to insert additional panels prior to and after a selected panel

A button is provided in the report designer detail band that, when clicked, should add new panels immediately before and after the detail panel. $parentpanel = $this.parents(".designer-panel:first"); This code snippet is used to locate the parent panel u ...

javascriptjqueryhtmlcss

Steps for Disabling col-sm and col-xs in Bootstrap 3

Hey there! I'm currently working on a template using Bootstrap 3. Initially, I planned to make it responsive for all devices, but I have since changed my mind and decided that the template is already complete. I've utilized col-md in each row, h ...

jqueryhtmlcsstwitter-bootstrap