starred/tview

Fork 0

mirror of https://github.com/rivo/tview.git synced 2026-04-26 13:25:51 +03:00

[GH-ISSUE #23] Feature Request: GridView #17

New issue

Closed

opened 2026-03-04 01:01:09 +03:00 by kerem · 5 comments

kerem commented

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

Owner

Originally created by @maja42 on GitHub (Jan 13, 2018).
Original GitHub issue: https://github.com/rivo/tview/issues/23

I have a use case where a "GridView" would be perfect. It is very similar to Flex, but handles the positioning of new items automatically based on an initial configuration.

Usage:

grid := NewGrid(3, 20) 
    // 3 represents the number of columns. The available space will be divided into 3 equaly wide columns.
    // 20 is the height the item which will be added later to the grid
grid.AddItem(primitive1, focus)    // The newly added item is 20 characters high, and consumes 33% of the parent's width (1/3)
grid.AddItem(primitive2, focus)    // The item is placed on the right side of the previous one. Hence, it is centered horizontally within the parent
grid.AddItem(primitive3, focus)    // Placed in the most-right column
grid.AddItem(primitive4, focus)    // Since we occupied all columns in the first row, this primitive will be placed underneath primitve1. It also has a height of 20 characters.

If add a lot of elements and they don't have enough vertical space (say, the GridView is 100 characters tall, the individual items are 20 characters tall, and I insert so many elements, that more than 5 rows are needed), the GridView should propably overflow, and there should be the possibility to scroll within the gridview to see all added items.

Also, items can be removed vom the GridView, in which case all items inserted afterwards will move one spot to the front, to avoid gaps.

(Btw, I just switched from gocui to tview, and it's great. Especially how well and fast you handle issues. Good work!)

Originally created by @maja42 on GitHub (Jan 13, 2018). Original GitHub issue: https://github.com/rivo/tview/issues/23 I have a use case where a "GridView" would be perfect. It is very similar to Flex, but handles the positioning of new items automatically based on an initial configuration. Usage: ``` grid := NewGrid(3, 20) // 3 represents the number of columns. The available space will be divided into 3 equaly wide columns. // 20 is the height the item which will be added later to the grid grid.AddItem(primitive1, focus) // The newly added item is 20 characters high, and consumes 33% of the parent's width (1/3) grid.AddItem(primitive2, focus) // The item is placed on the right side of the previous one. Hence, it is centered horizontally within the parent grid.AddItem(primitive3, focus) // Placed in the most-right column grid.AddItem(primitive4, focus) // Since we occupied all columns in the first row, this primitive will be placed underneath primitve1. It also has a height of 20 characters. ``` If add a lot of elements and they don't have enough vertical space (say, the GridView is 100 characters tall, the individual items are 20 characters tall, and I insert so many elements, that more than 5 rows are needed), the GridView should propably overflow, and there should be the possibility to scroll within the gridview to see all added items. Also, items can be removed vom the GridView, in which case all items inserted afterwards will move one spot to the front, to avoid gaps. (Btw, I just switched from gocui to tview, and it's great. Especially how well and fast you handle issues. Good work!)

kerem

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

closed this issue
added the
on roadmap
label

kerem commented

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

Author

Owner

@rivo commented on GitHub (Jan 13, 2018):

Thanks for your comment (and I'm glad you like it!). I try to handle issues quickly but a request like this is obviously not a small one.

I will look into this and keep you posted. But for now, it'll get the "on roadmap" label.

@rivo commented on GitHub (Jan 13, 2018): Thanks for your comment (and I'm glad you like it!). I try to handle issues quickly but a request like this is obviously not a small one. I will look into this and keep you posted. But for now, it'll get the "on roadmap" label.

kerem commented

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

Author

Owner

@maja42 commented on GitHub (Jan 16, 2018):

Thinking about it again, the API might be more useful (and responsive!) if you define a minimum and maxmium width for columns, and the GridView automatically wraps items if needed.
So if the terminal is very slim, all grid items are placed below each other. If it's wide, multiple items are placed within a single row.

Another feature that might become interesting once this is working: different min/max-widths for individual items. So you can have, eg. a few items with a width of 20 characters, and another one with 40 characters, which should be twice as big.

@maja42 commented on GitHub (Jan 16, 2018): Thinking about it again, the API might be more useful (and responsive!) if you define a minimum and maxmium width for columns, and the GridView automatically wraps items if needed. So if the terminal is very slim, all grid items are placed below each other. If it's wide, multiple items are placed within a single row. Another feature that might become interesting once this is working: different min/max-widths for individual items. So you can have, eg. a few items with a width of 20 characters, and another one with 40 characters, which should be twice as big.

kerem commented

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

Author

Owner

@rivo commented on GitHub (Jan 16, 2018):

It's a good idea to make it responsive. I'll keep this in mind. And yes, I plan on adding the possibility to span items over multiple columns. I still want to look at existing implementations (e.g. Bootstrap or the new CSS grid layout) before I start working on this.

Note that there won't be min/max widths, though. Sizes in tvieware always set top-down so a parent element doesn't know how much space its child element is actually using. Instead, it tells the child element how much space it has. (Implementing flexible sizes would add a lot more complexity anyway. Browsers do that and their layout engines are not trivial.)

@rivo commented on GitHub (Jan 16, 2018): It's a good idea to make it responsive. I'll keep this in mind. And yes, I plan on adding the possibility to span items over multiple columns. I still want to look at existing implementations (e.g. Bootstrap or the new CSS grid layout) before I start working on this. Note that there won't be min/max widths, though. Sizes in `tview`are always set top-down so a parent element doesn't know how much space its child element is actually using. Instead, it tells the child element how much space it has. (Implementing flexible sizes would add a lot more complexity anyway. Browsers do that and their layout engines are not trivial.)

kerem commented

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

Author

Owner

@verdverm commented on GitHub (Jan 23, 2018):

There are some terminal grid examples out there:

https://github.com/marcusolsson/tui-go (tcell)
https://github.com/gizak/termui (termbox)

The calculations they are using will likely be helpful to whom every takes on this task.

On a side note, the second one has an event system I have merged with this project. (See https://github.com/verdverm/vermui)

I've been using it to power the mouse and a gorilla/mux like routing system.

@verdverm commented on GitHub (Jan 23, 2018): There are some terminal grid examples out there: - https://github.com/marcusolsson/tui-go (tcell) - https://github.com/gizak/termui (termbox) The calculations they are using will likely be helpful to whom every takes on this task. _On a side note_, the second one has an event system I have merged with this project. (See https://github.com/verdverm/vermui) I've been using it to power the mouse and a gorilla/mux like routing system.

kerem commented

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

Author

Owner

@rivo commented on GitHub (Feb 20, 2018):

A Grid primitive is now available so this issue is closed now. Please see the Godoc documentation and the Wiki for details.

This implementation takes cues from the CSS grid layout. First, you define row and column sizes, then you add primitives to the grid which may span one or more rows/columns. It is also responsive in that you can place your primitives differently according to the available space.

You can specify gaps between rows and columns. Or you can cause borders to be drawn around primitives. This allows you to save screen space as the borders of neighbouring primitives will be combined (see also #57).

Grids can also be navigated, similarly to the Table class.

@rivo commented on GitHub (Feb 20, 2018): A `Grid` primitive is now available so this issue is closed now. Please see the [Godoc documentation](https://godoc.org/github.com/rivo/tview#Grid) and the [Wiki](https://github.com/rivo/tview/wiki/Grid) for details. This implementation takes cues from the CSS grid layout. First, you define row and column sizes, then you add primitives to the grid which may span one or more rows/columns. It is also responsive in that you can place your primitives differently according to the available space. You can specify gaps between rows and columns. Or you can cause borders to be drawn around primitives. This allows you to save screen space as the borders of neighbouring primitives will be combined (see also #57). Grids can also be navigated, similarly to the `Table` class.