Search code examples
javascriptreactjsmaterial-uisemantic-ui

Create a table with scrollable rows and clickable elements in React

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:

enter image description here

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?

Solution

  • 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