Webui-vue: table multisort feature.

[Gunnar Mills]

On 10/11/2022 7:14 AM, Nikolay Chegodaev wrote:

> 
> It seems like that to continue to use the BoostrapVue table component(or b-tables for short) as part of OpenBMC WebUI-vue part, it needs multi sorting to be enabled
> on BoostrapVue table component, but this issue is not yet implemented as part of b-tables main package and remains in-progress.
> 
> As per author comments by this link https://github.com/bootstrap-vue/bootstrap-vue/issues/2068#issuecomment-629342977 it is still in the works.
> The same goes to the PR/Commit with this new feature in BoostrapVue table component repository https://github.com/bootstrap-vue/bootstrap-vue/pull/4242
> 
> Our recent changes involve the multi-sorting features to be already present, but there are none, unfortunately.

What tables are you attempting to add multi-sort to?

> 
> 1) If you have more information on when this feature will be available as part of the package, would you mind to share it?

We don't other than the issue you referenced. I posted on this issue.

> 
> 2) And afterwards the aforementioned commit would be merged for BoostrapVue table component, would it be possible to update the OpenBMC WebUI-vue upstream with this change and how long does it take?

Yes, it should be possible to update to the new version and it shouldn't 
take long after a bootstrap-vue release. Without a commit it is too hard 
to say an exact time.

> 
> In the meanwhile, I have an instructions to discuss the proposal to change the BoostrapVue table component to the vue-tables-2-premium globally for the whole WebUI-vue part of OpenBMC project.
> The manual for the component is here: https://matanya.gitbook.io/vue-tables-2/ it seems that the component is supporting the muritsorting feeature already and it works.

> Beyond the multi-sorting feature the vue-tables-2-premium can propose the following interesting features(pros) - most notable of which are the following:
> - There two modes included - direct request (using the Axios or Server-table) and existing data usage mode (from some Vuex/Pinia storage perhaps, Client-table),
>    which, in theory, may enable us to use Thunk-like (a technology from Redux to pre-load data to say it in a simple way) access to server, if we would need it some day
> - The component includes grouping feature named child rows, which would allow us to implement a table-within-table - in short, when you click on some row,
>    it will expand to some more rows or web-links hidden under the parent-row in a folder-like manner
> - It also includes Virtual pagination, which can load additional data while we scroll the table and allow us to clean the screen of page-list components
> 
> The component also several not so great features(cons):
> - It is written by one-man team, yes, it is written to best possible level of excellence, but there are still flaw, which does prevent us from accessing the headers of table columns in a unified way
>    like we do BoostrapVue table component - while on b-tables we do `<template #head(column_name)>` on vue-tables-2-premium we would need to do this on low level render way like so `<template #h__column_name>`
>    there also necessities to change some CSS Designs to make the vue-tables-2-premium table to look in the same way as BoostrapVue table component, but those are quite minor.


Sandeepa and I looked at this vue-tables-2 and our concern is the single 
contributor. We are also concerned about what else might break. Could 
you explain more why multi-sort is so needed?

> 
> 3) At the moment, we need to change BoostrapVue table component on one of the WebUI-vue page/views(where we desperately need it) to vue-tables-2-premium (or maybe some other component), temporarily until
> BoostrapVue table component will support multi-sorting feature as an integrate part, but if the community would approve the change from BoostrapVue table component to vue-tables-2-premium -
> vue-tables-2-premium could be changed on every page on constant basis (or until we get the multi-sorting support for the BoostrapVue table). So, what do you think?
>