Create react table dynamically going top to bottom

Question

PROBLEM: I am attempting to create a table component that maps column-wise. All the previous questions I am finding maps row which I cannot do considering how the data is formatted. I am adding an example of data and "turnaround" I did.

data:

{
"Title": "The Avengers",
"Year": "2012",
"imdbID": "tt0848228",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BNDYxNjQyMjAtNTdiOS00NGYwLWFmNTAtNThmYjU5ZGI2YTI1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX300.jpg"
},
{
"Title": "Avengers: Infinity War",
"Year": "2018",
"imdbID": "tt4154756",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BMjMxNjY2MDU1OV5BMl5BanBnXkFtZTgwNzY1MTUwNTM@._V1_SX300.jpg"
},
{
"Title": "Avengers: Endgame",
"Year": "2019",
"imdbID": "tt4154796",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_SX300.jpg"
},
{
"Title": "Avengers: Age of Ultron",
"Year": "2015",
"imdbID": "tt2395427",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BMTM4OGJmNWMtOTM4Ni00NTE3LTg3MDItZmQxYjc4N2JhNmUxXkEyXkFqcGdeQXVyNTgzMDMzMTg@._V1_SX300.jpg"
},
{
"Title": "The Avengers",
"Year": "1998",
"imdbID": "tt0118661",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BYWE1NTdjOWQtYTQ2Ny00Nzc5LWExYzMtNmRlOThmOTE2N2I4XkEyXkFqcGdeQXVyNjUwNzk3NDc@._V1_SX300.jpg"
},
{
"Title": "The Avengers: Earth's Mightiest Heroes",
"Year": "2010–2012",
"imdbID": "tt1626038",
"Type": "series",
"Poster": "https://m.media-amazon.com/images/M/MV5BYzA4ZjVhYzctZmI0NC00ZmIxLWFmYTgtOGIxMDYxODhmMGQ2XkEyXkFqcGdeQXVyNjExODE1MDc@._V1_SX300.jpg"
},
{
"Title": "Ultimate Avengers: The Movie",
"Year": "2006",
"imdbID": "tt0491703",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BMTYyMjk0NTMwMl5BMl5BanBnXkFtZTgwNzY0NjAwNzE@._V1_SX300.jpg"
},
{
"Title": "Ultimate Avengers II",
"Year": "2006",
"imdbID": "tt0803093",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BZjI3MTI5ZTYtZmNmNy00OGZmLTlhNWMtNjZiYmYzNDhlOGRkL2ltYWdlL2ltYWdlXkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"
},
{
"Title": "The Avengers",
"Year": "1961–1969",
"imdbID": "tt0054518",
"Type": "series",
"Poster": "https://m.media-amazon.com/images/M/MV5BZWQwZTdjMDUtNTY1YS00MDI0LWFkNjYtZDA4MDdmZjdlMDRlXkEyXkFqcGdeQXVyNjUwNzk3NDc@._V1_SX300.jpg"
},
{
"Title": "Avengers Assemble",
"Year": "2013–2019",
"imdbID": "tt2455546",
"Type": "series",
"Poster": "https://m.media-amazon.com/images/M/MV5BMTY0NTUyMDQwOV5BMl5BanBnXkFtZTgwNjAwMTA0MDE@._V1_SX300.jpg"
}

JSX Excerpt:

     <div style={{ display: "flex", flexDirection: "row" }}>
        <div style={{ marginRight: "15px", listStyleType: "none" }}>
          <li>{db.year}</li>
          <li>{db.Title}</li>
          <li>{db.Type}</li>
        </div>
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            listStyleType: "none",
          }}
        >
          {map.map((mapa) => (
            <div
              key={mapa.imdbID}
              style={{
                display: "flex",
                flexDirection: "column",
                marginRight: "15px",
              }}
            >
              <li>{mapa.Year}</li>
              <li>{mapa.Title}</li>
              <li>{mapa.Type}</li>
            </div>
          ))}
        </div>
      </div>

QUESTION: While this works just fine as I want, the issue of row overflow comes. As provided in the picture below, you can see Title row data values are overflowing to the next row. I can change the font size dynamically and spread out data to avoid this but that doesn't seem to be a solution rather than "turnaround". What I am hoping to achieve from asking this question is a better way. I tried looking everywhere but every question solves by creating a row component.

Image:

Mehran Mahmoudkhani · Answer 1 · 2021-04-05T07:57:53.437

0

I think you need to change some of the values. checkout this link to find out how to have a table with a scroll

edited Apr 05 '21 at 07:57

answered Apr 05 '21 at 07:51

Mehran Mahmoudkhani

406
6
20

score 0 · Answer 2 · edited Apr 05 '21 at 09:00

0

I did an example in codesandbox. To get text wrap, you need to give style:

<td style={{ display: "flex", width: "xxx" }}></td>

for the row component for each cell. Yes you can't avoid using <tr /> <td /> <th />

edited Apr 05 '21 at 09:00

Dharman

30,962
25
85
135

answered Apr 05 '21 at 08:54

Lance

35
1
9

I did this but the objective is to map column wise, the code you're referring maps in rows. This is where I am confused. – ashish bajaj Apr 05 '21 at 09:56
Avoiding table html is not an issue. I can achieve the same if I map with
element and display flex, flexDirection column. Doesn't solve the reusable issue.

ashish bajaj

Apr 05 '21 at 09:59

Create react table dynamically going top to bottom

2 Answers2