Examples of using table with a progress bar in a column

[amir20]

Hi all,

I am trying to create a progress bar inside a table. I tried putting the proggressModel.View() insides a row. But it doesn't seem to work.

func initialModel() model {
	columns := []table.Column{
		{Title: "Task", Width: 10},
		{Title: "Status", Width: 10},
		{Title: "Progress", Width: 30},
	}

	var rowDataList []rowData
	var tableRows []table.Row
	for i := 0; i < 5; i++ {
		prog := progress.New(
			progress.WithoutPercentage(),
			progress.WithWidth(20),
		)
		row := rowData{
			name:     fmt.Sprintf("Task %d", i+1),
			status:   "Running",
			progress: prog,
			percent:  0.5,
		}
		row.progress.SetPercent(row.percent)
		rowDataList = append(rowDataList, row)

		tableRows = append(tableRows, table.Row{
			row.name,
			row.status,
			row.progress.View(),
		})
	}

	t := table.New(
		table.WithColumns(columns),
		table.WithRows(tableRows),
		table.WithHeight(10),
	)

	return model{table: t, rows: rowDataList}
}

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) {
	case tickMsg:
		cmds := []tea.Cmd{}
		for i := range m.rows {
			cmds = append(cmds, m.rows[i].progress.SetPercent(m.rows[i].percent))
			if m.rows[i].percent < 1.0 {
				m.rows[i].percent += 0.02
			}
		}

		var updatedRows []table.Row
		for _, r := range m.rows {
			updatedRows = append(updatedRows, table.Row{
				r.name,
				r.status,
				r.progress.View(),
			})
		}

		m.table.SetRows(updatedRows)

		cmds = append(cmds, tea.Tick(time.Millisecond*200, func(t time.Time) tea.Msg {
			return tickMsg{}
		}))
		return m, tea.Batch(cmds...)

	case tea.KeyMsg:
		switch msg.String() {
		case "q":
			return m, tea.Quit
		}

	default:
		cmds := []tea.Cmd{}
		var cmd tea.Cmd
		m.table, cmd = m.table.Update(msg)
		cmds = append(cmds, cmd)

		for i := range m.rows {
			newModel, cmd := m.rows[i].progress.Update(msg)
			m.rows[i].progress = newModel.(progress.Model)
			cmds = append(cmds, cmd)
		}

		return m, tea.Batch(cmds...)
	}

	return m, nil
}

func (m model) View() string {
	return m.table.View()
}

The results look broken.

I am guessing it has to do with with width.

[amir20]

After looking at the code, it seems rows are rendered with runewidth.Truncate which breaks the ansi colors.

Anybody know if there is a way around this?