0
230
ViewsHow to Fill Empty Properties in a Table Using Map Method in React
I am trying to make a table using Map Method in React. My table is consisted of div tag, due to difficulty of handling table tag.
So far, I have almost finished making a table shape, but each row has a different quantity of properties.
I would like to fill the table, even if some rows don't have properties. I thought I could map-base on the longest row, but I'm having trouble with it. Is there any way of filling empty properties in a table?
My code:
{refinedData && !isEmpty
? Object.entries(refinedData).map(([key, values]) => (
<S.RowBox key={key}>
<S.CaNameBox>{key}</S.CaNameBox>
<S.Row>
{values.map((item, index) => (
<S.ValueBox key={index}>
<S.ValueTitleBox>
<S.CbNameBox>{item.CB_NAME}</S.CbNameBox>
<S.CbCodeBox>{item.CB_CODE}</S.CbCodeBox>
</S.ValueTitleBox>
<S.Value>{item.value}</S.Value>
</S.ValueBox>
))}
</S.Row>
</S.RowBox>
))
: 'no data'}
·
Juan Pablo Isaza
1 answers
Answer question0
For that you'll need to know the maximum length of any row.
then rather than running a map over values values.map you can map over an array of that length.
Like Array(maxLength).map then get the item :
<S.Row>
{Array(maxLength).map((_, index) => {
const item = values[index]
return (
<S.ValueBox key={index}>
<S.ValueTitleBox>
<S.CbNameBox>{item.CB_NAME}</S.CbNameBox>
<S.CbCodeBox>{item.CB_CODE}</S.CbCodeBox>
</S.ValueTitleBox>
<S.Value>{item.value}</S.Value>
</S.ValueBox>
)})}
</S.Row>
·
Juan Pablo Isaza
Report
Answer question