mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-25 23:47:17 +00:00
72fa067550
* Updated the formatting of how to docs for the next and current versions * Used the title cases in the heading * Updated the formatting of how to docs for the next and current versions * Used the title cases in the heading * updated the formatting of inspector, form, cell colors * resolved conflicts * Updated the formatting of bulk update multiple rows, conditionaly format table, delete multiple rows, serverside pagination * Updated access user groups, import external lib in js and python, use axios * fix: border colour, blur * Revert changes to versions.json * Changed the formatting of how to docs * add changes from docs/next to v2.34.0 * update: how to docs * fix: image name create-new-query * fix: image name import-successful.png * fix: image name flatten-js * fix: image name math-js-v2 * update: shorten page titles --------- Co-authored-by: Asjad Ahmed Khan <iitasjad2001@gmail.com> Co-authored-by: Karan Rathod <karan.altcampus@gmail.com>
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'}}>
|
|
|
|
## 1. Start by Creating a New Application and Setting 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'}}>
|
|
|
|
## 2. 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'}}>
|
|
|
|
## 3. 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'}}>
|
|
|
|
## 4. 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> |