Conditional Formatting

Conditions in table cells can change the column’s data or highlight the specific cells you want your audience to focus on. Conditional formatting in Ninja Tables lets you add multiple conditions to table cells and the column/row the cell is in.

Conditional Formatting is a Pro Feature!

The cell value of the table changes in response to the conditions.

Applying Conditional Formatting in Ninja Tables #

Read this simple guide to learn how to apply this feature.

  • Firstly, you need to have a table designed beforehand.

  • There are two methods to configure Conditional Formatting. 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.

Ninja Tables Conditional Formatting
  • Or you can do it by hovering over any column name and pressing the Edit icon from the Table Rows tab.
Ninja Tables Column Editing Options
  • After that, a pop-up window will appear with various interactive options. Go to the top bar for Conditional Formatting.

  • Click on the Conditional Formatting tab. When you click the Add Condition button, multiple options to set conditions will appear with-

    If Cell Value [Select] [Enter Value] Then [Select] [Enter Value].
Ninja Tables Add Condition
  • Let’s set the conditions differently as Equal, Not Equal, Contains, and Does not Contain. Then, you need to set some trigger values and then set options for which conditions will be applied.
Ninja Tables Conditions
  • From the 3rd box, you can set Cell Options, Row Options, and Column Options and apply the desired condition.

    -If you select Cell Options, the condition will only apply to cells
    -If you select Row Options, the condition will apply to the corresponding row
    -And if you select Column Options, the conditions will change the corresponding column.
Set-cell-css-class
Ninja Tables column and row options
Conditional formatting column options

Let’s see how the conditions work.

  • In this case, If Cell Value is Equal to Male, Then the Set cell color to red.
  • Also, If Cell Value is Equal to Female, Then the Set cell background color to brown.
  • Lastly, click on the Update button when the configuration is done.
Ninja Tables added Conditions
  • After applying Conditional Formatting, the table will look like the below screenshot –
Table Preview- conditional formatting added

Highlight Table Cells With Conditions #

Say you want your customers to pay attention to a specific product price.

You can highlight the cell where the price is mentioned.

highlighted cell

Set Cell CSS class #

Let’s discuss another cell option, the Set Cell CSS class.

  • First, set the Cell option as Set cell CSS class and enter a value name as abc (it will be a CSS class name).
Ninja Tables cell CSS class
  • Then, navigate to the table’s Custom CSS/JS tab and write your CSS style. (It will apply to all of the Male values since it’s the gender column)

  • Click on the Save Custom CSS button after you are done.
Ninja Tables Custom CSS
  • See the preview of the table after adding the CSS.
Preview Table

Conditional Formatting for Numeric Value Data #

When you select Numeric Value as a Data Type in column settings, there will be more options in Cell Value.

COnditional formatting in data field

  • In the Age Column, if the Cell Value is Less Than Or Equal To 25, Then the Set cell color (cell options) to maroon.

Add numeric value condition
  • See how the conditions work in a column with numeric data. All cell data with a value less than or equal to 25 are colored in maroon.
Numeric data types

Conditional Formatting in Date Field #

When you select Date Field as a Data Type in column settings, there will be more options in Cell Value.

Also, you need to take care of your Date Format in column settings because you will get the list of Example Usage in Conditional Formatting according to your chosen Date Format.

Conditional formatting in data field
  • Here is the list of Example Usage according to the chosen Date Format.
Date format condition add

  • Here, if the Cell Value is Less Than Today’s Date {date: MM/DD/YY} (this date format is taken from the below Example usage list), Then the Set cell color will be changed to Blue.

Add numeric condition
  • See the preview. The data with less than today’s date are blue.
Table preview numeric formatting

Set Row CSS class #

Let’s talk about another row option, the Set row CSS class, and how it works.

  • First, set the Row option as Set row CSS class and enter a value name as hide (it will be a CSS class name).
Ninja Tables row css class
  • Then, navigate to the table’s Custom CSS/JS tab and write your CSS style; it will apply to all of the dates which are less than Today’s Date values.

  • At last, click on the Save Custom CSS button after you are done.
Add Custom CSS for tables
  • Here in the preview, you can see the rest of the dates that are less than today’s date have been hidden here.
Preview-Table-with custom css

That’s how to set up Conditional Column Formatting in Tables!

10 Comments

    1. Hi Li,
      Thanks for reaching out. When you use HTML you can easily add ‘no-opener’ tag to open in new tabs. Use this below HTML tag,

      <a href=”https://websiteyouwanttomention.com/” target=”_blank” rel=”noreferrer noopener nofollow”>The Anchor</a>

      You can open a support ticket from here https://wpmanageninja.com/support-tickets/ for any kind of other assistance. Our support heroes are eagerly waiting 24/7 to help you create any kind of modification on your tables.
      Thanks.

  1. Hi!,
    I am trying to wrap this text “Round Trip price” which is Sticky Header but it only shows me on mobile “Trip Price”. Can you tell me how can i solve this?
    Thanks,
    George

Leave a Reply

Your email address will not be published. Required fields are marked *