Get startedGet started for free

Styling a key stats table

The finance department head loved the key stats table you created for them previously. However, being a big fan of Excel, he has requested some additional formatting of the table.

Specifically, he has requested:

  • All the cell contents should align left
  • The background of the cells of the two money columns should have a faded yellow background and bright yellow header
  • The other column headers should have a light blue background.

This exercise is part of the course

Building Dashboards with Dash and Plotly

View Course

Exercise instructions

  • Ensure that the Data Table's cell contents are left-aligned below line 30.
  • Style the background color of the columns in money_cols to have a background color of 'rgb(252, 252, 184)' and center-aligned text below line 32.
  • Style all headers to have a background color of 'rgb(168, 255, 245)' below line 43.
  • Style just the columns in money_cols to have a background color of 'rgb(252, 252, 3)' below line 45.

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 ($)'})

money_format = FormatTemplate.money(2)
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]

d_table = DataTable(
            columns=d_columns,
            data=key_stats_tb.to_dict('records'),
            cell_selectable=False,
            sort_action='native',
            filter_action='native',
            page_action='native',
            page_current=0,
            page_size=10,
  			# Align all cell contents left
  			____=({'textAlign':'____'}),
  			# Style the background of money columns
  			____=[
            {
              'if': 
			{'column_id':'____'},
              'background-color':'____','textAlign':'____'},
              {
              'if': 
			{'column_id':'____'},
              'background-color':'____','textAlign':'____'}
            ],
 			# Style all headers
  			____={'background-color':'____'},
  			# Style money header columns
  			____=[
            {
              'if': 
			{'column_id':'____'},
              'background-color':'____'},
              {
              'if': 
			{'column_id':'____'},
              'background-color':'____'}
            ],
  			
            )

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