Show/Hide Columns dynamically in Table

Ketan Gupta

May 11, 2016 at 9:25 pm #1741

How can I enable configurable columns in table ?

Use Case: User should be able to show/hide columns after rendering the table.
Please refer attached screen shot from an angular Plugin for the same purpose.

SPARK Support

May 13, 2016 at 9:05 am #1776

Hi Ketan,

We’ve received your question and are currently looking into a possible work around solution.  We should have an answer for you by Monday if not sooner.  We have also included this scenario to be added into the table configuration options to be in a future iteration.

Regards,

SPARK Support

Ketan Gupta

May 15, 2016 at 11:22 pm #1798

Hi Team,

I found work around using jQuery.

$(“table tr th:nth-child(“+colIndex+”), table tr td:nth-child(“+colIndex+”)”).show();

$(“table tr th:nth-child(“+colIndex+”), table tr td:nth-child(“+colIndex+”)”).hide();

conIndex – Index of Column, for which visibility needs to be toggled.

One Observation:

• If we manipulate any table element using DOM Manipulation, On trigger of any Boundary Event – table is getting refreshed.
  Is there any way to restrict table being refreshed ?
• Is there any way to add any custom icon/Button on table header and associate events to that ?

SPARK Support

May 17, 2016 at 9:18 am #1810

Hi Ketan,

That was the exact work around we were going to suggest.  We’ve attached the screenshots of the workaround for future reference of anyone else having this issue.  We also have made it a point to include this feature in a future release.

On the other two observations if your using a boundary event your essentially leaving the coach, so every time it comes back it will automatically refresh.  We currently do not have a feature to stop the table from being refreshed.  On the second point our suggestion would be to use a Layout section to replicate the table format and attach the Icon/Buttons on there.

Ketan Gupta

May 20, 2016 at 1:46 am #1824

Thanks Team.
It will be good & really helpful, if this feature in included in Table.

Stuart Jones

November 22, 2016 at 1:11 pm #3152

Hello,

I see that this entry is around 6 months old. I have a similar need that I was hoping to address using the setColumns method but it doesn’t seem to work? I have a JS method that I run on Table Load:
function buildTableStatic(me) {
var colData = [ {renderAs: “Seamless Coach View”, visibility: true, label: “Instance ID”}, { renderAs: “Seamless Coach View”, visibility: false, label: “First Name”, dataElementName: “prop1”} ,
{renderAs: “Seamless Coach View”, visibility: false, label: “Last Name”, dataElementName: “prop2”} , { renderAs: “Seamless Coach View”, visibility: true,label: “City”} ,
{renderAs: “Seamless Coach View”, visibility: true, label: “State”} , {renderAs: “Seamless Coach View”, visibility: true, label: “Mortgage Type”} ,
{renderAs: “Seamless Coach View”, visibility: true, label: “Status”} , { renderAs: “Seamless Coach View”, visibility: false, label: “Prop7”} ,
{renderAs: “Seamless Coach View”, visibility: false, label: “Prop8”} , {renderAs: “Seamless Coach View”, visibility: false, label: “Prop9”},
{renderAs: “Seamless Coach View”, visibility: true, label: “History”} ];

var p1 = page.ui.get(“path to Table”);
p1.setColumns(colData);
}

I have run various flavors of this in the table’s onLoad event and the best that I can get to work is controlling the visibility of the column headers, but the the whole column. Am I using the setColumns method incorrectly (i.e. it doesn’t do what I want to do) or am I just coding it badly?

I have tried using the Columns configuration to define a column as “Visibility: None” and this works just fine. However, I cannot get it to work dynamically

Thanks

Stuart Jones

SPARK Support

November 29, 2016 at 2:11 pm #3187

Hi Stuart,

The available settings for renderAs are “V” for Coach View, “S” for Seamless Coach View, “H” for Simple HTML, and “C” for Custom.

Regards,

Stephen P.

Stuart Jones

December 2, 2016 at 10:52 am #3222

Hello,

Thanks for the update. I made the change to my column data. However, this made no difference to the way that my table is displayed – the setColumns method call only affects the column titles ‘row’ and not the data rows. Is there some required set of column attributes that is required to make this work or does the setColumns method not work in this way?

One other thought, the example in the JSDoc shows a executeService method. This method doesn’t seem to exist anymore but it makes me think that there might be some additional call that I need to make to have setColumns take effect for the data rows?

Thanks

Stuart…

 

SPARK Support

December 2, 2016 at 1:37 pm #3224

Hi Stuart,

After further discussion with the Development Team, we have found an issue with our documentation.  The Table JS Doc is providing methods that are supported for the Service Data Table.  It actually shows this in the upper left corner of the page.  The method is setting all elements to HTML, as the Coach View Render As options are not supported by the Service Data Table.

On the next release, I will be modifying the Table document to contain only those methods supported by the table control.

Regards,

Stephen P.

 

Stuart Jones

December 2, 2016 at 3:11 pm #3225

Hello,

I always wondered why the Table JSDoc showed the ‘wrong’ title. Up to this point, I had assumed that it was because the same methods were supported by both controls but it seems that this is not the case. I took a further look at the options available for a regular table and I can achieve my objective using a list variable of type TableColumn and specifying this in the configuration for Columns. This enables me to set the visibility property to V or N for each column programmatically and I get my dynamic columns that way.

Thanks for your patient help on this.

Stuart…

 

SPARK Support

December 5, 2016 at 10:49 am #3232

Hi Stuart,

I am happy to hear that you were able to find a work around, and thank you for sharing your solution.  I would like to a see a screenshot of your configuration options.

Regards,

Stephen P.

Stuart Jones

December 5, 2016 at 11:06 am #3234

Hello Stephen,

My first pass at this uses a table with 11 columns. The first 10 are my data and the 11th contains a button that will open a modal. My objective is twofold; first I want to eliminate columns where I have less than 10 columns of data. This is the straightforward option, as opposed to eliminating (say) columns 3,5,8. My second objective to is eliminate column 11 if my scenario doesn’t need the button. This is a client side human service and the JavaSCript to do this looks as follows:

var i = 0;
tw.local.tableColumns = [];
for (i ; i < tw.local.searchItems.length ; i++) {
tw.local.tableColumns[i] = {};
tw.local.tableColumns[i].renderAs = “S”;
tw.local.tableColumns[i].visibility = “V”;
tw.local.tableColumns[i].sortable = false;
tw.local.tableColumns[i].options = “”;
tw.local.tableColumns[i].css = “”;
tw.local.tableColumns[i].width = “”;
}
for (i ; i <10 ; i++) {
tw.local.tableColumns[i] = {};
tw.local.tableColumns[i].renderAs = “S”;
tw.local.tableColumns[i].visibility = “N”;
tw.local.tableColumns[i].sortable = false;
tw.local.tableColumns[i].options = “”;
tw.local.tableColumns[i].css = “”;
tw.local.tableColumns[i].width = “”;
}
if(tw.local.showHistory) {
tw.local.tableColumns[10] = {};
tw.local.tableColumns[10].renderAs = “S”;
tw.local.tableColumns[10].visibility = “V”;
tw.local.tableColumns[10].sortable = false;
tw.local.tableColumns[10].options = “”;
tw.local.tableColumns[10].css = “”;
tw.local.tableColumns[10].width = “”;
}

I have also attached a screen shot of my configuration options. let me know if there is more that you’d like to see.

Stuart…

SPARK Support

December 8, 2016 at 4:50 pm #3258

Hi Stuart,

Thank you for sharing.

Regards,

Stephen P.