Fyne Table Put In Check

8 min read Sep 30, 2024

Putting Checkboxes in Your Fyne Tables: A Comprehensive Guide

Fyne is a powerful cross-platform GUI toolkit for Go, renowned for its ease of use and beautiful visuals. One common requirement when building data-driven applications is the ability to present data in a tabular format. This often calls for the use of checkboxes, allowing users to interact with the data by selecting or deselecting specific entries.

This guide explores how to effectively integrate checkboxes into your Fyne tables, empowering your applications with enhanced user interaction and functionality.

Why Use Checkboxes in Fyne Tables?

Checkboxes provide a convenient and intuitive way for users to make selections within a table. They are ideal for:

Selection: Allowing users to choose multiple rows for actions like deleting, editing, or exporting.
Filtering: Creating dynamic filters based on selected entries.
Status Indication: Reflecting the state of items in a table, such as "Completed" or "Pending."

Implementing Checkboxes in Fyne Tables

Fyne doesn't directly support checkboxes within its Table widget. However, we can achieve this functionality by combining the Table with custom CellRenderer implementations. Here's a breakdown of the approach:

Creating a Custom CellRenderer:

We'll create a new CellRenderer that displays a checkbox. This renderer will handle the checkbox's state (checked or unchecked) and respond to user interactions.

import (
    "fyne.io/fyne/v2"
    "fyne.io/fyne/v2/canvas"
    "fyne.io/fyne/v2/widget"
)

type CheckboxCellRenderer struct {
    widget.BaseWidget
    Checked bool
}

func (r *CheckboxCellRenderer) CreateRenderer() fyne.WidgetRenderer {
    c := canvas.NewRectangle(color.Gray{0.9})
    c.SetMinSize(fyne.NewSize(20, 20))
    c.SetCornerRadius(5)

    return &checkboxRenderer{
        c: c,
        r: r,
    }
}

type checkboxRenderer struct {
    c *canvas.Rectangle
    r *CheckboxCellRenderer
}

func (r *checkboxRenderer) MinSize() fyne.Size {
    return r.c.MinSize()
}

func (r *checkboxRenderer) Objects() []fyne.CanvasObject {
    return []fyne.CanvasObject{r.c}
}

func (r *checkboxRenderer) Layout(size fyne.Size) {
    r.c.Resize(size)
}

func (r *checkboxRenderer) Refresh() {
    // Add logic to update the checkbox's state visually
    // ...
}

func (r *checkboxRenderer) Destroy() {}

Integrating into the Table:

We'll modify the Table widget to use our custom CheckboxCellRenderer. Here's how:

import (
    "fyne.io/fyne/v2/data/binding"
    "fyne.io/fyne/v2/widget"
)

// ...

func createTable() *widget.Table {
    table := widget.NewTable(
        func() int {
            return len(data) // Data is your underlying data source
        },
        func() int {
            return 3 // Number of columns
        },
        func(id widget.TableCellID) fyne.CanvasObject {
            if id.Col == 0 {
                return widget.NewLabel(data[id.Row].Name) // Display Name
            } else if id.Col == 1 {
                return widget.NewLabel(data[id.Row].Description) // Display Description
            } else if id.Col == 2 { 
                // Create and return your CheckboxCellRenderer instance
                return &CheckboxCellRenderer{
                    Checked: false, // Set initial state
                }
            }

            return nil
        },
    )

    return table
}

Handling Checkbox Events:

We need to respond to user interactions with the checkboxes, such as clicks. We can achieve this by:

Adding a Click Listener: Listen for clicks on the CheckboxCellRenderer and update its Checked state.
Updating the Data: When the checkbox state changes, update the corresponding data item.

func (r *CheckboxCellRenderer) MouseIn(ev *fyne.MouseEvent) {
    // ... handle hover effect (optional)
}

func (r *CheckboxCellRenderer) MouseOut(ev *fyne.MouseEvent) {
    // ... handle hover effect (optional)
}

func (r *CheckboxCellRenderer) MouseUp(ev *fyne.MouseEvent) {
    r.Checked = !r.Checked
    r.Refresh()

    // ... update your data source here
}

Example: Managing Task Completion

Let's illustrate this concept by building a simple task management application:

package main

import (
    "fyne.io/fyne/v2"
    "fyne.io/fyne/v2/app"
    "fyne.io/fyne/v2/canvas"
    "fyne.io/fyne/v2/data/binding"
    "fyne.io/fyne/v2/widget"
)

type Task struct {
    Name        string
    Description string
    Completed    bool
}

func main() {
    a := app.New()
    w := a.NewWindow("Task Manager")

    data := []Task{
        {Name: "Grocery Shopping", Description: "Buy milk, eggs, bread", Completed: false},
        {Name: "Write Report", Description: "Complete the weekly report", Completed: false},
        {Name: "Book Appointment", Description: "Dentist appointment", Completed: false},
    }

    table := widget.NewTable(
        func() int {
            return len(data)
        },
        func() int {
            return 3 // Name, Description, Checkbox
        },
        func(id widget.TableCellID) fyne.CanvasObject {
            if id.Col == 0 {
                return widget.NewLabel(data[id.Row].Name)
            } else if id.Col == 1 {
                return widget.NewLabel(data[id.Row].Description)
            } else if id.Col == 2 {
                return &CheckboxCellRenderer{
                    Checked: data[id.Row].Completed,
                }
            }
            return nil
        },
    )

    // ... add logic to update data and checkbox state on click ...

    w.SetContent(fyne.NewContainerWithLayout(layout.NewBorderLayout(nil, nil, nil, nil), table))
    w.ShowAndRun()
}

In this example, we've created a Task structure to store task information, including a Completed boolean flag. When the user clicks the checkbox, we update the Completed state of the corresponding task in our data slice.

Best Practices for Using Checkboxes in Tables

Data Binding: For larger datasets, consider using data binding to synchronize checkbox states with your data model. This improves performance and avoids manual updates.
Consistent Appearance: Maintain a uniform style for your checkboxes to create a visually cohesive table.
Clear Visual Feedback: Ensure the checkbox's appearance clearly indicates its checked or unchecked state.
Accessibility: Use ARIA attributes and appropriate keyboard controls to ensure accessibility for users with disabilities.

Conclusion

By using custom CellRenderer implementations, you can effectively integrate checkboxes into your Fyne tables. This enables you to build interactive and engaging data-driven applications that enhance user experience. By following best practices and focusing on data consistency and clear visual feedback, you can create tables that are both functional and visually appealing.