[GH-ISSUE #764] Feature Request: A demo or a doc on how to combine different widgets together

kerem commented

2026-03-04 01:05:59 +03:00

Owner

Originally created by @jsanant on GitHub (Oct 5, 2022).
Original GitHub issue: https://github.com/rivo/tview/issues/764

I have created a widget TreeView and I am trying to show it on the terminal using the Grid layout.

┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                                           Header                                                            │
│                                                                                                                             │
│                                                                                                                             │
├──────────────────────────────┬──────────────────────────────────────────────────────────────────────────────────────────────┤
│             Menu             │                                         Main content                                         │
│ Root                         |                                                                                              |
| ├──data-1                    |                                                                                              |
| ├──data-2                    |                                                                                              |
| └──data-3                    │                                                                                              │
│                              │                                                                                              │
│                              │                                                                                              │
│                              │                                                                                              │
│                              │                                                                                              │
│                              │                                                                                              │
│                              │                                                                                              │
│                              │                                                                                              │
│                              │                                                                                              │
│                              │                                                                                              │
│                              │                                                                                              │
└──────────────────────────────┴──────────────────────────────────────────────────────────────────────────────────────────────┘

I have played around with the code that is given in the Wiki sections for both the widgets but I unable to stitch things together.

Originally created by @jsanant on GitHub (Oct 5, 2022). Original GitHub issue: https://github.com/rivo/tview/issues/764 I have created a widget `TreeView` and I am trying to show it on the terminal using the `Grid` layout. ``` ┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐ │ Header │ │ │ │ │ ├──────────────────────────────┬──────────────────────────────────────────────────────────────────────────────────────────────┤ │ Menu │ Main content │ │ Root | | | ├──data-1 | | | ├──data-2 | | | └──data-3 │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └──────────────────────────────┴──────────────────────────────────────────────────────────────────────────────────────────────┘ ``` I have played around with the code that is given in the Wiki sections for both the widgets but I unable to stitch things together.

kerem closed this issue

2026-03-04 01:05:59 +03:00

kerem commented

2026-03-04 01:06:00 +03:00

Author

Owner

@rivo commented on GitHub (Oct 5, 2022):

I'm not really sure I understand what you're trying to achieve. What it is exactly that you want to do that's not working at the moment? Is the picture that you're posting what it should look like? Can you post the code that you already have?

@rivo commented on GitHub (Oct 5, 2022): I'm not really sure I understand what you're trying to achieve. What it is exactly that you want to do that's not working at the moment? Is the picture that you're posting what it should look like? Can you post the code that you already have?

kerem commented

2026-03-04 01:06:00 +03:00

Author

Owner

@jsanant commented on GitHub (Oct 5, 2022):

My bad! Let me add the code.

I am trying to fetch a list of directories using TreeView and print them on screen in a Grid layout.

package main

import (
	"io/ioutil"
	"path/filepath"

	"github.com/gdamore/tcell/v2"
	"github.com/rivo/tview"
)

// Show a navigable tree view of the current directory.
func main() {
	rootDir := "."
	root := tview.NewTreeNode(rootDir).
		SetColor(tcell.ColorRed)
	tree := tview.NewTreeView().
		SetRoot(root).
		SetCurrentNode(root)

	// A helper function which adds the files and directories of the given path
	// to the given target node.
	add := func(target *tview.TreeNode, path string) {
		files, err := ioutil.ReadDir(path)
		if err != nil {
			panic(err)
		}
		for _, file := range files {
			node := tview.NewTreeNode(file.Name()).
				SetReference(filepath.Join(path, file.Name())).
				SetSelectable(file.IsDir())
			if file.IsDir() {
				node.SetColor(tcell.ColorGreen)
			}
			target.AddChild(node)
		}
	}

	// Add the current directory to the root node.
	add(root, rootDir)

	// If a directory was selected, open it.
	tree.SetSelectedFunc(func(node *tview.TreeNode) {
		reference := node.GetReference()
		if reference == nil {
			return // Selecting the root node does nothing.
		}
		children := node.GetChildren()
		if len(children) == 0 {
			// Load and show files in this directory.
			path := reference.(string)
			add(node, path)
		} else {
			// Collapse if visible, expand if collapsed.
			node.SetExpanded(!node.IsExpanded())
		}
	})

       app := tview.NewApplication()

	newPrimitive := func(text string) tview.Primitive {
		return tview.NewTextView().
			SetTextAlign(tview.AlignCenter).
			SetText(text)
	}
	menu := newPrimitive("Menu")
	main := newPrimitive("Main content")

	grid := tview.NewGrid().
		SetRows(3, 0, 3).
		SetColumns(30, 0, 30).
		SetBorders(true).
		AddItem(newPrimitive("Header"), 0, 0, 1, 2, 2, 0, false)

	// Layout for screens wider than 100 cells.
	grid.AddItem(menu, 1, 0, 1, 1, 0, 100, false).
	        AddItem(fmt.Sprintf(tree), 1, 0, 1, 1, 0, 100, false).
		AddItem(main, 1, 1, 1, 1, 0, 100, false)

	if err := app.SetRoot(grid, true).Run(); err != nil {
		panic(err)
	}
}

@jsanant commented on GitHub (Oct 5, 2022): My bad! Let me add the code. I am trying to fetch a list of directories using `TreeView` and print them on screen in a `Grid` layout. ``` package main import ( "io/ioutil" "path/filepath" "github.com/gdamore/tcell/v2" "github.com/rivo/tview" ) // Show a navigable tree view of the current directory. func main() { rootDir := "." root := tview.NewTreeNode(rootDir). SetColor(tcell.ColorRed) tree := tview.NewTreeView(). SetRoot(root). SetCurrentNode(root) // A helper function which adds the files and directories of the given path // to the given target node. add := func(target *tview.TreeNode, path string) { files, err := ioutil.ReadDir(path) if err != nil { panic(err) } for _, file := range files { node := tview.NewTreeNode(file.Name()). SetReference(filepath.Join(path, file.Name())). SetSelectable(file.IsDir()) if file.IsDir() { node.SetColor(tcell.ColorGreen) } target.AddChild(node) } } // Add the current directory to the root node. add(root, rootDir) // If a directory was selected, open it. tree.SetSelectedFunc(func(node *tview.TreeNode) { reference := node.GetReference() if reference == nil { return // Selecting the root node does nothing. } children := node.GetChildren() if len(children) == 0 { // Load and show files in this directory. path := reference.(string) add(node, path) } else { // Collapse if visible, expand if collapsed. node.SetExpanded(!node.IsExpanded()) } }) app := tview.NewApplication() newPrimitive := func(text string) tview.Primitive { return tview.NewTextView(). SetTextAlign(tview.AlignCenter). SetText(text) } menu := newPrimitive("Menu") main := newPrimitive("Main content") grid := tview.NewGrid(). SetRows(3, 0, 3). SetColumns(30, 0, 30). SetBorders(true). AddItem(newPrimitive("Header"), 0, 0, 1, 2, 2, 0, false) // Layout for screens wider than 100 cells. grid.AddItem(menu, 1, 0, 1, 1, 0, 100, false). AddItem(fmt.Sprintf(tree), 1, 0, 1, 1, 0, 100, false). AddItem(main, 1, 1, 1, 1, 0, 100, false) if err := app.SetRoot(grid, true).Run(); err != nil { panic(err) } } ```

kerem commented

2026-03-04 01:06:00 +03:00

Author

Owner

@jsanant commented on GitHub (Oct 5, 2022):

And also how do I debug the application? Logging works but it overlaps with the application.

@jsanant commented on GitHub (Oct 5, 2022): And also how do I debug the application? Logging works but it overlaps with the application.

kerem commented

2026-03-04 01:06:00 +03:00

Author

Owner

@rivo commented on GitHub (Oct 6, 2022):

Your code didn't compile. I'm not sure why you have a fmt.Sprintf(tree) in there. If you replace the following part:

	grid := tview.NewGrid().
		SetRows(3, 0).
		SetColumns(30, 0).
		SetBorders(true).
		AddItem(newPrimitive("Header"), 0, 0, 1, 2, 0, 0, false)

	// Layout for screens wider than 100 cells.
	grid.AddItem(menu, 1, 0, 1, 1, 0, 100, false).
		AddItem(tree, 1, 0, 1, 1, 0, 100, true).
		AddItem(main, 1, 1, 1, 1, 0, 100, false)

then it should work.

Debugging is a bit difficult with this kind of application. I work with VS Code and if I need to debug a tview application, I build it and then attach the debugger to its process. You should be able to google how to do this.

@rivo commented on GitHub (Oct 6, 2022): Your code didn't compile. I'm not sure why you have a `fmt.Sprintf(tree)` in there. If you replace the following part: ```go grid := tview.NewGrid(). SetRows(3, 0). SetColumns(30, 0). SetBorders(true). AddItem(newPrimitive("Header"), 0, 0, 1, 2, 0, 0, false) // Layout for screens wider than 100 cells. grid.AddItem(menu, 1, 0, 1, 1, 0, 100, false). AddItem(tree, 1, 0, 1, 1, 0, 100, true). AddItem(main, 1, 1, 1, 1, 0, 100, false) ``` then it should work. Debugging is a bit difficult with this kind of application. I work with VS Code and if I need to debug a `tview` application, I build it and then attach the debugger to its process. You should be able to google how to do this.

kerem commented

2026-03-04 01:06:01 +03:00

Author

Owner

@jsanant commented on GitHub (Oct 6, 2022):

Ah I see the mistake I made, thanks a lot @rivo ! :)

Is there a Slack channel where I can ask such silly doubts?

@jsanant commented on GitHub (Oct 6, 2022): Ah I see the mistake I made, thanks a lot @rivo ! :) Is there a Slack channel where I can ask such silly doubts?

kerem commented

2026-03-04 01:06:01 +03:00

Author

Owner

@rivo commented on GitHub (Oct 6, 2022):

It's ok to post them here.

@rivo commented on GitHub (Oct 6, 2022): It's ok to post them here.

Rows
Columns

[GH-ISSUE #764] Feature Request: A demo or a doc on how to combine different widgets together #558