Introduction
Basic Widgets
Toplevel Widgets
Geometry Management
Binding Functions
Working with Images in Tkinter
Tkinter Advance
Applications and Projects
The Treeview
widget in tkinter
is used for displaying tabular data in the form of a tree structure. Often, especially when there are many rows or items, it's beneficial to add a scrollbar to the Treeview
for better navigation.
In this tutorial, we'll show you how to add both vertical and horizontal scrollbars to a Treeview
widget in tkinter
.
tkinter
Tutorial:1. Import Required Libraries:
import tkinter as tk from tkinter import ttk # ttk module provides access to the Tk themed widget set
2. Initialize Main Application Window:
root = tk.Tk() root.title("Treeview Scrollbar Tutorial") root.geometry("500x400")
3. Creating a Treeview with Scrollbars:
First, let's set up the main frame that will hold the Treeview
and its scrollbars:
frame = ttk.Frame(root) frame.pack(pady=20, padx=20, fill=tk.BOTH, expand=True)
Next, create horizontal and vertical scrollbars:
vert_scrollbar = ttk.Scrollbar(frame, orient="vertical") vert_scrollbar.pack(side=tk.RIGHT, fill=tk.Y) hor_scrollbar = ttk.Scrollbar(frame, orient="horizontal") hor_scrollbar.pack(side=tk.BOTTOM, fill=tk.X)
Then, create the Treeview
and connect it to the scrollbars:
tree = ttk.Treeview(frame, yscrollcommand=vert_scrollbar.set, xscrollcommand=hor_scrollbar.set) tree.pack(fill=tk.BOTH, expand=True) vert_scrollbar.config(command=tree.yview) hor_scrollbar.config(command=tree.xview)
4. Adding Data to Treeview:
For our example, let's create a basic table structure:
# Define the columns tree["columns"] = ("Name", "Age", "Address") # Format the columns tree.column("#0", width=0, stretch=tk.NO) tree.column("Name", anchor=tk.W, width=150) tree.column("Age", anchor=tk.W, width=100) tree.column("Address", anchor=tk.W, width=250) # Create the headings tree.heading("#0", text="", anchor=tk.W) tree.heading("Name", text="Name", anchor=tk.W) tree.heading("Age", text="Age", anchor=tk.W) tree.heading("Address", text="Address", anchor=tk.W) # Add data data = [ ("John Doe", 28, "1234 Elm Street"), ("Jane Smith", 34, "2345 Pine Avenue"), # ... You can add more data as required ] for item in data: tree.insert(parent='', index=tk.END, values=item)
5. Mainloop to Run the Application:
root.mainloop()
Complete Code:
When you piece together all the above steps, you'll have a complete application that demonstrates a Treeview
widget in tkinter
with both vertical and horizontal scrollbars. As you add more rows to the Treeview
, you'll be able to navigate easily using the scrollbars.
This tutorial provides an introduction to using the Treeview
widget with scrollbars. You can extend this by adding features like sorting, selecting rows, right-click context menus, and much more.
How to add scrollbar to Tkinter Treeview:
Treeview
in Tkinter, you can use the Scrollbar
widget along with the yscrollcommand
option of the Treeview
widget.import tkinter as tk from tkinter import ttk root = tk.Tk() # Create a Treeview tree = ttk.Treeview(root, columns=("Name", "Age")) # Add data to the Treeview tree.insert("", "end", values=("John Doe", 30)) tree.insert("", "end", values=("Jane Smith", 25)) # ... Add more data ... # Create a vertical scrollbar scrollbar = tk.Scrollbar(root, command=tree.yview) # Set the Treeview's yscrollcommand to the scrollbar's set method tree.configure(yscrollcommand=scrollbar.set) # Pack the Treeview and scrollbar tree.pack(side=tk.LEFT, fill=tk.Y) scrollbar.pack(side=tk.RIGHT, fill=tk.Y) root.mainloop()
Customizing Treeview widget in Tkinter:
Treeview
widget by adjusting options such as column headings, widths, and styles.import tkinter as tk from tkinter import ttk root = tk.Tk() # Create a Treeview with columns and styles tree = ttk.Treeview(root, columns=("Name", "Age"), show="headings") tree.heading("Name", text="Name") tree.heading("Age", text="Age") # Add data to the Treeview tree.insert("", "end", values=("John Doe", 30)) tree.insert("", "end", values=("Jane Smith", 25)) # ... Add more data ... # Create a vertical scrollbar scrollbar = tk.Scrollbar(root, command=tree.yview) # Set the Treeview's yscrollcommand to the scrollbar's set method tree.configure(yscrollcommand=scrollbar.set) # Pack the Treeview and scrollbar tree.pack(side=tk.LEFT, fill=tk.Y) scrollbar.pack(side=tk.RIGHT, fill=tk.Y) root.mainloop()
Expandable Treeview items in Tkinter:
Treeview
expandable by using the tree.item
method to configure the open
option.import tkinter as tk from tkinter import ttk def toggle_expand(item_id): current_state = tree.item(item_id, "open") tree.item(item_id, open=not current_state) root = tk.Tk() # Create a Treeview tree = ttk.Treeview(root, columns=("Name", "Age"), show="headings") # Add data to the Treeview with parent-child relationships parent_item = tree.insert("", "end", values=("Parent", "")) tree.insert(parent_item, "end", values=("Child 1", 10)) tree.insert(parent_item, "end", values=("Child 2", 15)) # Create a vertical scrollbar scrollbar = tk.Scrollbar(root, command=tree.yview) # Set the Treeview's yscrollcommand to the scrollbar's set method tree.configure(yscrollcommand=scrollbar.set) # Pack the Treeview and scrollbar tree.pack(side=tk.LEFT, fill=tk.Y) scrollbar.pack(side=tk.RIGHT, fill=tk.Y) # Create a button to toggle item expansion toggle_button = tk.Button(root, text="Toggle Expand", command=lambda: toggle_expand(parent_item)) toggle_button.pack(pady=10) root.mainloop()
Tkinter Treeview column sorting with scrollbar:
Treeview
by binding the column heading click event to a sorting function.import tkinter as tk from tkinter import ttk def sort_column(col): data = [(tree.set(child, col), child) for child in tree.get_children("")] data.sort() for i, item in enumerate(data): tree.move(item[1], "", i) root = tk.Tk() # Create a Treeview with columns and column headings tree = ttk.Treeview(root, columns=("Name", "Age"), show="headings") tree.heading("Name", text="Name", command=lambda: sort_column("Name")) tree.heading("Age", text="Age", command=lambda: sort_column("Age")) # Add data to the Treeview tree.insert("", "end", values=("John Doe", 30)) tree.insert("", "end", values=("Jane Smith", 25)) # ... Add more data ... # Create a vertical scrollbar scrollbar = tk.Scrollbar(root, command=tree.yview) # Set the Treeview's yscrollcommand to the scrollbar's set method tree.configure(yscrollcommand=scrollbar.set) # Pack the Treeview and scrollbar tree.pack(side=tk.LEFT, fill=tk.Y) scrollbar.pack(side=tk.RIGHT, fill=tk.Y) root.mainloop()