tview icon indicating copy to clipboard operation
tview copied to clipboard

how can i add a DropDown into table?

Open zhouruisong opened this issue 1 year ago • 2 comments

code as below, i can show DropDown in a table please tell me the right way to show a DropDown in a table

package main

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

func main() {
	app := tview.NewApplication()

	// 创建一个表格
	table := tview.NewTable().
		SetBorders(true).
		SetSelectable(true, false)

	// 创建一个下拉菜单
	selectList := tview.NewDropDown().
		SetLabel("Select an item: ").
		SetOptions([]string{"Item 1", "Item 2", "Item 3"}, nil)

	// 将下拉菜单添加到表格的单元格中
	table.SetCell(0, 0, tview.NewTableCell("Row 1, Column 1")).
		SetCell(0, 1, tview.NewTableCell("Row 1, Column 2")).
		SetCell(1, 0, tview.NewTableCell("Row 2, Column 1")).
		SetCell(1, 1, tview.NewTableCell("Row 2, Column 2")).
		SetCell(2, 0, tview.NewTableCell("Row 3, Column 1")).
		SetCell(2, 1, tview.NewTableCell("Row 3, Column 2")).
		SetCell(3, 0, tview.NewTableCell("Row 4, Column 1")).
		SetCell(3, 1, tview.NewTableCell("Select an item:").SetExpansion(1).SetSelectable(false).
			SetAlign(tview.AlignCenter).SetTextColor(tview.Styles.SecondaryTextColor).
			SetBackgroundColor(tview.Styles.ContrastBackgroundColor).SetReference(selectList))

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

image

zhouruisong avatar Apr 20 '23 07:04 zhouruisong

There is no way to place a widget such as a DropDown in a table cell. You would have to place it somewhere outside the table.

rivo avatar May 27 '23 11:05 rivo

@zhouruisong

the way you can implement this the quickest/easiest would probably be Pages widget, with the table on the back layer, and then when a user hits the cell/shortcut to use this dropdown, stick it in a modal dialog and put it on the front layer of the pages widget. this has the added benefit of giving you lots of room/space for other help/buttons/widgets beyond the dropdown.

if you really want to mimic a dropdown's home/position being from/in/with a table's cell, there's a method on table cell's GetLastPosition that you can call to find the coord's to then position a box/widget/panel/modal close to your cell.

your issue's title gave me an instantaneous reaction of FUCK THAT when breezing headings. anything in a cell, is restricted to the cell's size/position, as well the cell is restricted to the table's size/position/scroll. , and table cell's are text only to begin with, without any logic to render primitives inside themselves

I would however try and think how best to handle things you want to do without mimicing a desktop GUI you may think people are accustomed to... console users are there for the speed/consistency/scriptability/predictability of their interface, and sometimes lacking a mouse (servers/ssh). so terminal apps aren't going to usually be seen as useful if it is another poinit and click adventure they could have kept open in a chrome tab.

now, i attach this gif to show that with some creative uses/styling of the basic widgets already in tview, you can create an engaging UI/UX without trying to duplicate a desktop GUI in a tty world.

you can see how overlays/dialogs/panels that pop over, slide in, dock/post up, can give your user's their widget/option/utility/functionality you're providing.

but this was a toy project so some of the ui/ux is excessive lol

demo-nvim-script

digitallyserviced avatar Jun 01 '23 09:06 digitallyserviced