Kom igångKom igång gratis

Paginering av en nyckelstatistiktabell

Nyckelstatistiktabellen som skapades i föregående lektion var ett värdefullt tillskott till det globala e-handelsföretagets analysverktyg. Den var dock alldeles för lång!

Låt oss åtgärda det med Dash AG Grids inbyggda pagineringsfunktion. Det förbättrar appens användbarhet avsevärt och gör det enkelt för användarna att navigera mellan olika delar av datan efter behov.

Den här övningen är en del av kursen

Bygg dashboards med Dash och Plotly

Visa kurs

Övningsinstruktioner

  • Skapa ett Dash AG Grid-objekt kallat grid med funktionen AgGrid nedanför rad 21.
  • Aktivera paginering för grid genom att ange parametern pagination nedanför rad 25.
  • Begränsa varje sida till 7 rader genom att ange parametern paginationPageSize nedanför rad 28.

Interaktiv övning med praktiskt arbete

Testa den här övningen genom att slutföra den här exempelkoden.

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
from dash_ag_grid import AgGrid
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
key_stats_tb = ecom_sales.groupby(['Country','Major Category', 'Minor Category'])['OrderValue'].agg(['sum', 'count', 'mean']).reset_index().rename(columns={'count':'Sales Volume', 'sum':'Total Sales ($)', 'mean':'Average Order Value ($)'})

money_fmt = {
  "function": (
    """params.value.toLocaleString(
    'en-US', {style: 'currency', currency: 'USD'})""")}

column_defs = [
  {"field": "Major Category"},
  {"field": "Total Sales ($)", "valueFormatter": money_fmt},
  {"field": "Average Order Value ($)", "valueFormatter": money_fmt},
  {"field": "Sales Volume"}
]

# Create a grid
grid = ____(
  columnDefs=column_defs,
  rowData=key_stats_tb.to_dict("records"),
  # Turn on pagination
  dashGridOptions={
    "____": ____,        
    # Show 7 rows per page
    "____": ____}
)

app = Dash()
app.layout = [
  html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px'}),
  html.H1('Sales Aggregations'),
  html.Div([
    html.H2('Key Aggregations'),
    grid],
    style={'width':'850px', 'height':'750px', 'margin':'0 auto'})
]

if __name__ == '__main__':
    app.run(debug=True)
Redigera och kör kod