Get startedGet started for free

Interactive key stats table

Using graphs to display your data visually is a great way to see aggregated figures at a glance. Yet sometimes, you also need to see more numbers than is feasible to display in common visualization formats.

A key stakeholder in the e-commerce company, the finance department head, has heard of your great work but is someone who needs to see some figures in tabular rather than visual format. He has requested a dashboard displaying some aggregated stats in a tabular format. However, he wonders if you could also include some 'Dash magic' to make it a bit more interactive than his existing Excel spreadsheets?

This exercise is part of the course

Building Dashboards with Dash and Plotly

View Course

Exercise instructions

  • Use the dash_table module FormatTemplate to create a money format to two decimal places for use in constructing the Data Table columns below line 13.
  • Use the columns created on line 18 and the data from the DataFrame created on line 11 to create a DataTable below line 22.
  • Ensure the DataTable has the built-in sorting below line 27.
  • Ensure the DataTable has the built-in filtering below line 29.

Hands-on interactive exercise

Have a go at this exercise by completing this sample code.

import dash
from dash import dcc, html
import plotly.express as px
import dash_table
from dash_table import DataTable, FormatTemplate
import pandas as pd
from dash.dependencies import Input, Output
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 ($)'})

# Set up money format for relevant columns
money_format = FormatTemplate.____(____)
money_cols = ['Total Sales ($)', 'Average Order Value ($)']
data_cols = [x for x in key_stats_tb.columns if x not in money_cols]
d_columns = [{'name': x, 'id': x} for x in data_cols]
d_columns +=[{'name': x, 'id': x, 
              'type':'numeric', 'format': money_format
  			} for x in money_cols]

# Create a Data Table
d_table = ____(
            columns=____,
            data=key_stats_tb.____('records'),
            cell_selectable=False,
            # Add sorting
            ____='____',
            # Add filtering
            filter_action='____'
            )

app = dash.Dash(__name__)

app.layout = html.Div([
  html.Img(src=logo_link, 
        style={'margin':'30px 0px 0px 0px' }),
  html.H1('Sales Aggregations'),
  html.Div(
    children=[
      html.H2('Key Aggregations'),
      d_table
      ],
      style={'width':'850px', 'height':'750px', 'margin':'0 auto'}
    ),
    ], 
  style={'text-align':'center', 'display':'inline-block', 'width':'100%'}
  )

if __name__ == '__main__':
    app.run_server(debug=True)
Edit and Run Code