Streaming content, append table row

[tuxcanfly]

I need to dynamically append a row to a table:

https://codepen.io/tuxcanfly/pen/XWdjEyd

I tried x-model="rows" but it didn't work. Any idea how I can do this?

See the Pen alpine.js streaming table by Javed (@tuxcanfly) on CodePen.

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

[KevinBatdorf]

One thing that stands out is that pen is using Alpine 1.9.8 which is quite old already.

Update the script to:

https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js

Also, you need to call your setInterval function inside of x-init for the component to update

<tbody x-data="handler()" x-init="setInterval(() => {
    rows.push({
        id: rows.length + 1,
        msg: 'hello world',
        timestamp: '20 Aug 2020'
    })
}, 1000)">

[ryangjchandler]

@tuxcanfly - it's worth noting that x-model is for two-way data binding on form inputs, not layout elements such as <table>.