SortTable: Column with custom view? onPress for cell and/or row?

[julianpistorius]

Problem:

• I am using SortTable to display a list of items
• I want a message to trigger when the user presses on a row (or an individual cell)
• I want to be able to add a non-text element to a column (e.g. a 🚀 'launch' icon, ➡️ 'right arrow', or something like that) to give the user a clue to press the row/cell

Background:

• I can't see a way to specify a custom view for a column in SortTable (like I can for Element.table)
• It seems I can only specify some value (Int, Float, String, etc.), and a function to convert that content to a string
• This string is then converted to an Elm-UI Element.text
• I also can't see a way to provide an onPress message for a row

Possible solutions I can think of:

• Create my own custom SortTable widget with this functionality
• Use a list of cards instead of a data table

Hopefully I'm not missing something obvious.

[Orasund]

My first intuitive response would be to use buttonRow and buttonColumn or to specify a new Table widget. Both aren't great solutions.

A better solution would be to add a CustomColumn to the opaque column type. This would bumb up the version number to 2.1.0.

Thanks for your Issue

[Orasund]

After a bit of tinkering I believe that my solution of adding a CustomColumn would not work, because a column can't trigger a msg.

So a better solution would be to add a new Table all together. Personally I'm not sure what the features of such a table would include. Ideally we want something like Material Design's Data Table.

If you feel like that's something you want to contribute, please do. Else it might be just easier for you to use one of the solutions you proposed.

[julianpistorius]

Thanks @Orasund.

For interest one of the other UI toolkits I've been inspired by is PatternFly. It distinguishes between:

1. Data List
2. Table

https://www.patternfly.org/v4/design-guidelines/usage-and-behavior/lists-and-tables

Use data lists when:

• A flexible layout is more important than arranging information in a grid
• You want to include active content like a chart
• Content displayed may vary between rows

Use tables when:

• Users will want to consume data as a grid (i.e. structured rows and columns)
• You want column headers

Both can be sorted and filtered.

In the Material Design world these seem to map to:

• List
• Data Table

• Lists should be sorted in logical ways that make content easy to scan, such as alphabetical, numerical, chronological, or by user preference

• Lists present content in a way that makes it easy to identify a specific item in a collection and act on it.

• Data tables display information in a grid-like format of rows and columns. They organize information in a way that’s easy to scan, so that users can look for patterns and insights.

For my particular use case:

Requirements

• Make it easy to scan items
• Easy to identity a specific item
• Easy to act on a specific item

Non-requirements

• A grid-like format of rows and columns
• Headers
• Presenting a large amount data so the user can look for patterns and insights

Conclusion

• Use a List widget instead of the SortTable widget
• Use a separate filter & sort widget (See PatternFly filtering guidelines for inspiration) instead of table headers

Thanks again for your helpful feedback. This has been a useful exercise. If anything comes out of this that seems worth contributing back I'll let you know. :wave: