Tkinter Treeview

Summary: in this tutorial, you’ll learn about the Tkinter Treeview widget and how to use it to display both tabular and hierarchical data.

Introduction to the Tkinter Treeview widget

A Treeview widget allows you to display data in both tabular and hierarchical structures.

To create a Treeview widget, you use the ttk.Treeview class:

tree = ttk.Treeview(container, **options)
Code language: Python (python)

A Treeview widget holds a list of items. Each item has one or more columns.

The first column may contain text and an icon that indicates whether you can expand it or not.

The remaining columns contain values that you want to display for each row.

The first row of the Treeview consists of headings that identify each column by its name.

Using Tkinter Treeview to display tabular data

The following program shows how to use the Treeview widget to display tabular data:

import tkinter as tk from tkinter import ttk from tkinter.messagebox import showinfo root = tk.Tk() root.title('Treeview demo') root.geometry('620x200') # columns columns = ('#1', '#2', '#3') tree = ttk.Treeview(root, columns=columns, show='headings') # define headings tree.heading('#1', text='First Name') tree.heading('#2', text='Last Name') tree.heading('#3', text='Email') # generate sample data contacts = [] for n in range(1, 100): contacts.append((f'first {n}', f'last {n}', f'email{n}@example.com')) # adding data to the treeview for contact in contacts: tree.insert('', tk.END, values=contact) # bind the select event def item_selected(event): for selected_item in tree.selection(): # dictionary item = tree.item(selected_item) # list record = item['values'] # showinfo(title='Information', message=','.join(record)) tree.bind('<<TreeviewSelect>>', item_selected) tree.grid(row=0, column=0, sticky='nsew') # add a scrollbar scrollbar = ttk.Scrollbar(root, orient=tk.VERTICAL, command=tree.yview) tree.configure(yscroll=scrollbar.set) scrollbar.grid(row=0, column=1, sticky='ns') # run the app root.mainloop()
Code language: Python (python)

Output:

How it works.

First, import tkinter module, ttk submodule, and the showinfo from tkinter.messagebox:

import tkinter as tk from tkinter import ttk from tkinter.messagebox import showinfo
Code language: Python (python)

Second, create the root window, set its title and size:

root = tk.Tk() root.title('Treeview demo') root.geometry('620x200')
Code language: Python (python)

Third, define identifiers for columns:

columns = ('#1', '#2', '#3')
Code language: Python (python)

Fourth, create a Tkinter Treeview widget:

tree = ttk.Treeview(root, columns=columns, show='headings')
Code language: Python (python)

In this code, we passed the columns to the columns option. The show=’heading’ hide the first column (column #0) of the Treeview.

The show option accepts one of the following values:

  • 'tree' – shows the column #0
  • 'heading' – shows the header row
  • 'tree headings' – shows both column #0 and the header row. This is the default value.
  • '' – doesn’t show the column #0 or the header row

Fifth, specify the headings for the columns:

tree.heading('#1', text='First Name') tree.heading('#2', text='Last Name') tree.heading('#3', text='Email')
Code language: Python (python)

Sixth, generate a list of tuples for displaying on the Treeview:

contacts = [] for n in range(1, 100): contacts.append((f'first {n}', f'last {n}', f'email{n}@example.com'))
Code language: JavaScript (javascript)

Seventh, create new items, one by one, by using the insert() method of the Treeview object:

for contact in contacts: tree.insert('', tk.END, values=contact)
Code language: Python (python)

Eight, define a function to handle the <> event. When you select one or more items, the program will show a message box:

# bind the select event def item_selected(event): for selected_item in tree.selection(): # dictionary item = tree.item(selected_item) # list record = item['values'] # showinfo(title='Information', message=','.join(record)) tree.bind('<<TreeviewSelect>>', item_selected)
Code language: Python (python)

Ninth, place the Treeview widget on the root window:

tree.grid(row=0, column=0, sticky='nsew')
Code language: Python (python)

Tenth, add a vertical scrollbar to to the Treeview widget:

# add a scrollbar scrollbar = ttk.Scrollbar(root, orient=tk.VERTICAL, command=tree.yview) tree.configure(yscroll=scrollbar.set) scrollbar.grid(row=0, column=1, sticky='ns')
Code language: PHP (php)

Finally, display the root window:

# run the app root.mainloop()
Code language: Python (python)

Using Tkinter Treeview to display hierarchical data

The following program illustrates how to use the TreeView widget to display hierarchical data:

import tkinter as tk from tkinter import ttk from tkinter.messagebox import showinfo # create root window root = tk.Tk() root.title('Treeview Demo - Hierarchical Data') root.geometry('400x200') # configure the grid layout root.rowconfigure(0, weight=1) root.columnconfigure(0, weight=1) # create a treeview tree = ttk.Treeview(root) tree.heading('#0', text='Departments', anchor='w') # adding data tree.insert('', tk.END, text='Administration', iid=0, open=False) tree.insert('', tk.END, text='Logistics', iid=1, open=False) tree.insert('', tk.END, text='Sales', iid=2, open=False) tree.insert('', tk.END, text='Finance', iid=3, open=False) tree.insert('', tk.END, text='IT', iid=4, open=False) # adding children of first node tree.insert('', tk.END, text='John Doe', iid=5, open=False) tree.insert('', tk.END, text='Jane Doe', iid=6, open=False) tree.move(5, 0, 0) tree.move(6, 0, 1) # place the Treeview widget on the root window tree.grid(row=0, column=0, sticky='nsew') # run the app root.mainloop()
Code language: Python (python)

Output:

How it works.

We’ll focus on the Treeview widget part.

First, create a Treeview widget and set its heading.

tree = ttk.Treeview(root) tree.heading('#0', text='Departments', anchor='w')
Code language: JavaScript (javascript)

This Treeview widget has only one column.

Second, add items to the TreeView widget:

tree.insert('', tk.END, text='Administration', iid=0, open=False) tree.insert('', tk.END, text='Logistics', iid=1, open=False) tree.insert('', tk.END, text='Sales', iid=2, open=False) tree.insert('', tk.END, text='Finance', iid=3, open=False) tree.insert('', tk.END, text='IT', iid=4, open=False)
Code language: PHP (php)

Each item is identified by an iid. If you skip the iid, the insert method will generate one automatically. In this case, you need to have explicit iid for adding child items.

Third, add two child items to the item with iid 0 by using the insert() and move() methods:

# adding children of first node tree.insert('', tk.END, text='John Doe', iid=5, open=False) tree.insert('', tk.END, text='Jane Doe', iid=6, open=False) tree.move(5, 0, 0) tree.move(6, 0, 1)
Code language: PHP (php)

Finally, place the Treeview widget on the root window and display it.

# place the Treeview widget on the root window tree.grid(row=0, column=0, sticky='nsew') # run the app root.mainloop()
Code language: PHP (php)

Summary

  • Use a Tkinter Treeview widget to display both tabular and hierarchical data.
Did you find this tutorial helpful ?