Dash DataTable is an interactive table component designed for
viewing, editing, and exploring large datasets.
DataTable is rendered with standard, semantic HTML
which makes it accessible, responsive, and easy to style.
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.
7 months in the making, this is the most complex Dash
component that Plotly has written, all from the ground-up
using React and TypeScript. DataTable was designed with a
featureset that allows that Dash users to create complex,
spreadsheet driven applications with no compromises.
We’re excited to continue to work with users and companies
that invest in DataTable’s future.
dash-table v4.0.0- included in
dash v1.0.0and released on
June 20, 2019 - we consider the API stable. We don’t expect any
breaking changes any time soon, but if there are they will be
accompanied by a new major version of dash. If you’ve been using
dash-table v3.x, check out the
Dash 1.0 Migration Guide for the full list of
Otherwise, check out DataTable in the docs below.
If you make something cool with it, we’d love to see it! Share it
on the community forum!
A comprehensive list of all of the
How to set the height of the DataTable.
Examples include how to set the height with
vertical scroll, pagination, virtualization, and
How to set the width of the table and the columns.
Examples include how to handle word wrapping,
cell clipping, horizontal scroll, fixed columns,
The style of the DataTable is highly customizable. This chapter
includes examples for:
- Displaying multiple rows of headers
- Text alignment
- Styling the table as a list view
- Changing the colors (including a dark theme!)
Several examples of how to highlight certain cells,
rows, or columns based on their value or state.
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:
- Selecting Rows
- Sorting Columns
- Filtering Data
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
This chapter includes recipes for:
In this chapter, you’ll learn how to configure the table to
- assign the column type
- change the data presentation
- change the data formatting
- validate or coerce user data input
- apply default behavior for valid and invalid data
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
Examples using DataTable virtualization.
An explanation and examples of filtering syntax for both frontend
and backend filtering in the DataTable.