Embedding Icons within a Table

Hello,

Currently I am trying to create a table that has a column designated for displaying an icon of which is determined by the value of a different column. I have created a new view that only has an icon on it as shown below.

Capture1

The path for this icon is bound to a parameter within this view called “iconPath”.

Capture2

In my table I have a column where I want to display a given icon. In the column config properties, I set render to “view” and the viewPath to the view with the icon. I then added the parameter “viewPath” under viewParams.

Capture3

I can set the value of iconPath to a given icon (ex. material/check) and it will add that icon to every single cell within that column.

Capture4

Is there a way to individually select which icon is shown based on a value in a different column? For example, could you show a check mark if the population is above 1,000,000 and an X if it is below?

Thanks,
Nick

The View used in the column already receives the values of the column within a value param, so instead of supplying the iconPath, bind against view.params.value and then use a transform to determine the path.

I used this Expression Binding:

if({view.params.value}>1000000, 'material/check', 'material/remove')

to do this:
Screen Shot 2020-06-17 at 2.04.36 PM

3 Likes

I’ve been playing around with the table for a while using your suggestion but I’m a little confused about how to access these “implicit parameters”. Correct me if I’m wrong, but you’re saying to provide that expression binding on the following viewParam?

Capture5

When I do this I can’t seem to access the value param. Or should this be done somewhere within the view containing the icon? I did some digging around and saw that for a similar application, the view containing the icon should have its params set up as follows:

Screen Shot 2019-03-22 at 1.14.22 PM

I tried playing around with this and binding the icon path to value.population but still no luck. Sorry, I’m probably missing something quite obvious as I’m pretty new to perspective. Also, I noticed in the example you provided you displayed the icon within the population column. Would it be possible to add another column to display the icon so the population values are still shown?

Thanks for your help!

I was able to figure it out by following a similar process to what you were saying. In the view containing the icon, I created an object param titled “value” and within this object I created a key called “value”. I then added an expression binding to the path of the icon.

Capture6

I first tried adding a value parameter to the view containing the icon and then using the expression binding that you suggested, however, view.params.value seemed to return an object so it wouldn’t work.

Capture7

Now I just need to figure out how to add these icons in a separate column while still displaying the population values.

Thanks for all your help!

Figured out how to display the icon in a separate column, thought I’d share how I did it for those viewing this thread that are trying to do something similar. In the view containing the icon, I added an object parameter called “rowData” that has keys within it corresponding to the names of the columns.

Capture8

Then on the icon, I added an expression binding to its path.

Capture9

So the the final table looked like:

Capture10

5 Likes

I am missing the obvious… How do you get that object, which includes the value key ?

Ok… figured it out… you don’t need to pass the value, the whole row object is being passed automatically… So on my view with the icon I only need to make sure that I have an object on the params, which includes the key’s on the tablerow… f.ex I have a row with columns: LOCATION, CITY.
Then in my view, which contains the icon, I make a new object in the PARAMS called rowData: {LOCATION:’ ’ , CITY: ’ ’ }