mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-23 06:27:57 +00:00
81 lines
No EOL
2.8 KiB
Markdown
81 lines
No EOL
2.8 KiB
Markdown
---
|
|
id: access-cellvalue-rowdata
|
|
title: Dynamically Change Cell Colors in Table
|
|
---
|
|
<div style={{paddingBottom:'24px'}}>
|
|
|
|
This guide shows how to change the text color and background color of certain cells in a **Table** component based on specific conditions.
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
|
|
|
## Create a New Application and Set up the Data Source
|
|
- Create a new app and add a **[Table](/docs/widgets/table)** component to the canvas.
|
|
- Open the Query Panel at the bottom and click on the `+ Add` button.
|
|
- Select REST API as your data source - your query will be named as restapi1 by default.
|
|
- Choose GET method and enter the below URL:
|
|
```
|
|
https://fakestoreapi.com/products
|
|
```
|
|
- To view the data that your query will return, click on the **Preview** button. Click on the **Run** button to execute the query and retrieve the data.
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
|
|
|
## Display Data on the Table
|
|
|
|
- Hide the Query Panel and click on the **Table** component to open its properties panel on the right.
|
|
- Under Table Data, enter the below code:
|
|
```
|
|
{{queries.restapi1.data}}
|
|
```
|
|
<div style={{textAlign: 'center'}}>
|
|
<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/how-to/change-text-color/table-with-data.png" alt="Table Component With Data" />
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
|
|
|
## Change Text Color Based on Cell Value
|
|
|
|
- Select the **Table** component and go to Columns.
|
|
- For the `category` column, paste the below code under Text Color to dynamically change the text color based on the value of the cell:
|
|
|
|
```
|
|
{{cellValue == 'electronics' ? 'red' : 'green'}}
|
|
```
|
|
|
|
Now, if the cell value is `electronics`, the text color will be red; otherwise, it will be green.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/how-to/change-text-color/conditional-text-color.png" alt="Conditional Text Color" />
|
|
</div>
|
|
|
|
<i>You can use also Hex color codes for more color options.</i>
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
|
|
|
## Change Text Color Using Row Data
|
|
|
|
- Under Cell Background Color for the `title` column, paste the below code:
|
|
|
|
```
|
|
{{rowData.price < 100? 'yellow': 'white'}}
|
|
```
|
|
|
|
The `rowData` identifier can be utilized to reference values from any column within the **Table** component.
|
|
|
|
Now if the value in the price column is lesser than 100, the cell background color will be yellow or else it will be white.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/how-to/change-text-color/conditional-background-color.png" alt="Conditional Background Color" />
|
|
</div>
|
|
|
|
You can use the above methods to change the text and background colors of a cell dynamically.
|
|
|
|
</div> |