With backend paging, we can load data into our table progressively.
Instead of loading all of the data at once, we’ll only load data
as the user requests it when they click on the “previous” and “next”
buttons.
Since backend paging integrates directly with your Dash callbacks, you can
load your data from any Python data source.
from dash import Dash, dash_table, Input, Output, callback
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
df[' index'] = range(1, len(df) + 1)
app = Dash()
PAGE_SIZE = 5
app.layout = dash_table.DataTable(
id='datatable-paging',
columns=[
{"name": i, "id": i} for i in sorted(df.columns)
],
page_current=0,
page_size=PAGE_SIZE,
page_action='custom'
)
@callback(
Output('datatable-paging', 'data'),
Input('datatable-paging', "page_current"),
Input('datatable-paging', "page_size"))
def update_table(page_current,page_size):
return df.iloc[
page_current*page_size:(page_current+ 1)*page_size
].to_dict('records')
if __name__ == '__main__':
app.run(debug=True)
With backend paging, we can have front-end sorting and filtering
but it will only filter and sort the data that exists on the page.
This should be avoided. Your users will expect
that sorting and filtering is happening on the entire dataset and,
with large pages, might not be aware that this is only occurring
on the current page.
Instead, we recommend implementing sorting and filtering on the
backend as well. That is, on the entire underlying dataset.
Note for returning users - changed property names:
- Sorted fields are now in sort_by
, not sorting_settings
- The filter string is now in filter
, not filtering_settings
The pagination menu includes the number of the current page and
the total page count. With native (i.e., frontend) pagination, the
page count is calculated by the table. However, when using backend
pagination, the data are served to the table through a callback;
this makes it impossible for the table to calculate the total page
count. As a consequence, the last-page navigation button is
disabled (although all of the other buttons, as well as the direct
navigation, are still functional).
To get around this, supply a value to the page_count
parameter
of the table. This will serve as the “last page”, which will
re-enable the last-page navigation button and be displayed in the
pagination menu. Please note that you will not be able to use the
pagination menu to navigate to a page that comes after the last
page specified by page_count
!
from dash import Dash, dash_table, dcc, html, Input, Output, callback
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
df[' index'] = range(1, len(df) + 1)
app = Dash()
PAGE_SIZE = 5
app.layout = html.Div([
dash_table.DataTable(
id='datatable-paging-page-count',
columns=[
{"name": i, "id": i} for i in sorted(df.columns)
],
page_current=0,
page_size=PAGE_SIZE,
page_action='custom'
),
html.Br(),
dcc.Checklist(
id='datatable-use-page-count',
options=[
{'label': 'Use page_count', 'value': 'True'}
],
value=['True']
),
'Page count: ',
dcc.Input(
id='datatable-page-count',
type='number',
min=1,
max=29,
value=20
)
])
@callback(
Output('datatable-paging-page-count', 'data'),
Input('datatable-paging-page-count', "page_current"),
Input('datatable-paging-page-count', "page_size"))
def update_table(page_current,page_size):
return df.iloc[
page_current*page_size:(page_current+ 1)*page_size
].to_dict('records')
@callback(
Output('datatable-paging-page-count', 'page_count'),
Input('datatable-use-page-count', 'value'),
Input('datatable-page-count', 'value'))
def update_table(use_page_count, page_count_value):
if len(use_page_count) == 0 or page_count_value is None:
return None
return page_count_value
if __name__ == '__main__':
app.run(debug=True)
from dash import Dash, dash_table, Input, Output, callback
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
df[' index'] = range(1, len(df) + 1)
app = Dash()
PAGE_SIZE = 5
app.layout = dash_table.DataTable(
id='table-paging-and-sorting',
columns=[
{'name': i, 'id': i, 'deletable': True} for i in sorted(df.columns)
],
page_current=0,
page_size=PAGE_SIZE,
page_action='custom',
sort_action='custom',
sort_mode='single',
sort_by=[]
)
@callback(
Output('table-paging-and-sorting', 'data'),
Input('table-paging-and-sorting', "page_current"),
Input('table-paging-and-sorting', "page_size"),
Input('table-paging-and-sorting', 'sort_by'))
def update_table(page_current, page_size, sort_by):
if len(sort_by):
dff = df.sort_values(
sort_by[0]['column_id'],
ascending=sort_by[0]['direction'] == 'asc',
inplace=False
)
else:
# No sort is applied
dff = df
return dff.iloc[
page_current*page_size:(page_current+ 1)*page_size
].to_dict('records')
if __name__ == '__main__':
app.run(debug=True)
Multi-column sort allows you to sort by multiple columns.
This is useful when you have categorical columns with repeated
values and you’re interested in seeing the sorted values for
each category.
In this example, try sorting by continent and then any other column.
from dash import Dash, dash_table, Input, Output, callback
import pandas as pd
app = Dash()
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
PAGE_SIZE = 5
app.layout = dash_table.DataTable(
id='table-multicol-sorting',
columns=[
{"name": i, "id": i} for i in sorted(df.columns)
],
page_current=0,
page_size=PAGE_SIZE,
page_action='custom',
sort_action='custom',
sort_mode='multi',
sort_by=[]
)
@callback(
Output('table-multicol-sorting', "data"),
Input('table-multicol-sorting', "page_current"),
Input('table-multicol-sorting', "page_size"),
Input('table-multicol-sorting', "sort_by"))
def update_table(page_current, page_size, sort_by):
print(sort_by)
if len(sort_by):
dff = df.sort_values(
[col['column_id'] for col in sort_by],
ascending=[
col['direction'] == 'asc'
for col in sort_by
],
inplace=False
)
else:
# No sort is applied
dff = df
return dff.iloc[
page_current*page_size:(page_current+ 1)*page_size
].to_dict('records')
if __name__ == '__main__':
app.run(debug=True)
DataTable’s front-end filtering has its own filtering expression
language.
Currently, backend filtering must parse the same filtering language.
If you write an expression that is not “valid” under the filtering
language, then it will not be passed to the backend.
This limitation will be removed in the future to allow you to
write your own expression query language.
In this example, we’ve written a Pandas backend for the filtering
language. It supports eq
, <
, and >
. For example, try:
eq Asia
in the “continent” column> 5000
in the “gdpPercap” column< 80
in the lifeExp
columnNote that unlike the front-end filtering, our backend filtering
expression language doesn’t require or supportnum()
or wrapping
items in double quotes ("
).
We will improve this syntax in the future,
follow dash-table#169
for more.
from dash import Dash, dash_table, Input, Output, callback
import pandas as pd
app = Dash()
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
PAGE_SIZE = 5
app.layout = dash_table.DataTable(
id='table-filtering',
columns=[
{"name": i, "id": i} for i in sorted(df.columns)
],
page_current=0,
page_size=PAGE_SIZE,
page_action='custom',
filter_action='custom',
filter_query=''
)
operators = [['ge ', '>='],
['le ', '<='],
['lt ', '<'],
['gt ', '>'],
['ne ', '!='],
['eq ', '='],
['contains '],
['datestartswith ']]
def split_filter_part(filter_part):
for operator_type in operators:
for operator in operator_type:
if operator in filter_part:
name_part, value_part = filter_part.split(operator, 1)
name = name_part[name_part.find('{') + 1: name_part.rfind('}')]
value_part = value_part.strip()
v0 = value_part[0]
if (v0 == value_part[-1] and v0 in ("'", '"', '`')):
value = value_part[1: -1].replace('\\' + v0, v0)
else:
try:
value = float(value_part)
except ValueError:
value = value_part
# word operators need spaces after them in the filter string,
# but we don't want these later
return name, operator_type[0].strip(), value
return [None] * 3
@callback(
Output('table-filtering', "data"),
Input('table-filtering', "page_current"),
Input('table-filtering', "page_size"),
Input('table-filtering', "filter_query"))
def update_table(page_current,page_size, filter):
print(filter)
filtering_expressions = filter.split(' && ')
dff = df
for filter_part in filtering_expressions:
col_name, operator, filter_value = split_filter_part(filter_part)
if operator in ('eq', 'ne', 'lt', 'le', 'gt', 'ge'):
# these operators match pandas series operator method names
dff = dff.loc[getattr(dff[col_name], operator)(filter_value)]
elif operator == 'contains':
dff = dff.loc[dff[col_name].str.contains(filter_value)]
elif operator == 'datestartswith':
# this is a simplification of the front-end filtering logic,
# only works with complete fields in standard format
dff = dff.loc[dff[col_name].str.startswith(filter_value)]
return dff.iloc[
page_current*page_size:(page_current+ 1)*page_size
].to_dict('records')
if __name__ == '__main__':
app.run(debug=True)
from dash import Dash, dash_table, Input, Output, callback
import pandas as pd
app = Dash()
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
PAGE_SIZE = 5
app.layout = dash_table.DataTable(
id='table-sorting-filtering',
columns=[
{'name': i, 'id': i, 'deletable': True} for i in sorted(df.columns)
],
page_current= 0,
page_size= PAGE_SIZE,
page_action='custom',
filter_action='custom',
filter_query='',
sort_action='custom',
sort_mode='multi',
sort_by=[]
)
operators = [['ge ', '>='],
['le ', '<='],
['lt ', '<'],
['gt ', '>'],
['ne ', '!='],
['eq ', '='],
['contains '],
['datestartswith ']]
def split_filter_part(filter_part):
for operator_type in operators:
for operator in operator_type:
if operator in filter_part:
name_part, value_part = filter_part.split(operator, 1)
name = name_part[name_part.find('{') + 1: name_part.rfind('}')]
value_part = value_part.strip()
v0 = value_part[0]
if (v0 == value_part[-1] and v0 in ("'", '"', '`')):
value = value_part[1: -1].replace('\\' + v0, v0)
else:
try:
value = float(value_part)
except ValueError:
value = value_part
# word operators need spaces after them in the filter string,
# but we don't want these later
return name, operator_type[0].strip(), value
return [None] * 3
@callback(
Output('table-sorting-filtering', 'data'),
Input('table-sorting-filtering', "page_current"),
Input('table-sorting-filtering', "page_size"),
Input('table-sorting-filtering', 'sort_by'),
Input('table-sorting-filtering', 'filter_query'))
def update_table(page_current, page_size, sort_by, filter):
filtering_expressions = filter.split(' && ')
dff = df
for filter_part in filtering_expressions:
col_name, operator, filter_value = split_filter_part(filter_part)
if operator in ('eq', 'ne', 'lt', 'le', 'gt', 'ge'):
# these operators match pandas series operator method names
dff = dff.loc[getattr(dff[col_name], operator)(filter_value)]
elif operator == 'contains':
dff = dff.loc[dff[col_name].str.contains(filter_value)]
elif operator == 'datestartswith':
# this is a simplification of the front-end filtering logic,
# only works with complete fields in standard format
dff = dff.loc[dff[col_name].str.startswith(filter_value)]
if len(sort_by):
dff = dff.sort_values(
[col['column_id'] for col in sort_by],
ascending=[
col['direction'] == 'asc'
for col in sort_by
],
inplace=False
)
page = page_current
size = page_size
return dff.iloc[page * size: (page + 1) * size].to_dict('records')
if __name__ == '__main__':
app.run(debug=True)
This final example ties it all together: the graph component
displays the current page of the data
.
from dash import Dash, dash_table, dcc, html, Input, Output, callback
import pandas as pd
app = Dash()
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
PAGE_SIZE = 5
app.layout = html.Div(
className="row",
children=[
html.Div(
dash_table.DataTable(
id='table-paging-with-graph',
columns=[
{"name": i, "id": i} for i in sorted(df.columns)
],
page_current=0,
page_size=20,
page_action='custom',
filter_action='custom',
filter_query='',
sort_action='custom',
sort_mode='multi',
sort_by=[]
),
style={'height': 750, 'overflowY': 'scroll'},
className='six columns'
),
html.Div(
id='table-paging-with-graph-container',
className="five columns"
)
]
)
operators = [['ge ', '>='],
['le ', '<='],
['lt ', '<'],
['gt ', '>'],
['ne ', '!='],
['eq ', '='],
['contains '],
['datestartswith ']]
def split_filter_part(filter_part):
for operator_type in operators:
for operator in operator_type:
if operator in filter_part:
name_part, value_part = filter_part.split(operator, 1)
name = name_part[name_part.find('{') + 1: name_part.rfind('}')]
value_part = value_part.strip()
v0 = value_part[0]
if (v0 == value_part[-1] and v0 in ("'", '"', '`')):
value = value_part[1: -1].replace('\\' + v0, v0)
else:
try:
value = float(value_part)
except ValueError:
value = value_part
# word operators need spaces after them in the filter string,
# but we don't want these later
return name, operator_type[0].strip(), value
return [None] * 3
@callback(
Output('table-paging-with-graph', "data"),
Input('table-paging-with-graph', "page_current"),
Input('table-paging-with-graph', "page_size"),
Input('table-paging-with-graph', "sort_by"),
Input('table-paging-with-graph', "filter_query"))
def update_table(page_current, page_size, sort_by, filter):
filtering_expressions = filter.split(' && ')
dff = df
for filter_part in filtering_expressions:
col_name, operator, filter_value = split_filter_part(filter_part)
if operator in ('eq', 'ne', 'lt', 'le', 'gt', 'ge'):
# these operators match pandas series operator method names
dff = dff.loc[getattr(dff[col_name], operator)(filter_value)]
elif operator == 'contains':
dff = dff.loc[dff[col_name].str.contains(filter_value)]
elif operator == 'datestartswith':
# this is a simplification of the front-end filtering logic,
# only works with complete fields in standard format
dff = dff.loc[dff[col_name].str.startswith(filter_value)]
if len(sort_by):
dff = dff.sort_values(
[col['column_id'] for col in sort_by],
ascending=[
col['direction'] == 'asc'
for col in sort_by
],
inplace=False
)
return dff.iloc[
page_current*page_size: (page_current + 1)*page_size
].to_dict('records')
@callback(
Output('table-paging-with-graph-container', "children"),
Input('table-paging-with-graph', "data"))
def update_graph(rows):
dff = pd.DataFrame(rows)
return html.Div(
[
dcc.Graph(
id=column,
figure={
"data": [
{
"x": dff["country"],
"y": dff[column] if column in dff else [],
"type": "bar",
"marker": {"color": "#0074D9"},
}
],
"layout": {
"xaxis": {"automargin": True},
"yaxis": {"automargin": True},
"height": 250,
"margin": {"t": 10, "l": 10, "r": 10},
},
},
)
for column in ["pop", "lifeExp", "gdpPercap"]
]
)
if __name__ == '__main__':
app.run(debug=True)