mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-02 10:57:20 +00:00
bdfe3270e2
* docs: jira * docs: formatting + Client Credentials grant type * docs: connection string pgsql * docs: parameterized queries mysql * docs: parameterized queries in PostgreSQL * docs: update mysql example * docs: TJDB sql editor * docs: add metadata to REST API * docs: add, update postgresql media * docs: add metadata to graphql * docs: update parameterized queries * docs: add parameterized queries for mssql * docs: add SSL Cert to mysql * docs: TJDB SQL restricted commands * docs: update JIRA token location * docs: update delete issue example * docs: update find user by query example * docs: remove session id from get assignable users * docs: use correct image for get issues for board * docs: update create issue example * docs: update delete issue media * docs: update assignable users media * docs: update examples * docs: update key desc * docs: v2.68.0-Beta
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 `symbol` 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> |