Dash DataTable (dash.dash_table.DataTable
) is an interactive table component designed for viewing, editing, and exploring large datasets.
This component was written from scratch in React.js specifically
for the Dash community. Its API was designed to be ergonomic
and its behavior is completely customizable through its properties.
DataTable is rendered with standard, semantic HTML <table>
markup,
which makes it accessible, responsive, and easy to style.
Import DataTable with:
from dash import dash_table
The data
and columns
properties are the first two arguments of dash_table_datatable
.
You can set these with
using Dash, DashBootstrapComponents
using CSV, DataFrames
app = dash()
df = CSV.read(download("https://git.io/Juf1t"), DataFrame)
app = dash(external_stylesheets=[dbc_themes.BOOTSTRAP])
app.layout = dbc_container([
dbc_label("Click a cell in the table:"),
dash_datatable(
id="tbl",
columns=[Dict("name" =>i, "id" => i) for i in names(df)],
data = Dict.(pairs.(eachrow(df)))
),
dbc_alert("Click the table", id="tbl_out"),
])
callback!(app,
Output("tbl_out", "children"),
Input("tbl", "active_cell")
) do active_cell
return string(active_cell)
end
run_server(app, "0.0.0.0", debug=true)
A comprehensive list of all of the DataTable properties.
How to set the height of the DataTable. Examples include how to set the height with vertical scroll, pagination, virtualization, and fixed headers.
DataTable Width & Column Width
How to set the width of the table and the columns. Examples include how to handle word wrapping, cell clipping, horizontal scroll, fixed columns, and more.
The style of the DataTable is highly customizable. This chapter includes examples for:
Several examples of how to highlight certain cells, rows, or columns based on their value or state.
Several examples of how to format and localize numbers.
Sorting, Filtering, Selecting, and Paging Natively
The DataTable is interactive. This chapter demonstrates the interactive features of the table and how to wire up these interations to Python callbacks. These actions include:
Display tooltips on data and header rows, conditional tooltips, define tooltips for each cell, customize behavior.
Python-Driven Filtering, Paging, Sorting
In Part 3, the paging, sorting, and filtering was done entirely clientside (in the browser). This means that you need to load all of the data into the table up-front. If your data is large, then this can be prohibitively slow. In this chapter, you’ll learn how to write your own filtering, sorting, and paging backends in Python with Dash. We’ll do the data processing with Pandas but you could write your own routines with SQL or even generate the data on the fly!
The DataTable is editable. Like a spreadsheet, it can be used as an input for controlling models with a variable number of inputs. This chapter includes recipes for:
Typing and User Input Processing
In this chapter, you’ll learn how to configure the table to
Cells can be rendered as editable Dropdowns. This is our first stake in bringing a full typing system to the table. Rendering cells as dropdowns introduces some complexity in the markup and so there are a few limitations that you should be aware of.
Examples using DataTable virtualization.
An explanation and examples of filtering syntax for both frontend and backend filtering in the DataTable.