9. Making Basic Tables with Plotly#

Tables serve as a powerful complement to graphs and charts, providing a clear and structured way to present concrete data values. While visual elements like bar charts or scatter plots offer quick insights and trends at a glance, data tables cater to those who need exact numbers, summaries, detailed comparisons, or access to raw data alongside visual illustrations.

Plotly, makes it simple to integrate such tables directly into your projects using the go.Table function. The go.Table function in Plotly allows for the creation of richly styled tables, enabling customization of fonts, colors, borders, and even conditional formatting. This flexibility ensures that your tables can be tailored to match the design of your visualizations while highlighting key insights effectively.

Adding data tables alongside visualizations not only aids in storytelling but also provides context, allowing users to explore and verify the data underlying the visual trends. In this recipe, we’ll walk you through the steps to create a clean and interactive data table using go.Table.

Getting ready#

For this recipe we will create a small data set of student names and marks.

import pandas as pd

df = pd.DataFrame({'Names':['Ana', 'Bert', 'Charlie', 'David'], 'Marks' : [95, 85, 75, 95]})

df.head()
Names Marks
0 Ana 95
1 Bert 85
2 Charlie 75
3 David 95 
df.values

array([['Ana', 95],
       ['Bert', 85],
       ['Charlie', 75],
       ['David', 95]], dtype=object)

How to do it#

  1. Import the Plotly Graph objects submodule as go

import plotly.graph_objects as go

  1. Use the go.Table function to define your table. Specify the headers and cells arguments using the columns and values of the Data Frame df. This creates an object of type plotly.graph_objs._table.Table

table = go.Table(header=dict(values=df.columns), cells=dict(values=df.T))

type(table)

plotly.graph_objs._table.Table

  1. Add this object as the data in a Figure object created using the go.Figure function

fig = go.Figure(data=table)
fig.show()

Notice that your data does not require to be in a DataFrame to be used. We can simply create the Table object by passing the values for both header and cells explicitely, as follows

fig = go.Figure(data=[go.Table(header=dict(values=['Name', 'Mark']),
                               cells=dict(values=[['Ana', 'Bert', 'Charlie', 'David'], 
                                                  [95, 85, 75, 95]])
                               )])
fig.show()

  1. Customise the aesthetics of the table by using

  • line_color

  • fill_color

  • aling

fig = go.Figure(data=[go.Table(header=dict(values=['Name', 'Mark'],                 
                                           line_color='darkslategray',
                                           fill_color='lightskyblue',
                                           align='left'),
                               cells=dict(values=[['Ana', 'Bert', 'Charlie', 'David'], 
                                                  [95, 85, 75, 95]],
                                          line_color='darkslategray',
                                          fill_color='lightcyan',
                                          align=['left', 'center']
                                          ),
                               
                               )
                     ])
fig.show()

  1. Customise the title and the dimensions of the table by using the method update_layout on the Figure object

fig = go.Figure(data=[go.Table(header=dict(values=['Name', 'Mark'],                 
                                           line_color='darkslategray',
                                           fill_color='lightskyblue',
                                           align='left'),
                               cells=dict(values=[['Ana', 'Bert', 'Charlie', 'David'], 
                                                  [95, 85, 75, 95]],
                                          line_color='darkslategray',
                                          fill_color='lightcyan',
                                          align=['left', 'center']
                                          ),
                               
                               )
                     ])

fig.update_layout(
    title="Mathematic Test Marks Data Table",
    width=800,
    height=400
)
fig.show()