如何修改Python Dash Table中‘filter data...’的占位符文本？

方法1：为单个列自定义占位符 #

在定义表格列配置时，给目标列添加filter_placeholder属性，即可替换默认的filter data...文本。

import dash
from dash import dash_table, html

app = dash.Dash(__name__)

sample_data = [
    {"name": "Alice", "age": 25, "city": "New York"},
    {"name": "Bob", "age": 30, "city": "London"},
]

column_config = [
    {"name": "姓名", "id": "name", "filter_placeholder": "输入姓名筛选..."},
    {"name": "年龄", "id": "age", "filter_placeholder": "输入年龄筛选..."},
    {"name": "城市", "id": "city", "filter_placeholder": "输入城市筛选..."},
]

app.layout = html.Div([
    dash_table.DataTable(
        data=sample_data,
        columns=column_config,
        filter_action="native",  # 必须启用原生筛选才能显示占位符
        sort_action="native",
        page_size=10
    )
])

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

方法2：全局统一修改所有列的占位符 #

如果需要给所有筛选单元格设置相同的自定义占位符，用CSS全局修改更高效，无需逐个配置列。

import dash
from dash import dash_table, html

app = dash.Dash(__name__)

sample_data = [
    {"name": "Alice", "age": 25, "city": "New York"},
    {"name": "Bob", "age": 30, "city": "London"},
]

column_config = [
    {"name": "姓名", "id": "name"},
    {"name": "年龄", "id": "age"},
    {"name": "城市", "id": "city"},
]

app.layout = html.Div([
    dash_table.DataTable(
        data=sample_data,
        columns=column_config,
        filter_action="native",
        sort_action="native",
        page_size=10
    ),
    # 嵌入自定义CSS修改占位符
    html.Style("""
        .dash-table-container .dash-filter input::placeholder {
            content: "输入关键词筛选...";
            opacity: 1;  /* 避免占位符文本过淡 */
        }
    """)
])

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

注意事项 #

• 必须开启filter_action="native"，否则筛选功能不生效，占位符也不会显示。
• 若同时使用两种方法，单个列的filter_placeholder设置会覆盖全局CSS的效果。

内容的提问来源于stack exchange，提问作者Ritik Puri