Dash DataTable

Dash DataTable is an interactive table component designed for
viewing, editing, and exploring large datasets.

DataTable is rendered with standard, semantic HTML <table> markup,
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.

With dash-table v4.0.0 - included in dash v1.0.0 and 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
DataTable with dash v0.x / dash-table v3.x, check out the
Dash 1.0 Migration Guide for the full list of
changes.

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!

– chriddyp

Quickstart

    pip install dash==1.16.1
    
    import dash
    import dash_table
    import pandas as pd
    
    df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
    
    app = dash.Dash(__name__)
    
    app.layout = dash_table.DataTable(
        id='table',
        columns=[{"name": i, "id": i} for i in df.columns],
        data=df.to_dict('records'),
    )
    
    if __name__ == '__main__':
        app.run_server(debug=True)
    

User Guide

  • Reference
  • A comprehensive list of all of the
    DataTable properties.

  • DataTable Height
  • 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.

  • Styling
  • 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!)

  • Conditional Formatting
  • Several examples of how to highlight certain cells,
    rows, or columns based on their value or state.

  • 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:
    - Paging
    - Selecting Rows
    - Sorting Columns
    - Filtering Data

  • 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!

  • Editable DataTable
  • 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:

    • Determining which cell has changed
    • Filtering out null values
    • Adding or removing columns
    • Adding or removing rows
    • Ensuring that a minimum set of rows are visible
    • Running Python computations on certain columns or cells
  • Typing and User Input Processing
  • 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

  • Dropdowns Inside DataTable
  • 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.

  • Virtualization
  • Examples using DataTable virtualization.

  • Filtering Syntax
  • An explanation and examples of filtering syntax for both frontend
    and backend filtering in the DataTable.