How can you make a table scrollable in Semantic-UI-React? Using Next.js

Question

I have a wide table, when I use the Grid component and giving it width of 16 on mobile I get a weird result

I will provide a url of my work in process, please ignore the website details, it is not importatnt, the important thing is that every component is responsive in the mobile view except the table which is stretched. Please look at it on mobile and zoom it to understand what I mean:

https://exodia-client-oatx5x9ug.now.sh/

The result I would like to achive is for the table to fit into the mobile view just like the other components and be scrollable (the user will make a right and left swipe motion to see more details).

The perfect result will be like in this website:

https://coingecko.com

you can see that everything is responsive there and that the table is scroll able.

I imagine there is a way to so with Semantic-UI-React by somehow utilizing augmentation

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

 Table as={*some sort of styled div}

But I tried a couple of styled divs without success for example:

style={{overflow: 'auto'}}

score 4 · Answer 1 · edited Jul 06 '20 at 18:25

4

You can create a div container with height and put the table inside.

Css

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

Html

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

edited Jul 06 '20 at 18:25

Community

1
1

answered Aug 06 '19 at 16:33

Daniel Alejandro

545
4
7

This worked for me! Please change "
– kmxr Sep 04 '19 at 14:41
You can also mention directly the specific height of the table which you want to make scrollable like this: `
<--The Table-->
` – Elias Mar 26 '21 at 08:44
2

@kmxr, working with Semantic UI React, it would make sense to use `className` – murphworm Jan 19 '22 at 23:50

How can you make a table scrollable in Semantic-UI-React? Using Next.js

1 Answers1