Lift framework: Not able to render table rows using comet properly - lift

Question

In my web page I have a text box in which user enters an item name that would be sent to server asynchronously, that message would be sent to CometActor then further it adds additional information to it and in the render method it tries to append a new row to existing table on the page asynchronously. Whenever I add an item always new row is getting placed on top of table rather than as table row, after that if I press refresh it is getting placed properly in the table. Here is
<table cellpadding="0" cellspacing="0" border="1" class="display" id="example">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Time</th>
</tr>
</thead>
<tbody class="lift:comet?type=ProvisionComet">
<tr id="tr_content">
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
LiftActor object
object ItemsServer extends LiftActor with ListenerManager {
private var items = Vector[Item]()
private lazy val date: Box[Date] = DependencyFactory.inject[Date] // inject the date
def createUpdate = items
override def lowPriority = {
case s: String => items :+= new Item(items.length + 1, s, date.map(_.toString)); updateListeners()
case _ => None
}
}
Comet Actor
class ItemComet extends CometActor with CometListener {
private var items = Vector[Item]()
def registerWith = ItemsServer
override def lowPriority = {
case v: Vector[Item] => items = v; reRender()
}
def render = "#tr_content *" #> {
items.map(i => {
<td>{i.sNum}</td>
<td>{i.itemName}</td>
<td>{i.updatedTime.toString}</td>
})
}
The result before refresh is
The result after refresh
How to get the correct result without refreshing?
render method is the place where I am adding rows

Answer 1

Try moving the class attribute from tbody to table:
<table class="lift:comet?type=ProvisionComet" cellpadding="0" cellspacing="0" border="1" class="display" id="example">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Time</th>
</tr>
</thead>
<tbody >
<tr id="tr_content">
<td></td>
<td></td>
<td></td>
</tr>
</tbody>