Building Complex tables with Fyne

One of the more complex widgets included in the standard Fyne library is the Table collection widget.

It is designed to present a lot of data in an efficient manner, supporting fast scroll through large quantities of widgets (sharing a design with the List and Tree collections). This requires complex internal caching and a slightly more complex, callback based, API compared to simpler widgets. Due to the way it is set up a table will hold only one type of widget – but it is often desirable to show more. We will explore how to do that in this post.

Showing different widgets in table cells

It is a relatively common use-case to display different types of data in a Table (or List, which this tutorial can be applied to as well). For example we may want to show devices in a table as follows, with a name and IP address using a Label, but with an icon or other data which is not possible using the same content widget:

As well as looking to display different widget types we have also set the third column to be narrower, which can be done with the simple call t.SetColumnWidth(2, 24). However the complete solution is a little more complex, we will need to display different widgets in a homogeneous setup callback – to do this we will use a container so we can manage multiple widgets.

Coding it up

We can support this switching of widget type by making use of a Max container in each cell (using Max so that all items fill the space) and then hide / show the items according to the cell being set up in the update callback. For the illustration above we wish to display textual content (a Label) and an image (using the Icon widget), which is set up in a container as follows:

. 
    container.NewMax(widget.NewLabel("template11"), widget.NewIcon(nil))

The container solves the creation of different cells, but to complete the display we must update the container to show the correct item based on the column ID. That is done in the update callback by checking the TableCellID and using Hide() and Show() appropriately, as shown below:

        l := o.(*fyne.Container).Objects[0].(*widget.Label)
        i := o.(*fyne.Container).Objects[1].(*widget.Icon)
        l.Show()
        i.Hide()
        switch id.Col {
        case 2:
            l.Hide()
            i.Show()
            i.SetResource(getIcon(id.Row))
        case 0:
            l.SetText("hostname")
        }

As you can see we set the visibility of the appropriate widget, and then go ahead to set its content in the usual manner. Be sure to set the right sort of content on each column or the data set may not be visible!

The complete code for the image displayed above is set out below, combining all of the items we have discussed so far.

package main

import (
   "fyne.io/fyne/v2"
   "fyne.io/fyne/v2/app"
   "fyne.io/fyne/v2/container"
   "fyne.io/fyne/v2/theme"
   "fyne.io/fyne/v2/widget"
)

func main() {
   a := app.New()
   w := a.NewWindow("Devices")
   w.Resize(fyne.NewSize(320, 240))

   t := widget.NewTable(func() (int, int) {
      return 100, 4
   }, func() fyne.CanvasObject {
      return container.NewMax(widget.NewLabel("template11"), widget.NewIcon(nil))
   }, func(id widget.TableCellID, o fyne.CanvasObject) {
      l := o.(*fyne.Container).Objects[0].(*widget.Label)
      i := o.(*fyne.Container).Objects[1].(*widget.Icon)
      l.Show()
      i.Hide()

      switch id.Col {
      case 2:
         l.Hide()
         i.Show()

         i.SetResource(getIcon(id.Row))
      case 0:
         l.SetText("hostname")
      case 1:
         l.SetText("127.0.0.1")
      case 3:
         l.SetText("notes...")
      }
   })
   t.SetColumnWidth(2, 24)
   t.SetColumnWidth(3, 156)
   w.SetContent(t)

   w.ShowAndRun()
}

func getIcon(i int) fyne.Resource {
   switch i%3 {
   case 1:
      return theme.HomeIcon()
   case 2:
      return theme.MailSendIcon()
   default:
      return theme.MediaVideoIcon()
   }
}

Using this approach you can build more complex table content, showing a richer experience for your users. This approach will continue to work well and deliver good design and performance.

Into the future

Add to this that in Fyne v2.3.0 we introduced SetRowHeight and there are more possibilities for creating advanced tables whilst supporting the large data sizes and high performance that the API is designed to enable. Future versions may provide a way to manage this even more efficiently, but that API has yet to be designed.