Having some trouble with Tabulator and kvision 4.1.1. Using Tabulator with a ObservableList (backend...

# kvision

[Tom]

Having some trouble with Tabulator and kvision 4.1.1.
Using Tabulator with a ObservableList (backend is ktor). With 4.1.1 the Tabulator rows are created but empty, header is visible. Going back to 4.0.0 solves this issue. (kotlin.js.compiler=ir)

val tab_options = TabulatorOptions(
        layout = Layout.FITCOLUMNS,
        columns = listOf(
                ....
        )
)
tabulator(Model.cov_List, options = tab_options)

[Robert Jaros]

There should be no difference between 4.1.1 and 4.0.0 with IR

[Robert Jaros]

Could you give more details?

[Tom]

It's a very basic fullstack project based on fullstack-ktor.
Client side

suspend fun aktuelleFälle(bezirk: String) {
    val newCases = caseService.aktuelleFälle()
    cov_List.syncWithList(newCases)
}

Transfer between server and client side and syncing works. The data is in the ObservableList. The Tabulator rows get even created, but are empty (no text). Changing back to 4.0.0 in gradle.properties fixes the problem.

[Robert Jaros]

What type of data is in the list?

[Tom]

@Serializable
data class Cov_GKZ(
    val Bezirk: String,
    val GKZ: Int,
    val AnzEin: Int,
    val Anzahl: Int,
    val AnzTot: Int,
    val Anz7Tage: Int,
    val Inz7Tage: Int
)

[Robert Jaros]

I think I know ...

[Robert Jaros]

On IR you need to annotate your data class with @JsExport

[Robert Jaros]

like this:
https://github.com/rjaros/kvision-examples/blob/master/showcase/src/main/kotlin/com/example/TabulatorTab.kt#L35

[Robert Jaros]

It could work with 4.0.0, because 4.0.0 has a bug 🙂

[Robert Jaros]

Let me know if adding @JsExport fixes the problem.

[Tom]

Oh, thanks a lot.

[Tom]

@Serializable
@OptIn(ExperimentalJsExport::class)
@JsExport
data class Cov_GKZ(
    val Bezirk: String,
    val GKZ: Int,
    val AnzEin: Int,
    val Anzahl: Int,
    val AnzTot: Int,
    val Anz7Tage: Int,
    val Inz7Tage: Int
)

Doesn't solve the issue for me.

[Robert Jaros]

It works for me. How do you define your columns?

[Robert Jaros]

I run this code:

@Serializable
@OptIn(ExperimentalJsExport::class)
@JsExport
data class Cov_GKZ(
    val Bezirk: String,
    val GKZ: Int,
    val AnzEin: Int,
    val Anzahl: Int,
    val AnzTot: Int,
    val Anz7Tage: Int,
    val Inz7Tage: Int
)

val list = observableListOf(Cov_GKZ("a", 1, 2, 3, 4, 5, 6), Cov_GKZ("b", 2, 3, 4, 5, 6, 7))
// ...
        root("kvapp") {
            val tab_options = TabulatorOptions(
                layout = Layout.FITCOLUMNS,
                columns = listOf(ColumnDefinition("A", Cov_GKZ::Bezirk.name), ColumnDefinition("B", Cov_GKZ::GKZ.name))
            )
            tabulator(list, options = tab_options)
        }

[Robert Jaros]

And I see the data in both columns I defined.

[Robert Jaros]

Are you absolutely sure you get the right data from your backend? Have you tried just adding some records manually to your list?

[Robert Jaros]

4.1.1 upgraded Ktor to 1.5.2 - perhaps there is some problem in this?

[Tom]

Thanks a lot 👏, problem is fixed. The problem was a mismatch between the data and the ColumnDefinition. Interestingly 4.0.0 was fault tolerant in this case.