ToolJet Table 组件条件格式指南：用 cellValue 与 rowData 动态控制单元格文字与背景色

ToolJet Table 组件条件格式指南用 cellValue 与 rowData 动态控制单元格文字与背景色【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet本篇指南讲解如何在 ToolJet 的Table组件中实现高级条件格式Conditional Formatting通过一段 JavaScript 表达式让单元格的文本颜色与背景颜色随数据内容动态变化。文章以 REST API 数据源为示例完整走通「建应用 → 拉数据 → 绑定表格 → 配置条件格式」的链路并给出基于cellValue与基于rowData的两类共四个可直接复用的表达式示例。读完你将掌握 Table 组件条件格式的配置入口、可用标识符、表达式写法以及它在源码层面的解析原理。一、条件格式的原理cellValue 与 rowData 两个标识符在 ToolJet 的 Table 组件中每一列都可以配置独立的样式属性。条件格式的核心思想是把「颜色」本身当作一个可以动态求值的属性输入{{ ... }}表达式表达式返回的值就是最终渲染的颜色。从源码看单元格背景色的求值发生在每一行渲染时。在 TableRow.jsx 中表格通过getResolvedValue解析列定义里的cellBackgroundColor元数据const resolvedCellBackgroundColor getResolvedValue(cell.column.columnDef?.meta?.cellBackgroundColor, { rowData: row.original, cellValue: cell.getValue(), });这里传入的rowData与cellValue正是条件格式表达式里可以引用的仅有两个标识符cellValue当前单元格的值本列数据rowData当前整行的数据对象可以访问该行所有列的字段。这也是官方文档明确提醒的约束条件格式表达式中只能用cellValue和rowData作为变量其余上下文变量不可用。二、第一步创建应用并配置数据源新建一个应用向画布拖入一个Table组件。打开底部Query Panel点击 Add按钮新建查询。数据源选择REST API方法Method设为GET。在 URL 中填入如下接口地址https://fakestoreapi.com/products点击Preview按钮预览查询返回的数据确认无误后点击Run执行查询。执行成功后查询会以默认名称restapi1保存后续可以通过queries.restapi1.data引用它的返回结果。提示示例使用的是公开的 Fake Store API返回的是带title、price、category、rating等字段的商品列表非常适合用来演示「按数值区间变色」「按分类变色」等场景。实际使用时替换为任意 REST 接口或 ToolJet 支持的其他数据源即可。三、第二步把查询数据显示到表格收起 Query Panel点击画布上的Table组件打开右侧属性面板。在Data属性中填入{{queries.restapi1.data}}保存后表格即会渲染查询返回的商品数据。此时各列的列类型Column Type默认为Default可以直接进入下一步配置条件格式。四、第三步开启条件格式在 Table 组件的属性面板中找到Columns属性展开列管理。选中要配置的列例如category列。当该列的列类型为Default或String时即可为该列设置Text color文本颜色与Cell background color单元格背景颜色两个条件格式属性。结合源码可以确认这两个属性的支持范围更广。在 StylesTabElements.jsx 中以下列类型都会渲染出「Text color / Cell color」配置项string、default、number、json、markdown、html、select、text、newMultiSelect、tagsV2、datepicker等其中boolean列只提供背景色配置不提供文本颜色配置。link、rating、button等特殊列类型则使用各自独立的颜色属性如linkColor、selectedBgColorStars等。在 Text color 或 Cell background color 的输入框中用{{ }}包裹一段 JS 表达式即可。表达式最终返回的颜色值可以是命名颜色如red、green、cyan十六进制色值如#D9534F、#5CB85CCSS 支持的其他颜色表示如rgb(...)。五、基于 cellValue 的条件格式cellValue代表当前单元格自身的值适合做「单列数值/文本驱动的变色」。示例 1按单元格数值切换文本颜色选中Rate列该列是商品评分取值范围 1~5列类型为Default/String在Text color属性中输入{{cellValue 2 ? red : cellValue 2 cellValue 3 ? Orange : green}}规则解读条件文本颜色cellValue 2红色redcellValue 2 cellValue 3橙色Orange其余情况 3绿色green示例 2按单元格数值切换背景色仍然选中Rate列在Cell background color属性中输入{{cellValue 4 ? lightgreen : cellValue 3 ? lightyellow : lightcoral}}规则解读条件背景颜色cellValue 4浅绿lightgreencellValue 3且 4浅黄lightyellowcellValue 3浅珊瑚色lightcoral六、基于 rowData 的条件格式rowData代表整行数据对象可以用它引用其他列的字段实现「跨列联动」的配色。访问嵌套字段时直接使用点号语法例如rowData.rating.rate。示例 1按其他列的值切换文本颜色选中Title列在Text color属性中输入{{rowData.price 50 ? #D9534F : (rowData.rating.rate 4 ? #5CB85C : rowData.rating.rate 3 ? #F0AD4E : #D9534F )}}规则解读条件文本颜色rowData.price 50红色#D9534FrowData.rating.rate 4绿色#5CB85CrowData.rating.rate 3黄色#F0AD4E其余情况红色#D9534F这个例子展示了条件格式的典型用法Title列的文字颜色由同一行price与rating两列的值共同决定。示例 2按分类字段切换背景色继续选中Title列在Cell background color属性中输入{{rowData.category electronics ? cyan : rowData.category jewelery ? pink : lightgray}}规则解读条件背景颜色rowData.category electronics青色cyanrowData.category jewelery粉色pink其余分类浅灰lightgray七、源码级补充条件格式的求值与回退逻辑理解底层实现有助于写出更稳的表达式背景色求值如上文所示TableRow.jsx在渲染每个td前先用getResolvedValue解析cellBackgroundColor表达式传入rowData与cellValue两个变量把解析结果直接写入单元格的内联样式backgroundColor。默认回退与固定列特殊处理在 TableRow.jsx 中如果条件格式解析结果为空undefined、null、、inherit、transparent且该列是固定列pinned背景色会回退到固定的表面色变量否则回退为inherit继承表格默认样式。因此表达式未命中任何分支时单元格会保持默认外观这为「默认样式兜底」提供了便利。文本颜色回退在 useTextColor.js 中若列级文本颜色未设置或等于默认值#11181C则回退到 Table 组件级样式表里的textColor。这意味着你可以在表格级别设置统一文字色再在特定列上用条件格式局部覆盖。行数据来源表达式中的rowData即row.original未经表格处理前的原始行数据所以你可以放心地访问原始 API 返回的任意字段包括嵌套对象如rowData.rating.rate。八、进阶实践建议表达式保持简洁条件格式表达式本质上是一行 JS建议控制分支数量。分支过多时先拆分逻辑或改用颜色映射表避免可读性下降。颜色值统一风格命名颜色与十六进制色值可以混用但同一批规则建议统一便于后期维护。默认分支兜底务必让最后一个else分支返回一个明确颜色或让条件覆盖所有情况避免出现「部分行没变色」的意外虽然按源码逻辑会回退到默认样式。与其他数据源复用条件格式属性与数据源无关REST API、PostgreSQL、ToolJet Database 等数据源的查询结果都可以直接套用cellValue/rowData表达式。相关联文档关于在 Table 中动态取用单元格值的更多技巧可参考 access-cellvalue-rowdata。总结ToolJet 的 Table 组件把条件格式做成了「列属性上的表达式」通过cellValue与rowData两个标识符即可实现从单列数值、跨列字段到嵌套字段的任意动态配色文本颜色用Text color属性单元格背景色用Cell background color属性表达式返回命名颜色或十六进制色值即可生效。掌握这套写法后你可以轻松做出评分分档、价格预警、分类着色等数据可视化效果让表格信息一目了然。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考