DataTable - 单元格中的仅颜色子字符串

Posted 2023-03-22

【中文标题】DataTable - 单元格中的仅颜色子字符串

【英文标题】：DataTable - Color only substring in a cell

【发布时间】：2021-10-17 00:06:44

【问题描述】：

我想知道是否可以仅将颜色应用于 DataTable 单元格的部分文本

目前我有这张桌子：

那个表的代码是这个：

DataTable(
            id="comparison_table",
            columns=["name": "Version", "id": "Version",
                     "name": "Nº entities", "id": "Nº entities",
                      "name": "Nº types", "id": "Nº types"
                      ],
            style_header=
           
              'fontWeight': 'bold',
              'font-size': '1.1067708333333333vw',
              'text-align': 'center'
           ,
           style_cell='text-align': 'left',
            data=[
        
            "Version": value1,
            "Nº entities": entities_version1,
            "Nº types": types_version1
        ,
        
            "Version": value2,
            "Nº entities": entities_version2 + entity_growth_text ,
            "Nº types": types_version2 + type_growth_text
        
        ],
            fill_width=False,
            style_table=
                'overflowY': 'scroll', 'height': '8.138020833333334vw', 'width': '97.65625vw', 'margin-left': '0.6510416666666666vw'
                         
        )
                ]
                )

我只想为表格第二行中的括号着色。在这种情况下，entity_growth_text 和 type_growth_text 变量。

如果括号内的数字以+开头，颜色应该是green

如果括号内的数字以-开头，则颜色应为red

希望你能帮我解决这个问题。提前致谢。

【问题讨论】：

所以只有括号应该有颜色，而不是里面有什么？

括号和数字都

【参考方案1】：

您可以利用最近添加的功能，该功能允许在降价单元格中使用 html (source)：

import dash
import dash_html_components as html
import dash_table
import pandas as pd
import re

df = pd.DataFrame(
    
        "Version": ["Oct 1st 2016", "June 1st 2021"],
        "Nº entities": ["5765325", "7435957 (+1670632)"],
        "Nº types": ["418", "421 (-3)"],
    
)

pattern = re.compile("(\(.*?)\)")


def color_brackets(value):
    found = re.search(pattern, value)

    if found:
        color = "red"

        if found.group()[1] == "+":
            color = "green"

        substituted = pattern.sub(
            f"<span style='background-color: color;'>found.group()</span>", value
        )
        return substituted

    return value


df["Nº entities"] = df["Nº entities"].apply(color_brackets)
df["Nº types"] = df["Nº types"].apply(color_brackets)


app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dash_table.DataTable(
            css=[dict(selector="p", rule="margin: 0px; text-align: center")],
            style_cell="textAlign": "center",
            data=df.to_dict("records"),
            columns=[
                "name": "Version", "id": "Version",
                
                    "name": "Nº entities",
                    "id": "Nº entities",
                    "presentation": "markdown",
                ,
                "name": "Nº types", "id": "Nº types", "presentation": "markdown",
            ],
            markdown_options="html": True,
        )
    ]
)

if __name__ == "__main__":
    app.run_server()

所以上面的方法是创建一个正则表达式来匹配括号和里面的内容，这样我们就可以用我们可以设置样式的 html 元素包围这个表达式。

结果：