Ninja Tables has come up with some fantastic features that will blow your mind. Amid all of those features, the value transformation system is very crucial, and it has made Ninja tables more user-friendly and convenient to use.
In this tutorial, I will show you how you can transform values easily in any particular column of a table.
At first, you have to design a table with some data. For example, I have already created a table named “Temporary Table” with Ninja tables plugin.
You can see that columns are not clickable on the table. Suppose if you want to send an email or call to the first person named “Scott“, you have to copy his email address or contact number manually and then you have to call him. But, by transforming values, you can easily send an email or call anyone from the table by one click only.
Suppose, in my table; I want to make all entries clickable on the “Email” column. For doing that, you can do it in two ways. One is the directly hover over table column and click on the edit icon.
Another procedure is by selecting “Table Configuration” and after that, click on the edit icon of the column.
However, I have chosen the hovering procedure here as it is convenient for maximum users. So, first, I will work on the email column for value transformation.
In that case, click on the edit icon of the email column and a new pop-up window will appear there. So, click on the “transform value” button which has been marked by red color on the image.
Now it is the prime step. However, if you could understand only the procedure of transforming value for one column, you can do the same thing for other columns without any assistance.
You have to work on the three places consecutively, and that is why I used numbers on the above Image.
You have to write that HTML (<a href=…………..) code on the box for transforming value. Now, I am going to illustrate here regarding the code for entry-level users so that can create your own custom code.
You don’t need to change the first part of the code. However, you can bring modification to the second part according to your requirement. You can even write your own custom words for the second part.
Suppose, on the image; you can see that, I have written “Send Email” before the closing bracket of HTML, and ultimately, you can see the output of the code in preview mode as below image.
Now, suppose you want to write there “Click here to send an email now” instead of “Send Email“.
To do that, you can write “Click here to send an email now” on the second part of the code as below image.
After that, click on the “Preview” button for ensuring the appropriate outlook and see the changes brought to the table.
However, you can transform values for every single column. Suppose, you want to do the same thing for “Contact No” column so that you can call to those persons directly by clicking on the link.
To do that, Click the edit icon of the “Contact No” column in the table same as what we did for Email column in the previous time. When a new popup window appears on the screen, click on the “transform Value“.
So, in the first step, you should write HTML code for transforming value for contact no column. The basic structure will remain the same in the statement. You need to change just a few words there.
And ultimately, the outcome will be the same as below picture.
However, you can customize the bar more preciously as below image.
After that, click on the update button to see the changes on the table.
Note: You can even select other fields of the table such as “Last Name“, “Job Title” and other fields.
This is how you can transform values for various fields of the table. Similarly, you can change the values for “Job Description” or “Photo” columns too by altering statement partially.