Transform Value

Table of Contents

The Transform Value function has increased the versatility and dynamic nature of Ninja Tables for users.

Let’s dive into this simple guide that’ll teach you how to Transform Values easily in any specific table’s column.

Transform Value is HTML, CSS & Excel supported!

  • There are two methods you can follow to reach Transform Value.

  • Go to the Table Configuration tab → Click on the Edit icon (Pencil Icon) on the right side of the column and you will notice a drop-down will appear.

Transform Value from Table Configuration
  • Or you can do it by hovering over any column name and pressing the Edit icon from the Table Rows tab.

Transform Value from Table Rows

Let’s go over the Transform Value functionality step by step.

Transform Value box #

Data Transformer is a powerful tool where you can concat any column values easily into any valid HTML and show them as computed values.

You can use any HTML, CSS & Excel formula in the transform value box

Show Formulas #

When you click on the Enable Excel Formula Support for Transform Value, you will get a Show Formulas button, which you may click to acquire the formulas you want.

Transform Value area

Reference Shortcode #

In Reference Shortcodes, there will be Column Title & Reference Shortcode, whereas in Transform Value, according to the Column name, reference shortcodes will automatically be created.

There will be a Column Title and a Reference Shortcode in the Reference Shortcodes area, whereas, reference shortcodes will be constructed automatically based on the Column name.

You can use the following Reference Shortcode Values to transform your cell value.

  • Here, there are three steps to complete. Look at the example below to know about these steps.

  • You must write the HTML code (< a href= ……….) on the transform value box. Now, I’ll explain here the framework for users only beginning to make their own custom code.

  • You don’t have to modify the first piece of the code. But the 2nd part can be changed to whatever suits your needs.
  • Custom words can also be written for the second part. Copy & paste the email shortcode inside the anchor tag, and do the same for the email shortcode.

See the example below for viewing the output of the transform value.

  • In this case, the Email Name has been used before the closing tag of the HTML. You can also transform values for all the other columns similarly. In the example below, Contact No. is used to call people directly by clicking on the link –

  • So, for the contact no column, in the first step, you should write the HTML code for transforming the value. Within the statement, the basic structure will stay the same. There, you just need to change a few words. The output of the table has already been given above.
  • You can also choose other table fields such as Name, Profession, and other fields.

Let’s go with another example for better understanding.

  • If you want to replace the cell value Female from the gender column with a link (for example, https://google.com) and the rest of the cell value will be remained, you can follow the formula –

=IF(“{{row.gender}}”=”Female”,”<a href=’https://google.com’>{{row.gender}}</a>”,”{{row.gender}}”)

where reference shortcode for the gender column is – {{row.gender}}

Note that you can use as many IF Formulas as you want in the transform value box.

  • See the below screenshot to get how it works-

Number Calculation #

  • To execute number calculations, we must pick the number fields for each column, and the Data Type for each column must be a Numeric Value.
  • See the screenshot below, where Product 1 and Product 2 are numeric fields, and the third column is utilized to display their results.

  • Now, go to the Transform Value of the third column if you want to add column 1 and column 2 together and display the result in the third column (Data type must have a Numeric Value).
  • Give this below formula to the transform value box to add the cell value of column 1 and column 2.

=SUM({{row.product_1}},{{row.product_2}})

where reference shortcode for the product 1 and product 2 columns is – {{row.product_1}} and {{row.product_2}}

  • Lastly, click on the Update button when you are done with your configuration.

  • Below is a screenshot of the Preview Table that will show how it works –

By following this easy and simple guide, anyone can work with Transform Value!

What are your Feelings