> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.pdfgeneratorapi.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Is it possible to conditionally change the component style or hide the component?

Yes, it is possible to conditionally hide or change the style of a component. By defining specific conditions, you can dynamically adjust the visibility or appearance of components, creating more flexible and interactive content.

|| The ability to hide or change the style of a component depends on its type. While most components can be hidden, changing a component's style is only possible with certain specific components.

${frame}[Change component style or Hide component options](https://www.loom.com/embed/2542239ab2ac4346b68023e0ee7c9994?sid=829ee560-8fcc-48ce-a5af-4c88860f1807)

### How to set up Conditional formatting

Conditional formatting changes how a component looks or hides it when the data matches a condition. To set it up:

1. Right-click the component and select **Conditional formatting**.
2. Choose the action: **Change component style if matches the condition** or **Hide component if matches the condition**.
3. Select the **Data field** and the **Operator**, enter the **Value**, and click **ADD**.
4. To set more than one condition for the same component, click \*\*Add new conditional rule\*\* and fill in its data field, operator, and value.

For example, a text can turn green when `order_status` equals "completed" and red when it equals "cancelled".

||| Important: When adding multiple conditions, the conditions are connected by the **OR** operator, meaning Conditional Formatting will be applied if any of the specified conditions are met. To apply the Conditional Formatting only when all conditions are met, select the **Expression** option from the operators field and use the [expression language](https://support.pdfgeneratorapi.com/en/category/expression-language-q203pa/) with the **AND** operator.

###### Use-case of Expression Language in Conditional Formatting

Let's imagine a use-case where you want to hide a component when both {dataFieldName} and {dataFieldName2} are empty. In this case, the expression would look like this:

`empty({dataFieldName}) && empty({dataFieldName2})`

This expression will ensure that the component is hidden if both data fields are empty.

| **Tip:** For simple conditions the predefined operators are enough. Use the **Expression** operator when they cannot express the condition.

###### Hiding a table based on a condition

The table component doesn't have the option to be hidden based on a condition, it only allows style changes. However, the table can be hidden by placing it inside a container component and applying the desired hiding condition to the container.

![Hiding a table using a container component](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/snimka-obrazovky-2025-03-13-12_11b48k1.png)
---
### Related articles you may find helpful

* [Functions](/en/article/functions-srekaa/)
* [Header & Footer Component](/en/article/header-and-footer-component-gso8pw/)
* [Is it possible to conditionally hide a page in the document?](/en/article/is-it-possible-to-conditionally-hide-a-page-in-the-document-16d8p6b/)