GenieFramework / StippleUI.jl

StippleUI is a library of reactive UI elements for Stipple.jl.
MIT License
82 stars 15 forks source link

Table filtering stopped working from v0.22.9 #120

Closed jeremiedb closed 6 months ago

jeremiedb commented 7 months ago

In order to perform table filtering, we've been using the following up to StippleUI v0.22.8:

Stipple.table(:table_data, class="table-white-row", pagination=:table_page, dense=true, hide__pagination=false, filter=:dfilter,
  template(var"v-slot:top-right"="",
    textfield("", hint="Search by any keywords", :dfilter, borderless="", dense="", debounce="300", placeholder="Search", [
      template(var"v-slot:append"=true,
        icon("search")
      )]
    )
  )
)

StipplUI v0.22.9 seems to have have introduce the autogeneration of the above template mechanic: https://github.com/GenieFramework/StippleUI.jl/blob/584f88f756b4b35ec292811eac3db613f1b10362/src/Tables.jl#L249-L260 The changed broke the above approach to filtering since the template was now duplicated.

However, after adapting the call to the following, filtering isn't working. The page displays properly along with the seach box, but there's no reactiv filtering happening when filling the search box:

Stipple.table(:predicted_positions_table, pagination=:predicted_positions_page, filter=:dfilter, dense=true, hide__pagination=false)

The string resulting from this v0.22.10 "broken" filtering is:

"<q-table :pagination=\"table_page\" :columns=\"table_data.columns\" v-model=\"table_data\" :data=\"table_data.data\" dense 
row-key=\"__id\"><template v-slot:top-right>\n
<q-input dense debounce=\"300\" v-model=\"dfilter\" placeholder=\"Search\">\n    
<template v-slot:append>\n
<q-icon name=\"search\" />\n    
</template>\n  
</q-input>\n
</template>\n
</q-table>"

For reference, the valid string resulting from original v0.22.8 table is:

"<q-table row-key=\"__id\" :columns=\"table_data.columns\" v-model=\"table_data\" :data=\"table_data.data\" dense :filter=\"dfilter\" :pagination.sync=\"table_page\"><template v-slot:top-right><q-input debounce=\"300\" hint=\"Search by any keywords\" label v-model=\"dfilter\" borderless placeholder=\"Search\" dense><template v-slot:append><q-icon name=\"search\"></q-icon></template></q-input></template></q-table>"

Difference in causing the issue appears to be that :filter=\"dfilter\" is not pushed anymore in the resulting string. Maybe this was caused by the associated work on having server side filtering? Yet I think it would be desirable to maintain support for the original Quasar client-side filtering.

essenciary commented 7 months ago

@jeremiedb oops sorry about this - this was work in progress, I didn't realise it's been released. Let me check and get back to you.

essenciary commented 7 months ago

Yes, I think I accidentally removed the :filter prop from the q-table - I see that in their server side example they still have it. Does adding it back solve the problem? Have you tried?

image
essenciary commented 6 months ago

@jeremiedb Can you please try the newest 0.22.13? Should revert the filters back to the previous default.

essenciary commented 6 months ago

@jeremiedb also see an example here of server side filtering and pagination (which I recommend if you have lots of data) https://github.com/GenieFramework/StippleUI.jl/blob/master/demos/tables/app.jl

jeremiedb commented 6 months ago

Thanks for the follow up. Yes I can confirm that using v0.22.13, the following pattern is now working again for client side filtering: Stipple.table(:predicted_positions_table; filter=:dfilter, pagination=:predicted_positions_page). I haven't played much with the server side one as it didn't fit well our current usage, but it effectively looks like a desirable for large data handling. Liekly just my lack of experiments, but I wasn't clear why the filter had to be store in the in pagination object: https://github.com/GenieFramework/StippleUI.jl/blob/721ff97fc31e5d0282eea1c34489d22d6bb54693/src/Tables.jl#L78, but I trust it was the best way to handle it!