ACTUALIZACIÓN: Aquí hay una caja de arena para mi código. Y estoy buscando terminar con algo como esto.

Tengo una tabla de arranque con estas columnas: nombre, fecha de vencimiento, semáforo. El valor de la columna del semáforo se basa en la fecha de la columna expDate. Si la fecha de caducidad está dentro de los 7 días de hoy, es rojo, entre 7 y 21 días es amarillo y, de lo contrario, verde, consulte la lógica a continuación. Si todo lo que quiero es mostrar las palabras, rojo, amarillo, verde, funciona bien. La parte en la que me estoy atascando es que quiero mostrar un 'semáforo', un círculo/botón rojo, amarillo o verde en la columna. Tengo un CSS que funciona, pero no sé cómo aplicar un formato personalizado a una celda específica. Cualquier ayuda es apreciada.

 <BootstrapTable keyField="street" columns={columns} data={rows} hover rowEvents={tableRowEvents} bordered={true} rowStyle={rowStyle} /> const Stoplight = (daysToExpDate) => { if (daysToExpDate <= 7) { return "Red"; } else if (daysToExpDate > 30) { return "Green"; } else { return "Yellow"; } };

Y aquí está mi css rudimentario que funciona solo pero no en la tabla.

 .redlight { border-radius: 50%; color: red; background-color: red; } .greenlight { border-radius: 50%; color: green; background-color: green; } .yellowlight { border-radius: 50%; color: yellow; background-color: yellow; }

Este estilo de fila resalta toda la fila, no solo la celda en cuestión.

 const rowStyle = (row, rowIndex) => { const style = {}; if (row.stoplight === "Red") { style.backgroundColor = "Red"; } else if (row.stoplight === "Green") { style.backgroundColor = "Green"; } else { style.backgroundColor = "Yellow"; } if (rowIndex > 2) { style.fontWeight = "normal"; style.color = "black"; } return style; };