mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-23 14:38:00 +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>
2.8 KiB
2.8 KiB
| id | title |
|---|---|
| access-cellvalue-rowdata | Dynamically Change Cell Colors in Table |
This guide shows how to change the text color and background color of certain cells in a Table component based on specific conditions.
1. Start by Creating a New Application and Setting up the Data Source
- Create a new app and add a Table component to the canvas.
- Open the Query Panel at the bottom and click on the
+ Addbutton. - 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.
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}}
3. Change Text Color Based on Cell Value
- Select the Table component and go to Columns.
- For the
categorycolumn, 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.
You can use also Hex color codes for more color options.
4. Change Text Color Using Row Data
- Under Cell Background Color for the
symbolcolumn, 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.
You can use the above methods to change the text and background colors of a cell dynamically.