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.

First, ensure that you have Python and Tkinter installed on your system. Python 3 is recommended for compatibility and improved features. Note that Tkinter comes pre-installed with Python, so no additional installation is typically needed.

Creating a Basic Treeview Widget

To start, we'll create a basic Treeview widget. We'll begin by importing the necessary modules and creating our application window ?

import tkinter as tk
from tkinter import ttk

# Create the main window
root = tk.Tk()
root.title("Treeview with Scrollbar")
root.geometry("400x300")

# Create a Treeview widget
tree = ttk.Treeview(root)
tree.pack(expand=True, fill="both")

root.mainloop()

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

Adding a Scrollbar to Treeview

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

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.title("Treeview with Scrollbar")
root.geometry("400x300")

# Create a frame to hold the Treeview and Scrollbar
frame = ttk.Frame(root)
frame.pack(expand=True, fill="both", padx=10, pady=10)

# Create a Treeview widget
tree = ttk.Treeview(frame)

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

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

# Pack the widgets
tree.pack(side="left", expand=True, fill="both")
scrollbar.pack(side="right", fill="y")

root.mainloop()

Here, we create a scrollbar with orient="vertical" and associate it with the Treeview using the command=tree.yview parameter. The tree.configure(yscrollcommand=scrollbar.set) ensures that the scrollbar controls the Treeview's vertical scrolling.

Populating the Treeview with Data

Let's populate the Treeview with sample data to see the scrollbar in action ?

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.title("Treeview with Scrollbar")
root.geometry("400x300")

frame = ttk.Frame(root)
frame.pack(expand=True, fill="both", padx=10, pady=10)

# Create Treeview with columns
tree = ttk.Treeview(frame, columns=("Name", "Age"), show="tree headings")

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

# Configure column widths
tree.column("#0", width=50)
tree.column("Name", width=150)
tree.column("Age", width=80)

# Create scrollbar
scrollbar = ttk.Scrollbar(frame, orient="vertical", command=tree.yview)
tree.configure(yscrollcommand=scrollbar.set)

# Add sample data
employees = [
    ("John Doe", "30"),
    ("Jane Smith", "25"),
    ("Mike Johnson", "35"),
    ("Alice Brown", "28"),
    ("Bob Wilson", "42"),
    ("Carol Davis", "31"),
    ("David Lee", "27"),
    ("Eva Martinez", "33"),
    ("Frank Taylor", "39"),
    ("Grace Anderson", "26")
]

for i, (name, age) in enumerate(employees, 1):
    tree.insert("", "end", text=str(i), values=(name, age))

# Pack widgets
tree.pack(side="left", expand=True, fill="both")
scrollbar.pack(side="right", fill="y")

root.mainloop()

Complete Example with Hierarchical Data

Here's a complete example showing hierarchical data with parent and child nodes ?

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.title("Hierarchical Treeview with Scrollbar")
root.geometry("500x400")

frame = ttk.Frame(root)
frame.pack(expand=True, fill="both", padx=10, pady=10)

# Create Treeview
tree = ttk.Treeview(frame, columns=("Department", "Role"), show="tree headings")

# Define headings
tree.heading("#0", text="Employee")
tree.heading("Department", text="Department")
tree.heading("Role", text="Role")

# Configure columns
tree.column("#0", width=200)
tree.column("Department", width=150)
tree.column("Role", width=120)

# Create scrollbar
scrollbar = ttk.Scrollbar(frame, orient="vertical", command=tree.yview)
tree.configure(yscrollcommand=scrollbar.set)

# Add hierarchical data
dept1 = tree.insert("", "end", text="Engineering", values=("Technology", "Department"))
tree.insert(dept1, "end", text="John Smith", values=("Engineering", "Senior Developer"))
tree.insert(dept1, "end", text="Alice Johnson", values=("Engineering", "UI Designer"))
tree.insert(dept1, "end", text="Bob Williams", values=("Engineering", "DevOps Engineer"))

dept2 = tree.insert("", "end", text="Marketing", values=("Business", "Department"))
tree.insert(dept2, "end", text="Carol Davis", values=("Marketing", "Marketing Manager"))
tree.insert(dept2, "end", text="David Brown", values=("Marketing", "Content Writer"))

dept3 = tree.insert("", "end", text="Sales", values=("Business", "Department"))
tree.insert(dept3, "end", text="Eva Wilson", values=("Sales", "Sales Representative"))
tree.insert(dept3, "end", text="Frank Miller", values=("Sales", "Account Manager"))

# Expand all items to show hierarchy
tree.item(dept1, open=True)
tree.item(dept2, open=True)
tree.item(dept3, open=True)

# Pack widgets
tree.pack(side="left", expand=True, fill="both")
scrollbar.pack(side="right", fill="y")

root.mainloop()

Key Features Summary

Conclusion

Adding a scrollbar to a Treeview widget enhances navigation when dealing with large datasets. The scrollbar automatically appears when content exceeds the visible area, providing smooth vertical scrolling. This combination creates an efficient and user-friendly interface for displaying hierarchical data in Python-Tkinter applications.