Webui-vue: table multisort feature.
gmills at linux.vnet.ibm.com
Sat Oct 15 02:32:43 AEDT 2022
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?
More information about the openbmc