Tengo una matriz de objetos como salida de API como se muestra a continuación:
var x = [{ name: "test", group: [{ name: "rating", value: "55" }] }, { name: "test1", group: [{ name: "rating", value: "20" }] }, { name: "test2", group: [{ name: "rating", value: "60" }] }, { name: "test3", group: [{ name: "rating", value: "10" }] } ] <table> <tr> <td>test</td> <td>test1</td> <td>test2</td> <td>test3</td> </tr> </table> Estoy tratando de cambiar el color de todas las filas de la tabla a verde según el valor del objeto x.group[0].value mayor que 30. ¿Alguna idea de cómo puedo lograr esto? Estoy tratando de agrupar las matrices con valores superiores a 30, pero no estoy seguro de cómo puedo cambiar el color en función de eso.
for (var i = 0; i < x.length; i++) { x[i].group[0].value }Nota: estoy usando ReactJS. Creé un componente de tabla como este . No estoy seguro de poder cambiar mucho HTML
Puede usar una condición para determinar si x.group[0].value es mayor que 30 o no
<table> <tr style={{backgroundColor: !!(x.group[0].value > 30) ? 'green': 'red'}}>test</tr> <tr style={{backgroundColor: !!(x.group[0].value > 30) ? 'green': 'red'}}>test1</tr> <tr style={{backgroundColor: !!(x.group[0].value > 30) ? 'green': 'red'}}>test2</tr> <tr style={{backgroundColor: !!(x.group[0].value > 30) ? 'green': 'red'}}>test3</tr> </table> Agregando esta línea style={{ backgroundColor: !!true ? "green" : "red" }} a la línea 101 dentro de la etiqueta en su ejemplo de código hace que las filas de la tabla sean verdes. Cambie la condición para usar su valor, y sería verde/ su color dependiendo de la condición
Puede utilizar la biblioteca clsx con la que puede proporcionar varios className de forma condicional.
<tr className={clsx({ defaultClass: true, tableGreen: x.group[0].value > 30, // other conditional classes })} > ... </tr> En tus styles.css
.defaultClass { padding: 5px; } .tableGreen { backgroundColor: #00ff00; } Para que funcione con react-table deberá modificar la estructura de la matriz.
function transform(y) { return y.map((i) => ({ name: i.name, ...i.group.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.value }), {}), })); }Te dará una salida como esta
[ { "name": "test", "rating": "55" }, { "name": "test1", "rating": "20" }, { "name": "test2", "rating": "60" }, { "name": "test3", "rating": "10" } ] Al comparar, asegúrese de convertir la rating en un tipo de number usando parseInt . Eventualmente en el componente Table como en el ejemplo que proporcionó.
<tbody {...getTableBodyProps()}> {page.map((row, i) => { prepareRow(row); return ( <tr {...row.getRowProps()} className={clsx({ defaultClass: true, tableGreen: parseInt(row.original.rating) > 30, // other conditional classes })} > {row.cells.map((cell) => { return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>; })} </tr> ); })} </tbody>