Create a table with scrollable rows and clickable elements in React

Question

Having this object of events with their participants:

const myData = {
  "event_1": ["1", "2","3"],
  "event_2": ["11", "5","8", "9"],
  "event_3": ["1", "2","5"],
  "event_4": ["1", "2"],
  "event_5": ["6", "7","8"],
  "event_8": ["1", "6","9"]
}

each number represents a participant.

For example, in event_3 there were participating the people with ids 1, 2 and 5.

I want to create a user interface like this:

For each event should exist a row and inside that row to be an element (like a square) for each participant. The squares should be clickable like redirecting to localhost:3000/participant_id.

If there are more elements on the row than the screen can share there should be able to scroll horizontally.

Also, being able to scroll vertically if there are more than a certain number of rows.

I know that it's not a usual question on this website, I would like to know if it's possible to do it (maybe with Material UI or Semantic UI) because I've researched a bit and didn't find something to help me.

Do you have any ideas about how to make something like this in React?

Нова Пейка Истинска · Accepted Answer · 2020-07-18 07:28:30Z

1

I recommend using a library like react-virtualized (or for your purpose I would use the new version react-window). It has a very good documentation and lots of examples for all kinds of projects.

One if the main reasons I suggest it, is because if you have a lot of elements in the scroll container, react-virtualized will optimize the performance by only rendering the elements that are visible to the user, therefore reducing the dom tree size.

One downside that you might face is, if the element's dom tree is very big AND it contains images, it might not run with 60fps, because the library will try to measure the element just in time before the rendering. (It does that so it can wait for the images to load then call a function to measure the element and only then render it).

If you don't want to go for something like that, than I would suggest using the options semantic-ui gives you. Take a look at this example (scrollable table) and also try to use this component to improve performance.

*Note, if you are willing to take the first approach, you're going to have to do some more reading on their docs before experimenting with your own project.

Good luck <3

answered Jul 18, 2020 at 7:28

Нова Пейка Истинска

836 bronze badges

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

2 Comments

Leo Messi Over a year ago

Thanks for the answer. I see that in order to move inside the table one must use the vertical and horizontal nav bars so I guess it's not possible to scoll inside by dragging like it's possible on a tablet or mobile device, right?

Нова Пейка Истинска Over a year ago

I think that is something you can configure with react. Maybe have an on touch event handler that also checks for cursor positions? Idk

Collectives™ on Stack Overflow

Create a table with scrollable rows and clickable elements in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related