Conditional Formatting is a fantastic tool that you will undoubtedly benefit from. You can use Ninja Tables to build all of your tables’ columns with conditions that meet your needs.
📝 Conditional Formatting is a Pro Feature!
With this feature, depending on the cell value of the table, you can configure its design of it.
Applying Conditions to Ninja Tables #
Read this simple guide to learn how to apply this feature.
- Firstly, you need to have a table designed beforehand.
- So, we can begin allocating the conditional formatting in the table. Now, click on the Edit option under the table title in your Ninja Tables dashboard.
- There are two methods to configure Conditional Formatting. You can set it by changing columns one by one in the Table Configuration menu.
- 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.
- Or you can do it by hovering over any column name and pressing the Edit icon from the Table Rows tab.
- 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 as the Basic Settings shows by default.
- Then, you’ll find the options needed for that specific option. There will be no data by default, so click on the Add Condition button to give the condition. Right now, it has one conditional field, but simply clicking the Add Condition button can add more conditions.
- 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.
- Cell Options, Row Options, and Column Options can also be selected. There are various options in those categories.
- Let’s see how the conditions work –
- In this case, If the Cell Value is Equal to Male, Then the Set cell color will be changed to red.
- Also, If the Cell Value is Equal to the Female, Then the Set cell background color will be brown.
- Lastly, click on the Update button when the configuration is done.
- After applying Conditional Formatting, the table will look like the below screenshot –
Set cell CSS class #
Let’s talk about another cell option, the Set cell CSS class, and how it works.
- First, set the Cell option as Set cell CSS class and enter a value name as abc ( it will be a CSS class name).
- Then, navigate to the table’s Custom CSS/JS tab and write your CSS style; it will apply to all of the Male values.
- At last, click on the Save Custom CSS button after you are done.
- See the below preview table (screenshot) of how it works.
Conditional Formatting in Numeric Value #
When you select Numeric Value as a Data Type in column settings, there will be more options in Cell Value.
- For instance, see the below screenshot –
- In this case, with the Numeric Value Data Type, and in the Age Column, if the Cell Value is Less Than Or Equal To 25, Then the set cell color (cell options) will be red.
- See how the conditions work with Numeric Data Type.
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.
- Here is the list of Example Usage according to the chosen Date Format.
- Let’s see an example for our better understanding-
- 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.
- See the Preview Table of how the Date Field is working.
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).
- 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.
- See the below preview table (screenshot) of how it works. The rest of the dates that are less than today’s date have been hidden here.
That’s how to set up Conditional Column Formatting in Tables!
