Skip to Content
Author's profile photo Tri Minh Le

How to implement sap.ui.table.TablePersoController

Hello everyone,

This is my very first post on SAP Community.

Recently, I need to have a column show/hide feature for a report using sap.ui.table.Table. The report is using JSON model since I need to join all data retrieving from oData services and i don’t have a view either.

I’ve explored some options:

  1. Element sap.ui.table.Table has a property showColumnVisibilityMenu which is false as default. It’s good but I can’t select multiple column to hide at same time. Each time, I can only choose one.
  2. I have a simple way. I create a fragment with SelectDialog binding JSON model and handle hide/show by setting the property visible true/false. This meets my requirement.
  3. But I want to see if SAPUI5 provides any elements like this. I find out that the smart table has the feature but it only works with oData. Finally I find this element from library sap.m: However, I can’t find one sample for sap.ui.table.Table. I try to do one.

First, I use the sample code from SAPUI5 website:

Second, I borrow the file DemoPersoService.js from sap.m.sample.TablePerso above which will be used as Personalization Service object when initiating TablePersoController object. I replace resetPersData function  with delPersData.

Third, I add some codes in Component.js, and the controller. I remove some columns to keep the demo simple.

Component.js: DemoPersoService.js added

The controller:

Finally, the result will be like this. With element sap.ui.table.TablePersoController, we can hide/show multiple columns at same time and sort columns as well. You can check this by yourself by clicking the up/down arrow.

You can clone my git to play around with the demo.

Thank you for your time.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Niyaz Ahamed
      Niyaz Ahamed

      Excellent blog. I was looking for same thing.


      Author's profile photo Vishnupriya Varadharajan
      Vishnupriya Varadharajan

      Thanks! Helped a lot.

      Author's profile photo Manoj Mohanty
      Manoj Mohanty

      Thanks for detailed information. Any idea, how to implement this DemoPersoService.js service object using OData ?

      Author's profile photo Yugang Li
      Yugang Li

      Tri Minh Le

      Hi, I found some issue here. In Columns selection dialog, all column always be selected, how to fix this issue?