0
232
VistasCómo llenar propiedades vacías en una tabla usando el método de mapa en React
Estoy tratando de hacer una tabla usando Map Method en React. Mi tabla consta de una div tag , debido a la dificultad de manejar table tag . Hasta ahora, casi he terminado de hacer una forma de tabla, pero cada fila tiene una cantidad diferente de propiedades.
Me gustaría llenar la tabla, incluso si algunas filas no tienen propiedades. Pensé que podría basarme en el mapa en la fila más larga, pero tengo problemas con eso. ¿Hay alguna forma de llenar propiedades vacías en una tabla?
Mi código:
{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 Respuestas
Responde la pregunta0
Para eso, necesitará saber la longitud máxima de cualquier fila. luego, en lugar de ejecutar un mapa sobre valores values.map , puede mapear sobre una matriz de esa longitud. Me gusta Array(maxLength).map luego obtenga el elemento:
<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
Denunciar
Responde la pregunta