Genie Discord forum

Search box in StippleUI Table

10/14/2023, 4:17:16 AM

Is there an example available on how to add search box to a StippleUI.table? For example, like the search functionalities shown in the Quasar docs: https://quasar.dev/vue-components/table/#example--grid-style

Pere

10/14/2023, 8:48:49 AM

When you find some code in the Quasar docs that you want to try, you can use the parse_vue_htmlfunction to get the equivalent Julia code. In this case it didn't work at first, I had to put the templatein between []. Here's the table with search:

        @out 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 dfilter = ""

#####

            table(:data, (columns!)="data.columns", flat=true, bordered=true, grid=true, title="Treats", var"row-key"="name", filter=:dfilter, hideheader="",
                template(var"v-slot:top-right"="",
                    textfield("", :dfilter, borderless="", dense="", debounce="300", placeholder="Search", [
                        template(var"v-slot:append"=true,
                            icon("search")
                        )
                    ]
                    )
                )
            )

jeremiedb

10/14/2023, 4:50:42 PM

It works!!! Amazing, I didn't thought the template components were supported at all. The parse_vue_html is more powerful than expected, a great feature, thank you!