这是我的系列教程Python+Dash快速web应用开发的第十四期，在前两期中，我们针对dash_table的自定义样式、前后端分页、单元格内容编辑等特点展开了介绍。
而在dash_table中还有很多高级特性，可以极大程度上丰富DataTable()所渲染网页表格的交互能力，今天的文章作为交互表格篇的下篇，我们就来一起学习其中比较实用的一些特性。
上一期文章最后我们学习了通过设置参数editable=True，使得渲染出的表格可以通过鼠标双击进行编辑，而dash_table除此之外，还有更多实用的交互能力：
2.1.1 按列排序普通单列排序
在DataTable()中，我们只需要设置参数sort_action='native'，即可开启列排序功能，此时每一列列名单元格内都会出现部件供我们点击切换排序方式：
app1.py
import dash import dash_table import dash_bootstrap_components as dbc import seaborn as sns df = sns.load_dataset('iris') app = dash.Dash(__name__) app.layout = dbc.Container( [ dash_table.DataTable( data=df.to_dict('records'), columns=[ {'name': column, 'id': column} for column in df.columns ], style_table={ 'height': '500px', 'overflow-y': 'auto' }, sort_action='native' ) ], style={ 'margin-top': '50px' } ) if __name__ == '__main__': app.run_server(debug=True)基于后端排序的多列排序
在DataTable()中设置sort_action='native'时，对应的是按列排序的前端模式，也即是数据一次性灌注到浏览器的前提下进行排序，这种方式不仅不适合大型数据集，而且只支持单列排序。
而当数据渲染方式为后端模式时，我们通过设置参数sort_action='custom'以及sort_mode='multi'，配合在回调中获取属性sort_by中记录的参与排序的列名及升序降序方式，就可以实现多列排序。
我们在上一期的app2.py的基础上修改得到下面的例子：
app2.py
import dash import dash_bootstrap_components as dbc import dash_table from dash.dependencies import Input, Output import seaborn as sns df = sns.load_dataset('iris') df.insert(0, '#', df.index) app = dash.Dash(__name__) app.layout = dbc.Container( [ dbc.Spinner( dash_table.DataTable(, columns=[ {'name': column, 'id': column} for column in df.columns ], page_size=15, # 设置单页显示15行记录行数 page_action='custom', page_current=0, style_header={ 'font-family': 'Times New Romer', 'font-weight': 'bold', 'text-align': 'center' }, style_data={ 'font-family': 'Times New Romer', 'text-align': 'center' }, sort_action='custom', sort_mode='multi' ) ) ], style={ 'margin-top': '50px' } ) @app.callback( [Output('dash-table', 'data'), Output('dash-table', 'page_count')], [Input('dash-table', 'page_current'), Input('dash-table', 'page_size'), Input('dash-table', 'sort_by')] ) def refresh_page_data(page_current, page_size, sort_by): if sort_by: return ( df .sort_values( [col['column_id'] for col in sort_by], ascending=[ col['direction'] == 'asc' for col in sort_by ] ) .iloc[page_current * page_size:(page_current + 1) * page_size] .to_dict('records'), 1 + df.shape[0] // page_size ) return ( df.iloc[page_current * page_size:(page_current + 1) * page_size].to_dict('records'), 1 + df.shape[0] // page_size ) if __name__ == '__main__': app.run_server(debug=True)除了基于指定字段进行排序之外，dash_table还支持列的条件筛选，设置filter_action="native"，就可以开启基础的按列条件筛选功能，此时每一列表头下都会多出供用户输入筛选条件的单元格：
app3.py
import dash import dash_table import dash_bootstrap_components as dbc import seaborn as sns df = sns.load_dataset('iris') app = dash.Dash(__name__) app.layout = dbc.Container( [ dash_table.DataTable( data=df.to_dict('records'), columns=[ {'name': column, 'id': column} for column in df.columns ], # 自定义条件筛选单元格样式 style_filter={ 'font-family': 'Times New Romer', 'background-color': '#e3f2fd' }, style_table={ 'height': '500px', 'overflow-y': 'auto' }, style_header={ 'font-family': 'Times New Romer', 'font-weight': 'bold', 'text-align': 'center' }, style_data={ 'font-family': 'Times New Romer', 'text-align': 'center' }, filter_action="native" ) ], style={ 'margin-top': '50px' } ) if __name__ == '__main__': app.run_server(debug=True)而dash_table中自带的条件筛选语法很丰富，有条件的朋友可以前往https://dash.plotly.com/datatable/filtering了解更多。