Lección 4 · 4 de 20

Treeview como tabla · tkinter

Muestre datos en filas y columnas con ttk.Treeview de tkinter: columnas, cabeceras, alineación, filas en color y una fila elegida desde el código.

tkinter · Treeview como tabla en DMarlon Studio: el código del ejemplo y la ventana que abre al ejecutarlo

ttk.Treeview sirve para tablas y para árboles. Para una tabla se le dan los nombres de las columnas (columns=("code", "name", ...)) y show="headings", que oculta la columna del árbol (#0) y deja solo las cabeceras.

Para cada columna, heading() pone el texto de la cabecera y column(), el ancho y la alineación: el precio y las existencias van a la derecha (anchor="e"), como se hace con los números.

insert("", "end", iid=code, values=(...)) añade una fila al final. "" es el padre (la raíz: en una tabla, todas las filas cuelgan de ella), iid le da un identificador propio —aquí, el código del producto— y values lleva un valor por columna, en orden. Con tags=("low",) y tag_configure("low", foreground=...), las filas con menos de 5 unidades salen en rojo.

La selección se maneja con selection_set() y focus(), y cada vez que cambia se lanza el evento virtual <<TreeviewSelect>>. La función show lee la fila con item(..., "values") y escribe el resumen en la etiqueta de abajo; por eso la ventana se abre con el monitor ya elegido.

En DMarlon Studio es la Tabla de datos de la paleta: define sus columnas en el inspector y el estudio genera el ttk.Treeview con show="headings", sus cabeceras y una barra de desplazamiento vertical.

Código · main.py

import tkinter as tkfrom tkinter import ttkproducts = [("P-001", "Keyboard", 25.9, 14), ("P-002", "Mouse", 12.5, 3),            ("P-003", "Monitor 24\"", 149.0, 6), ("P-004", "USB cable", 4.95, 40),            ("P-005", "Webcam", 39.99, 2), ("P-006", "Headphones", 59.0, 9),            ("P-007", "Laptop stand", 29.5, 11)]root = tk.Tk()root.title("Products")root.geometry("560x290")# Columns by name; show="headings" hides the tree column (#0).tree = ttk.Treeview(root, columns=("code", "name", "price", "stock"), show="headings")for col, title, width, anchor in [("code", "Code", 80, "w"), ("name", "Name", 220, "w"),                                  ("price", "Price", 100, "e"), ("stock", "Stock", 80, "e")]:    tree.heading(col, text=title)    tree.column(col, width=width, anchor=anchor)# One row per product; the tag "low" paints the rows with little stock.for code, name, price, stock in products:    tree.insert("", "end", iid=code, values=(code, name, f"{price:.2f}", stock),                tags=("low",) if stock < 5 else ())tree.tag_configure("low", foreground="#c0392b")info = ttk.Label(root)info.pack(side="bottom", anchor="w", padx=12, pady=(0, 10))tree.pack(fill="both", expand=True, padx=10, pady=10)def show(event):  # <<TreeviewSelect>>: the selection has changed    code, name, price, stock = tree.item(tree.focus(), "values")    info.config(text=f"Selected: {name} ({code}), {price} each, {stock} in stock")tree.bind("<<TreeviewSelect>>", show)tree.selection_set("P-003")  # a row chosen from codetree.focus("P-003")root.mainloop()

Para recordar

columns y show="headings" hacen una tabla sin columna de árbol.
heading() pone el título; column(), el ancho y la alineación.
insert("", "end", values=...) añade una fila.
<<TreeviewSelect>> avisa cuando cambia la selección.

Ejercicio

Añada una columna «Total» con precio × existencias, alineada a la derecha, y ordene los productos por precio antes de insertarlos.