Virtualization

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.

using Dash

using CSV, DataFrames 

df = CSV.read(download("https://raw.githubusercontent.com/plotly/datasets/master/Emissions%20Data.csv"), DataFrame)

app = dash()

app.layout = dash_datatable(
        id="table-virtualization",
        data=Dict.(pairs.(eachrow(df))),
        columns=[
            Dict("name"=> i, "id"=> i) for i in names(df)
        ],
        fixed_rows=Dict( "headers"=> true, "data"=> 0 ),
        style_cell=Dict(
            "whiteSpace"=> "normal"
        ),
        style_data_conditional=[
            Dict("if"=> Dict("column_id"=> "index"),
             "width"=> "50px"),
            Dict("if"=> Dict("column_id"=> "Year"),
             "width"=> "50px"),
            Dict("if"=> Dict("column_id"=> "Country"),
             "width"=> "100px"),
            Dict("if"=> Dict("column_id"=> "Continent"),
             "width"=> "70px"),
            Dict("if"=> Dict("column_id"=> "Emission"),
             "width"=> "75px"),
        ],
        virtualization=true,
        page_action="none"
)

run_server(app, "0.0.0.0", debug=true)
index
Year
Country
Continent
Emission
0
2008
Aruba
South America
24.75
1
2009
Aruba
South America
24.88
2
2010
Aruba
South America
24.18
3
2011
Aruba
South America
23.92
4
2008
Andorra
Europe
6.30
5
2009
Andorra
Europe
6.05
6
2010
Andorra
Europe
6.12
7
2011
Andorra
Europe
5.97
8
2008
Afghanistan
Asia
0.16
9
2009
Afghanistan
Asia
0.25
10
2010
Afghanistan
Asia
0.30
11
2011
Afghanistan
Asia
0.43
12
2008
Angola
Africa
1.37
13
2009
Angola
Africa
1.43
14
2010
Angola
Africa
1.40
15
2011
Angola
Africa
1.35
16
2008
Albania
Europe
1.58
17
2009
Albania
Europe
1.53