如何在Streamlit中实现df.to_html生成表格的可排序功能？

直接用df.to_html生成的是静态HTML表格，本身没有排序交互。要实现排序，需要借助前端表格插件（比如DataTables）增强功能，具体步骤如下：

实现步骤 #

• 给生成的HTML表格添加唯一ID，方便前端JS定位
• 引入DataTables的CSS和JS资源（通过CDN）
• 编写JS代码初始化表格为可排序状态

完整代码示例 #

import pandas as pd
import streamlit as st

df = pd.read_csv('data/AUDCAD_1h.csv')
st.set_page_config(layout="wide")

# 生成带ID的HTML表格
html_table = df.to_html(escape=False, index=False, table_id="sortable-table")

# 拼接DataTables的资源和初始化脚本
html_content = f"""
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

{html_table}

<script>
$(document).ready(function() {{
    $('#sortable-table').DataTable({{
        // 可自定义配置，比如禁用分页、指定默认排序列等
        "paging": false,  // 不需要分页可以关掉
        "ordering": true,
        "info": false     // 隐藏信息栏
    }});
}});
</script>
"""

# 渲染带排序功能的表格
st.write(html_content, unsafe_allow_html=True)

关键说明 #

• 表格IDsortable-table要确保唯一，避免和页面其他元素冲突
• 可以根据需求调整DataTables的配置参数，比如开启分页、搜索框、调整排序默认行为等
• 依赖jQuery和DataTables的CDN资源，确保网络环境可以访问这些资源

内容的提问来源于stack exchange，提问作者Namo Gumba