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
which makes it accessible, responsive, and easy to style.
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.
Several examples of how to format and localize numbers.
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
Display tooltips on data and header rows, conditional tooltips,
define tooltips for each cell, customize behavior.
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.