Webui-vue: table multisort feature.

Nikolay Chegodaev n.chegodaev at yadro.com
Tue Oct 11 23:14:50 AEDT 2022


Good day OpenBMC Community,

My name is Nikolay, I working with the project that is based upon the OpenBMC - https://github.com/openbmc/openbmc - and its WebUI-vue part in particular. 

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.

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

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?

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.
 
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?

Thanks.
-- 
Yours sincerely,
Nikolay Chegodaev


More information about the openbmc mailing list