JSFiddle - React, Tailwind, and code Playground

HTML

<main></main>
<script id='items' type='text/ractive'>
  {{#each items:i}} {{>item}} {{/each}}
</script>

<script id='item' type='text/ractive'>
  <tr>
    <td>{{id}}</td>
    <td>{{log_level}}</td>
    <td>{{log_message}}</td>
  </tr>
</script>

CSS

td {
    padding: 5px;
}

JavaScript

var LogApp = Ractive.extend({
    template: '#items',
    
    oninit: function() {
        var self = this,
            items = this.get('items'),
            i = 0, stop = 1000, interval;
        
        console.time('test');
        interval = setInterval(function() {
            var data = { id: i++, log_level: 4%i, log_message: 'row' + i };
            console.time('item');
            var copy = self.get('items').slice();
            
            if (copy.length > 100) {
                copy.pop();
            }
            copy.unshift(data);
            
            self.merge('items', copy);
            console.timeEnd('item');
            if( !(--stop) ) { 
                clearInterval(interval); 
                console.timeEnd('test');
            }
        }, 10);
        
    }
    
});

var ractive = new LogApp({
    el: 'main',
    data: {
        items: []
    }
});