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.

Este exercício faz parte do curso

Building Dashboards with Dash and Plotly

Ver Curso

Instruções de exercício

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.

Exercício interativo prático

Experimente este exercício preenchendo este código de exemplo.

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)

Editar e executar código