TornadoFX datagrid empty - graphics

Question

So I have been following this tutorial that tells you how to make a datagrid in TornadoFX, and everything works fine. However, I want to add multiple Views to each cell of my datagrid, so I want to replace the stackpane with a borderpane. This breaks it. Cells still show up, but they are blank white squares. None of the Views show up inside.
I'm not really sure why this happens. It seems to me that cellFormat and cellCache act like for-each loops, making a graphic described inside of them for each element in the list of cells that need formatting. I'm not sure, though.
As such, I'm really not sure how to fix this. I really appreciate it if anybody can help.
Code that puts a green circle and a label on each of the white squares:
class DatagridDemo: View("Datagrid Demo") {
val data = listOf("one", "two", "three")
override val root = datagrid(data) {
cellFormat {
graphic = stackpane() {
circle(radius = 50.0) {
fill = Color.ALICEBLUE;
}
label(it);
}
}
}
}
My code:
class DatagridDemo: View("Datagrid Demo") {
val data = listOf("one", "two", "three")
override val root = datagrid(data) {
cellFormat {
graphic = borderpane() {
//The widgets implement View()
top<TopWidget>();
bottom<BottomWidget>()
label(it);
}
}
}
}

Answer 1

This uses two custom Fragments to create objects that are added to the top and the bottom.
class TopWidget(msg : String) : Fragment() {
override val root = label(msg)
}
class BottomWidget(msg : String) : Fragment() {
override val root = label(msg)
}
class DatagridDemo: View("Datagrid Demo") {
val data = listOf("one", "two", "three")
override val root = datagrid(data) {
cellFormat {
graphic = borderpane {
top { add(TopWidget("Top ${it}")) }
center { label(it) }
bottom { add(BottomWidget("Bottom ${it}")) }
}
}
}
}
class DGDemo : App(DatagridDemo::class)