Search⌘ K
AI Features
Home
Courses
Mastering Plotly and Dash Data Visualization with Python

DataTable Configuration (Columns and Scroll)

Explore how to configure Dash DataTables by managing column settings and adding horizontal scroll bars for better user experience. Learn techniques like freezing columns, adding ellipses for long text, and adjusting column widths to improve data presentation and interactivity in Python visualization apps.

We'll cover the following...

A simple plot

To compare and contrast different approaches, we will create a simple Plotly visualization in some of our apps. The type of graph we display is not overly important, though, in the following examples, we will show the average pay in certain countries with regard to the top-paid athletes.

Python 3.8
def create_plot(dataset: pd.DataFrame):
    """
    Displays the average total pay for each nation, 
    with nations sorted in ascending order of average pay. 
    """
    country_averages = dataset.groupby(['Nation'])['Total Pay'].mean().reset_index()
    country_averages.sort_values(by='Total Pay', inplace=True)
    fig = px.bar(
        country_averages,
        x='Nation', 
        y='Total Pay',
        color='Total Pay',  # base color on total pay variable
        color_continuous_scale=px.colors.sequential.Viridis_r  # reversed viridis colorscale
    )
    fig.update_layout(
        title_text="Average Total Pay Amongst Top Athlete's",
        title_x=0.5,
    )
    return fig

Let’s consider the above function in detail:

The code defines the function create_plot that takes a dataset as input and returns a Plotly bar plot.

The function displays the average total pay for each nation, with nations sorted in ascending order of average pay.

  • Lines 6–7: Group the dataset by Nation and calculate the mean of the Total Pay column for each group. Reset the index and store the result in the country_averages DataFrame. Sort the country_averages DataFrame by Total Pay in ascending order.

  • Lines 9–15: Create a Plotly bar plot using the px.bar function with the following properties. Use the Nation column as the x-axis and the Total Pay column as the y-axis. Color the bars based on the Total Pay values. Apply a reversed Viridis colorscale to the bars.

  • Lines 17–20: Update the layout of the plot. Set the title text as ...