[GH-ISSUE #239] Feature Request: Adding subtext to the TreeView

kerem commented

2026-03-04 01:02:44 +03:00

Owner

Originally created by @coquizen on GitHub (Feb 21, 2019).
Original GitHub issue: https://github.com/rivo/tview/issues/239

How trivial is it to add subtext to the TreeView? The use case for this would be to display a comment tree from a blog with its respective replies indented to align with its node. I have already started an attempt to add this functionality but struggling to understand how the TreeView is rendered. Can you walk me through the code? (I am a beginner at this and would like to contribute).

The following is an example of what I mean:

Is this a matter of tweaking current code or does it require a rewrite? On my fork of your project I have already written some code to this effect. Great project btw!
[EDITED: for clarification of use case. Ignore the the leading '|' as it was used to maintain alignment.]
[EDITED2: See below for clarification as github automatically removes empty spaces]

Originally created by @coquizen on GitHub (Feb 21, 2019). Original GitHub issue: https://github.com/rivo/tview/issues/239 How trivial is it to add subtext to the TreeView? The use case for this would be to display a comment tree from a blog with its respective replies indented to align with its node. I have already started an attempt to add this functionality but struggling to understand how the TreeView is rendered. Can you walk me through the code? (I am a beginner at this and would like to contribute). The following is an example of what I mean: | Title of Comment | Body of Comment |└──title of reply | body of reply | └──title of reply | Body of reply Is this a matter of tweaking current code or does it require a rewrite? On my fork of your project I have already written some code to this effect. Great project btw! [EDITED: for clarification of use case. Ignore the the leading '|' as it was used to maintain alignment.] [EDITED2: See below for clarification as github automatically removes empty spaces]

kerem closed this issue

2026-03-04 01:02:44 +03:00

kerem commented

2026-03-04 01:02:45 +03:00

Author

Owner

@Bios-Marcel commented on GitHub (Feb 23, 2019):

Hey, I'd like to clarify what you mean. Do you mean that you want a tree hierarchy where the nodes support multiline text? Because the example that you have shown us simply looks like a normal treeview.
And why does it need to be a treeview anyway?

@Bios-Marcel commented on GitHub (Feb 23, 2019): Hey, I'd like to clarify what you mean. Do you mean that you want a tree hierarchy where the nodes support multiline text? Because the example that you have shown us simply looks like a normal treeview. And why does it need to be a treeview anyway?

kerem commented

2026-03-04 01:02:45 +03:00

Author

Owner

@coquizen commented on GitHub (Feb 24, 2019):

My intention with treeview is to adapt it such that the subtext can be multi-lined and properly aligned with the title text. The use case would be for showing comments with its meta data as its title text and the body of the comment as its subtext. Their replies would be subtreenodes of its parent with the functionality of folding each node as before. An added feature would be a setting where the subtext could be folded as well.

--
Ian G Canino
Telegram: telegram.me/iangadev
eMail: ian.canino@gmail.com
On Feb 23, 2019, 5:48 PM -0500, Marcel Schramm notifications@github.com, wrote:

Hey, I'd like to clarify what you mean. Do you mean that you want a tree hierarchy where the nodes support multiline text? Because the example that you have shown us simply looks like a normal treeview.
And why does it need to be a treeview anyway?
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.

@coquizen commented on GitHub (Feb 24, 2019): My intention with treeview is to adapt it such that the subtext can be multi-lined and properly aligned with the title text. The use case would be for showing comments with its meta data as its title text and the body of the comment as its subtext. Their replies would be subtreenodes of its parent with the functionality of folding each node as before. An added feature would be a setting where the subtext could be folded as well. -- Ian G Canino Telegram: telegram.me/iangadev eMail: ian.canino@gmail.com On Feb 23, 2019, 5:48 PM -0500, Marcel Schramm <notifications@github.com>, wrote: > Hey, I'd like to clarify what you mean. Do you mean that you want a tree hierarchy where the nodes support multiline text? Because the example that you have shown us simply looks like a normal treeview. > And why does it need to be a treeview anyway? > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub, or mute the thread.

kerem commented

2026-03-04 01:02:45 +03:00

Author

Owner

@Bios-Marcel commented on GitHub (Feb 24, 2019):

I dont think you need this. Just use a Textview and regions + highlights if you need a selection. Adding such features to the treeview doesnt seem like the way to go.

@Bios-Marcel commented on GitHub (Feb 24, 2019): I dont think you need this. Just use a Textview and regions + highlights if you need a selection. Adding such features to the treeview doesnt seem like the way to go.

kerem commented

2026-03-04 01:02:45 +03:00

Author

Owner

@coquizen commented on GitHub (Feb 24, 2019):

Alternatively have tree view support multilie text via respecting '\n' code.

My understanding of regions and highlight in the library is that it affects the styling and ability to tag internally. Not the alignment which is at the core of the feature request.

@coquizen commented on GitHub (Feb 24, 2019): Alternatively have tree view support multilie text via respecting '\n' code. My understanding of regions and highlight in the library is that it affects the styling and ability to tag internally. Not the alignment which is at the core of the feature request.

kerem commented

2026-03-04 01:02:45 +03:00

Author

Owner

@Bios-Marcel commented on GitHub (Feb 24, 2019):

Oh right, you want it to break the lines AND have indentation as well. Then I have no better idea :)

@Bios-Marcel commented on GitHub (Feb 24, 2019): Oh right, you want it to break the lines AND have indentation as well. Then I have no better idea :)

kerem commented

2026-03-04 01:02:45 +03:00

Author

Owner

@rivo commented on GitHub (Mar 8, 2019):

When you look at the presentation demo, on page 9, the various features of the TreeView are shown. Maintaining support for these features while adding variable-height nodes will be a major effort. Even worse will be making line breaks work (automatic as well as forced). I've refactored TextView multiple times to make line breaks work properly with all the edge cases (as well as all the issues that come with unicode characters). I don't see this happening any time soon on TreeView.

Two solutions come to mind here: If you insist on the lines that TreeView draws, I would suggest keeping the nodes on one line and showing a preview of your comment texts in them. Maybe like this:

When the user navigates to one of the lines, you could show the full text in a second window.

The second idea would be to not use TreeView but instead use a Grid layout. I coded up a small example:

package main

import (
	"github.com/gdamore/tcell"
	"github.com/rivo/tview"
)

func main() {
	newTextView := func() *tview.TextView {
		textView := tview.NewTextView().
			SetText("[yellow]Subject of comment\n[white]First line\nsecond line\nthird line").
			SetDynamicColors(true)
		textView.SetBorder(true).SetBorderColor(tcell.ColorBlue)
		return textView
	}
	grid := tview.NewGrid().SetColumns(5, 5, 5, 5, 0).SetRows(5, 5, 5, 5, 5, 5, 5, 5, 5)
	grid.AddItem(newTextView(), 0, 0, 1, 5, 0, 0, false)
	grid.AddItem(newTextView(), 1, 1, 1, 4, 0, 0, false)
	grid.AddItem(newTextView(), 2, 1, 1, 4, 0, 0, false)
	grid.AddItem(newTextView(), 3, 0, 1, 5, 0, 0, false)
	grid.AddItem(newTextView(), 4, 1, 1, 4, 0, 0, false)
	grid.AddItem(newTextView(), 5, 2, 1, 3, 0, 0, false)
	grid.AddItem(newTextView(), 6, 2, 1, 3, 0, 0, false)
	grid.AddItem(newTextView(), 7, 1, 1, 4, 0, 0, false)
	if err := tview.NewApplication().SetRoot(grid, true).Run(); err != nil {
		panic(err)
	}
}

Of course, you wouldn't hardcode it like this. And maybe you don't want the borders around the comments. Thirdly, you may need two render passes if you want the height of the comments to adapt to the number of lines in the comments (tview does not calculate layouts bottom-up but top-down). But like this, it would be possible to show a hierarchy (no lines, though, unless you want to draw them yourself).

Let me know if this helps you a bit.

@rivo commented on GitHub (Mar 8, 2019): When you look at the presentation demo, on page 9, the various features of the `TreeView` are shown. Maintaining support for these features while adding variable-height nodes will be a major effort. Even worse will be making line breaks work (automatic as well as forced). I've refactored `TextView` multiple times to make line breaks work properly with all the edge cases (as well as all the issues that come with unicode characters). I don't see this happening any time soon on `TreeView`. Two solutions come to mind here: If you insist on the lines that `TreeView` draws, I would suggest keeping the nodes on one line and showing a preview of your comment texts in them. Maybe like this: ![image](https://user-images.githubusercontent.com/480930/54053422-794f4600-41e7-11e9-8ae4-03d0ad17a52e.png) When the user navigates to one of the lines, you could show the full text in a second window. The second idea would be to not use `TreeView` but instead use a `Grid` layout. I coded up a small example: ![image](https://user-images.githubusercontent.com/480930/54054401-5bcfab80-41ea-11e9-8671-ec0eb5d58511.png) ```go package main import ( "github.com/gdamore/tcell" "github.com/rivo/tview" ) func main() { newTextView := func() *tview.TextView { textView := tview.NewTextView(). SetText("[yellow]Subject of comment\n[white]First line\nsecond line\nthird line"). SetDynamicColors(true) textView.SetBorder(true).SetBorderColor(tcell.ColorBlue) return textView } grid := tview.NewGrid().SetColumns(5, 5, 5, 5, 0).SetRows(5, 5, 5, 5, 5, 5, 5, 5, 5) grid.AddItem(newTextView(), 0, 0, 1, 5, 0, 0, false) grid.AddItem(newTextView(), 1, 1, 1, 4, 0, 0, false) grid.AddItem(newTextView(), 2, 1, 1, 4, 0, 0, false) grid.AddItem(newTextView(), 3, 0, 1, 5, 0, 0, false) grid.AddItem(newTextView(), 4, 1, 1, 4, 0, 0, false) grid.AddItem(newTextView(), 5, 2, 1, 3, 0, 0, false) grid.AddItem(newTextView(), 6, 2, 1, 3, 0, 0, false) grid.AddItem(newTextView(), 7, 1, 1, 4, 0, 0, false) if err := tview.NewApplication().SetRoot(grid, true).Run(); err != nil { panic(err) } } ``` Of course, you wouldn't hardcode it like this. And maybe you don't want the borders around the comments. Thirdly, you may need two render passes if you want the height of the comments to adapt to the number of lines in the comments (`tview` does not calculate layouts bottom-up but top-down). But like this, it would be possible to show a hierarchy (no lines, though, unless you want to draw them yourself). Let me know if this helps you a bit.

kerem referenced this issue

2026-03-04 01:08:19 +03:00

[PR #186] [MERGED] fix #185 #870

Rows
Columns

[GH-ISSUE #239] Feature Request: Adding subtext to the TreeView #185