beeware / beeware/toga

Add a mobile Table widget

Open
#4,301 1 comment 0 reactions 0 assignees View on GitHub
android enhancement iOS
Dominant language
Python
Stars
5.4k
Forks
827
Avg merge
9h 45m
Merged PRs (30d)
58

Description

### What is the problem or limitation you are having?

iOS does not have a table widget.

Android *has* a table widget, but it has significant performance issues, and isn't especially "mobile native" (see #1392).

### Describe the solution you'd like

We should add a "mobile native" Table widget for both iOS and Android.

On desktop platforms, a spreadsheet-like UI makes sense for tables, because there is ample horizontal and vertical real estate. However, this isn't the case for mobile platforms. Mobile platforms need to take advantage of limited screen real-estate and provide a mobile-optimized UX.

On Mobile, we should use the same underlying widget as DetailedList - each row of a Table will be visualized with a primary title and icon coming from the first column of the data, and secondary title coming from the second column of the data.

We should also add a "summary" attribute to Table's constructor, accepting a list of Column objects; this would allow the user to override the default "first two columns" rendering on mobile rendering.

If the user selects a row from the Table, the navigation context of the widget's scaffold is pushed, and the user is shown a "form"-like view of the entire row - a label / value display of each column.

The navigation context uses the same primary title as is used on the full Table view, and the back arrow to pops the navigation stack to return to the full Table view.

### Describe alternatives you've considered

It would conceptually be possible to support the display of more than just "primary and secondary" content. We could extend the widget to allow an arbitrary number of summary content rows, and potentially allow different styling of each of those rows.

We could also allow larger tablet screens to display summary content all in one row.

However, these options would complicate the initial implementation, so we'll stick with just "primary and secondary" for now.

### Additional context

See discussions on #4271 for background, especially:
* "Tables in mobile platforms" in the [top comment](https://github.com/beeware/toga/discussions/4271).
* [This comment](https://github.com/beeware/toga/discussions/4271#discussioncomment-16386244) and its replies.

See #3445 for a historical feature request for Table on iOS.

Contributor guide

Open the contributing guide

Research direction

Start by reading the existing Table and DetailedList widget implementations and the discussions linked from #4271. Define the mobile rendering around the first two columns or the new summary columns, then verify row selection opens a form-like view with navigation back to the table and that both iOS and Android behavior is covered.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, ios, python
Domain
frontend, mobile-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.