Treeview Scrollbar in Python-Tkinter

When working with hierarchical data in graphical user interfaces (GUIs), it's often necessary to display the data in a structured and organized manner. The Treeview widget in Python-Tkinter provides a powerful solution for presenting hierarchical data in a user-friendly way. However, as the number of items in the Treeview grows, it becomes crucial to include a scrollbar to ensure smooth navigation and usability.

Firstly, ensure that you have Python and Tkinter installed on your system. Python 3 is recommended for compatibility and improved features. If you don't have Tkinter installed, you can easily install it using pip, the Python package manager. Open your terminal or command prompt and run the following command −

pip install tk

With Tkinter installed, you'll have access to the powerful GUI toolkit required for building the Treeview widget and adding a scrollbar.

Creating a Treeview

To start, we'll create a basic Treeview widget. Open your favorite text editor or integrated development environment (IDE) and create a new Python file. We'll begin by importing the necessary modules −

import tkinter as tk
from tkinter import ttk

The tkinter module provides the foundation for building GUI applications in Python, and the ttk module contains the themed widgets, including the Treeview widget.

Next, let's create a Tkinter root window and a Treeview widget. Add the following code to your Python file −

root = tk.Tk()

# Create a Treeview widget
tree = ttk.Treeview(root)
tree.pack()

Here, we create a root window using tk.Tk(), which serves as the main window for our application. Then, we create a tree object of the ttk.Treeview class, which represents our Treeview widget. Finally, we use the pack method to display the Treeview widget within the root window.

Adding a Scrollbar

To add a scrollbar to our Treeview, we'll utilize the ttk.Scrollbar widget provided by Tkinter. The scrollbar will enable smooth vertical scrolling within the Treeview when it contains more items than can fit in the available space.

After creating the Treeview widget, add the following code to create the scrollbar and configure the Treeview to use it −

# Create a Scrollbar
scrollbar = ttk.Scrollbar(root, orient="vertical", command=tree.yview)

# Configure the Treeview to use the scrollbar
tree.configure(yscrollcommand=scrollbar.set)

# Place the scrollbar on the right side of the Treeview
scrollbar.pack(side="right", fill="y")

Here, we create a scrollbar object of the ttk.Scrollbar class, specifying the orientation as "vertical" using the orient parameter. The command parameter is set to tree.yview, which associates the scrollbar with the vertical scrolling of the Treeview.

Next, we configure the Treeview to use the scrollbar's set method as its yscrollcommand option. This ensures that the scrollbar controls the Treeview's vertical scrolling.

Finally, we use the pack method to place the scrollbar on the right side of the Treeview widget, making it fill the entire height of the Treeview using the fill="y" option.

With these additions, if you run the Python file now, you'll see the Treeview widget accompanied by a vertical scrollbar on the right side. The scrollbar will allow scrolling through the Treeview's content when necessary.

Populating the Treeview

Now that we have the Treeview and scrollbar set up, let's populate the Treeview with some sample data. This will allow us to observe how the scrollbar behaves when dealing with a larger number of items.

To add columns and items to the Treeview, modify your Python file as follows −

# Add columns to the Treeview
tree["columns"] = ("Name", "Age")

# Define column headings
tree.heading("#0", text="ID")
tree.heading("Name", text="Name")
tree.heading("Age", text="Age")

# Add items to the Treeview
tree.insert("", "end", text="1", values=("John Doe", "30"))
tree.insert("", "end", text="2", values=("Jane Smith", "25"))
tree.insert("", "end", text="3", values=("Mike Johnson", "35"))

Here, we add two columns to the Treeview by setting the columns attribute as a tuple with the column names: "Name" and "Age". The #0 column represents the default first column, which we'll use for displaying IDs. We use the heading method to set the column headings accordingly.

Next, we insert items into the Treeview using the insert method. Each item is represented by a unique ID and has corresponding values for the columns. In this example, we insert three items with IDs 1, 2, and 3, and their respective names and ages.

Styling the Scrollbar

While the basic scrollbar functionality is essential, you may also want to customize its appearance to match the overall theme of your application. Tkinter provides options to modify the style of the scrollbar using the ttk.Style class. Let's explore how we can style the scrollbar to achieve a more cohesive look.

To begin, import the ttk module and create an instance of the ttk.Style class −

from tkinter import ttk

# Create a Style object
style = ttk.Style()

Next, we can configure the style for the scrollbar. In this example, we'll change the background color, handle color, and thickness of the scrollbar. Add the following code after creating the style object −

# Configure the style for the scrollbar
style.configure("Treeview.Scrollbar",
                background="gray",
                troughcolor="light gray",
                gripcount=0,
                gripcolor="white",
                gripinset=2,
                gripborderwidth=0,
                thickness=10)

Here, we use the configure method of the ttk.Style class to customize the appearance of the scrollbar. The "Treeview.Scrollbar" string refers to the specific style element we want to modify.

In this example, we set the background color of the scrollbar to gray, the trough color to light gray, and the handle color to white. The gripcount option is set to 0 to hide the grip, and we adjust the grip appearance using the gripinset and gripborderwidth options. Finally, we set the thickness of the scrollbar to 10 pixels.

To apply the customized style to the scrollbar, associate it with the Treeview widget. Modify the scrollbar creation code as follows −

# Create a Scrollbar with the customized style
scrollbar = ttk.Scrollbar(root, orient="vertical", command=tree.yview, style="Treeview.Scrollbar")

By specifying the style parameter as "Treeview.Scrollbar", the scrollbar will use the customized style defined earlier.

Save the Python file and run it. You should now see the scrollbar with the updated style in the Treeview.

Testing the Scrollbar

Save the Python file and run it. You should see a window with the Treeview widget and a vertical scrollbar on the right side. Try resizing the window or adding more items to the Treeview to see the scrollbar in action.

Conclusion

Here, we explored how to add a scrollbar to a Treeview widget in Python-Tkinter. We started by creating a basic Treeview and then added a vertical scrollbar to enable smooth scrolling through the Treeview's content. We also covered how to style the scrollbar to match the overall theme of your application. Additionally, we learned how to handle scrollbar events, allowing us to execute specific code in response to user interactions. By following these steps, you can enhance your Python-Tkinter applications by incorporating scrollable Treeviews, providing an efficient and user-friendly way to navigate hierarchical data.