Genie Discord forum

I'm trying to implement a search component for a table (code is available in a component gallery) but I'm getting always the same error, instead of showing a table I see only ="" v-slot:top-right=""> in a place where entire table should be visible. Do you have some hints how to solve that? BTW, is it possible to apply search across entire table and not for one column?

Changed the channel name: Search component for a table

can you share a MWE so that I can try it out and see if I can figure out why it's not working?

I think we broke it recently

it used to work with client side data only - but I added client side data support - and there is an issue about breaking client side search

but yes, a minimum example would help

as an issue in StippleUI.jl

Hey both, I'm sharing an example which is taken directly from Genie's component gallery. As an output you see only as shown

    module App
    using GenieFramework, DataFrames
    @genietools
    
    @app begin
        @out TableSearch_data = DataTable(
            DataFrame(
                name = [
                    "Frozen Yogurt",
                    "Ice cream sandwich",
                    "Eclair",
                    "Cupcake",
                    "Gingerbread",
                    "Jelly bean",
                    "Lollipop",
                    "Honeycomb",
                    "Donut",
                    "KitKat",
                ],
                calories = [159, 237, 262, 305, 356, 375, 392, 408, 452, 518],
                fat = [6.0, 9.0, 16.0, 3.7, 16.0, 0.0, 0.2, 3.2, 25.0, 26.0],
                carbs = [24, 37, 23, 67, 49, 94, 98, 87, 51, 65],
            ),
        )
        @in TableSearch_dfilter = ""
    end
    
    ui() = [
        table(
            :TableSearch_data,
            flat = true,
            bordered = true,
            title = "Treats",
            var"row-key" = "name",
            filter = :TableSearch_dfilter,
            hideheader = "",
            template(
                var"v-slot:top-right" = "",
                textfield(
                    "",
                    :TableSearch_dfilter,
                    dense = true,
                    debounce = "300",
                    placeholder = "Search",
                    [template(var"v-slot:append" = true, icon("search"))],
                ),
            ),
        )
    ]
    
    @page("/", ui)
    
    up()
    end

That's an error from our side. Until a fix is in place, you can workaround it by supplying an extra empty string and put the template in Vector brackets

hideheader = "", "", 
[template(...

)]

It's fixed in master ...

@Pere @essenciary please check whether everything works and tag a new version if it's fine. I'll be offline until next year most probably

It's done. v0.22.12 is in place. Happy New Year! 🍀

Big Thank you and happy New Year! how am I suppose to use it? Packages are updated, if I simply copy/paste the code from component gallery (tables + search) then it throwns an error as above, if I add an empty string and include template in a square brackets then table is shown but search option doesn't work.

No template is needed, just pass filter = :TableSearch_dfilter and you're done

I'll update the gallery then

This app works:

@app begin
    @out TableSearch_data = DataTable(
        DataFrame(
            name = [
                "Frozen Yogurt",
                "Ice cream sandwich",
                "Eclair",
                "Cupcake",
                "Gingerbread",
                "Jelly bean",
                "Lollipop",
                "Honeycomb",
                "Donut",
                "KitKat",
            ],
            calories = [159, 237, 262, 305, 356, 375, 392, 408, 452, 518],
            fat = [6.0, 9.0, 16.0, 3.7, 16.0, 0.0, 0.2, 3.2, 25.0, 26.0],
            carbs = [24, 37, 23, 67, 49, 94, 98, 87, 51, 65],
        ),
    )
    @in TableSearch_dfilter = ""
end

ui() = [
    table(
        :TableSearch_data,
        flat = true,
        bordered = true,
        title = "Treats",
        var"row-key" = "name",
        filter = :TableSearch_dfilter,
        hideheader = "",
        template(
            var"v-slot:top-right" = "",
            textfield(
                "",
                :TableSearch_dfilter,
                dense = true,
                debounce = "300",
                placeholder = "Search",
                [template(var"v-slot:append" = true, icon("search"))],
            ),
        ),
    )
]

@page("/", ui)

Sorry, hang on a moment

The automatic template is only added if (Table.jl line 250)

 if filter !== nothing && paginationsync !== nothing 

Not really clear to me why. Maybe @essenciary can help. But the app above does work with the template added manually.

Just saw that @essenciary has added && paginationsync !== nothing yesterday. That's why it doesn't work anymore.

it was not supposed to work like that - at least not in a non-breaking release

because it breaks existing code where users manually added the filter

understand

and in the version you patched the filter was actually rendered twice

yip, I realised that

so my assumption was: use this for server side so it's non breaking. potentially improve logic in a breaking release (asking users to remove manual code)

BTW, couldn't we add the functionality, that ParsedHTMLString is always added as child and never as am attribute

might make sense...

I'll try then ...

So, I updated StippleUI to v0.22.13 in the gallery app and the table search is working again. I did not have to change any code. @aww please let me know if it works after updating StippleUI to the latest version.

it looks like everything works, thank you All for fixing that!

@Pere lets discuss surfacing a server side filtering and pagination example for data tables

client side pagination and filtering is only feasabile for small amounts of data

server side events require a few events - see example here: https://github.com/GenieFramework/StippleUI.jl/blob/master/demos/tables/app.jl

FYI this demo will cause issues on Julia 1.10 due to this https://github.com/GenieFramework/Stipple.jl/issues/248