[英]Create react table dynamically going top to bottom
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: JSX 摘录:
<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.
我试着到处寻找,但每个问题都通过创建一个行组件来解决。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.