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'}}

Community · Accepted Answer · 2020-07-06 18:25:21Z

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 6, 2020 at 18:25

CommunityBot

11 silver badge

answered Aug 6, 2019 at 16:33

Daniel Alejandro

6956 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kmxr Over a year ago

This worked for me! Please change "<div className=" to "<div class="

Elias Over a year ago

You can also mention directly the specific height of the table which you want to make scrollable like this: <div style="height:500px;overflow:auto"> <--The Table--> </div>

murphworm Over a year ago

@kmxr, working with Semantic UI React, it would make sense to use className

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related