Virtualization

Deprecation Notice: Dash DataTable is deprecated and will be removed from the core Dash API in Dash 5.0.
We recommend migrating to Dash AG Grid. Install with pip install dash-ag-grid.
See the Getting Started page for an introduction to Dash AG Grid.

In addition to pagination, DataTable also has virtualization capabilities
for viewing large datasets. Virtualization saves browser resources while
still permitting the user to scroll through the entire dataset. It achieves this
by only a rendering a subset of the data at any instant.

The virtualization backend makes a few assumptions about the style of
your DataTable which must be adhered to in order to ensure that the
table scrolls smoothly.

the width of the columns is fixed
the height of the rows is always the same
runtime styling changes will not affect width and height compared to
the table’s first rendering

The example below prevents runtime style changes by fixing the column
widths and setting the white-space CSS property in the cells to normal.

from dash import Dash, dash_table
import pandas as pd


app = Dash()

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/Emissions%20Data.csv').reset_index()
df['Emission'] = df['Emission'].map(lambda x: '{0:.2f}'.format(x))

app.layout = dash_table.DataTable(
        id='table-virtualization',
        data=df.to_dict('records'),
        columns=[
            {'name': i, 'id': i} for i in df.columns
        ],
        fixed_rows={ 'headers': True, 'data': 0 },
        style_cell={
            'whiteSpace': 'normal'
        },
        style_data_conditional=[
            {'if': {'column_id': 'index'},
             'width': '50px'},
            {'if': {'column_id': 'Year'},
             'width': '50px'},
            {'if': {'column_id': 'Country'},
             'width': '100px'},
            {'if': {'column_id': 'Continent'},
             'width': '70px'},
            {'if': {'column_id': 'Emission'},
             'width': '75px'},
        ],
        virtualization=True,
        page_action='none'
)


if __name__ == '__main__':
    app.run(debug=True)