reactjs - How to color specific cells in Table -
i have html table in reactjs app , want color specific cells or rows there. have array in state , want check differences between neighbor rows , show differencies coloring them on red.
class maintable extends component { constructor(props) { super(props); this.state = { results: [] }; } render() { const sorted = _.sortby(this.state.results, ['origin', 'datastamp']); return ( <div> <div> <table hover striped bordered responsive size="sm"> <thead> <tr> <th>version</th> <th>date</th> <th>origin</th> </tr> </thead> <tbody> {sorted.map(result => <tr> <td>{result.version}</td> <td>{result.datastamp}</td> <td>{result.origin}</td> </tr> )} </tbody> </table> </div> </div> ); } } i have no idea how that. maybe idea? sorry noobie question, i'm new reactjs.
you can use
<tr style={{'background-color': result.color}}>...</tr> or
<tr style={{'background-color': shouldhighlight[key] ? 'red' : 'white'}}>...</tr> obviously in second case need findout before function, table rows should highlighted , store in array.
also, need write map function in format (result, key) => ... or need know id of result.
Comments
Post a Comment