How to combine FormPanel, Table and DataContainer for editable tables

[rjaros]

How to combine FormPanel, Table and DataContainer for editable tables

[rjaros]

I'v got a Tabulator module on my (long) TODO list ;-)

I'm also aware of some performance problems with both data container and redux module, which both work with the same pattern - by removing and recreating components inside a container. I'm trying to apply some optimizations. Maybe you could share a sample project in which you encounter these problems.

[rjaros]

You can't use standard FormPanel this way, because it always renders as a "form" with "div"s for its items. But it's fairly easy to create new FormPanel, which will render as a "tr" with "td"s. Just inherit and override two methods:

class RowFormPanel : FormPanel<SomeClass>(serializer = SomeClass.serializer()) {
    override fun render(): VNode {
        return render("tr", childrenVNodes())
    }
    override fun childrenVNodes(): Array<VNode> {
        return super.childrenVNodes().map {
            h("td", arrayOf(it))
        }.toTypedArray()
    }
}

I have tested this RowFormPanel class with this code:

            val tableTemplate = Table(
                listOf("Column 1", "Column 2"),
                responsive = true
            )
            dataContainer(rowList, { element, idx, list ->
                val internalFormPanel = RowFormPanel()
                val text = Text()
                text.setEventListener<Text> {
                    change = {
                        list[idx] = internalFormPanel.getData()
                    }
                }
                internalFormPanel.add(
                    SomeClass::one,
                    text
                )
                val text2 = Text()
                text2.setEventListener<Text> {
                    change = {
                        list[idx] = internalFormPanel.getData()
                    }
                }
                internalFormPanel.add(
                    SomeClass::two,
                    text2
                )
                internalFormPanel.add(Button("Delete").onClick {
                    list.removeAt(idx)
                })
                internalFormPanel.setData(element)
                internalFormPanel
            }, tableTemplate)
            button("Add row").onClick {
                rowList.add(SomeClass())
            }
            button("Print data").onClick {
                println(rowList.toList())
            }

It's rather ugly (definitely needs some styling) but fully working :-)

[rjaros]

kvision-tabulator module is almost ready. It will be available in the next realese.

[robert-cronin]

Great thank you!

[robert-cronin]

I am just getting around to testing this fully and have realized it becomes a little slow when you try to try to load any more than 20 entries at once, is it possible to request an integration with kotlin-react-dom or some kind of reactive editable table for next release?

[robert-cronin]

tabulator looks awesome, that would solve all my problems!
Great I'll see what I can do about the sample project

[robert-cronin]

Thats great news, things really move quickly around here 👍

[rjaros]

I've updated the guide with some information and sample code on tabulator module usage. There is also rewritten addressbook-tabulator example and small sample in the showcase app.

[robert-cronin]

Thank you Robert