GDAX-like table effect

App.jsx

<div className="table">
  <div className="row table-header">
    <div>Timestamp</div>
    <div>Temperature</div>
    <div>Distance</div>
  </div>
  {this.state.data.map((entry, i) => (
    <div key={entry.timestamp} className={
      `row
      ${i === this.state.data.length - 1 ? 'last' : '' }
      ${entry.trigger === '1' ? 'trigger' : ''}
      `}>
      <div>{dateFormat(entry.timestamp*1000, "HH:MM:ss")}</div>
      <div>{entry.temperature}º</div>
      <div>{entry.distance}cm</div>
    </div>
  ))}
</div>

/* App.css

@keyframes fadeIn {
  from { background-color: #00B285 }
  to   { }
}

.row {
  background-color: #343d46;
  width: 100%;
  display: flex;
  animation: fadeIn 1s;
}

*/