Skip to content

Instantly share code, notes, and snippets.

Created September 2, 2021 03:40
Show Gist options
  • Save jechasteen/66bedc60ac76868ddc3e019290773f7b to your computer and use it in GitHub Desktop.
Save jechasteen/66bedc60ac76868ddc3e019290773f7b to your computer and use it in GitHub Desktop.
GJS/GTK 3.0 - Gtk.TreeView with TreeStore/TreeModel
// You have to tell GJS which version of Gtk to target = "3.0"
const { GObject, Gtk } =;
class MyWindow extends Gtk.Window {
_init() {
title: "My TreeView Example"
_buildUI() {
// First, you have to create a TreeStore, which is like
// a database for your tree data. = new Gtk.TreeStore();[GObject.TYPE_STRING]);
// This creates the TreeModel on the TreeStore object;
// Let's populate our tree with one set of parent/children
// First, we have to create a new (empty) entry
// We save the returned TreeIter as a reference for the
// children Otherwise, if we don't need children, we could
// simply call, 0, "TEXT")
let parent =;
// Then, we give that entry its data. The 0 here referring to the COLUMN
// index in the array above "GObject.TYPE_STRING", 0, "Parent");
// Next, we create the children, using the parent TreeIter as the
// argument to append (that is the parent argument), 0, "Child 1");, 0, "Child 2");
// Now that we have the store populated, we have to construct the view itself
this.tree = new Gtk.TreeView({ model: });
// We have to create a renderer and column to actually do the work of
// presentation the in the view. This will allow you to apply custom
// styling or do operations on cells before presentation.
this.renderer = new Gtk.CellRendererText();
this.column = new Gtk.TreeViewColumn();
this.column.pack_start(this.renderer, true);
// This function is where the styling/operations happen
(col, cell, model, iter) => {
cell.editable = false;
=, 0);
// Now we add the column to the tree
// If you need multiple columns, you will need to repeat this for each
// Lastly, we add the view to the window.
// Start the application
const App = GObject.registerClass(MyWindow);
let win = new App();
win.connect("delete-event", () => Gtk.main_quit());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment