ListView with section header

[TakasurAtWork]

Use case

iOS provides API for displaying section headers in UITableViews (aka list)

Proposal

Please provide a way to show sections header in Beagle List as well.

[Tiagoperes]

Hello @TakasurAtWork

It would be very nice to have sticky headers (section headers) in the ListView component. Unfortunately, this is not so simple. The ListView is one of the most complex parts of Beagle and extending it with this feature would take a considerable amount of work on both iOS and Android libs.

Because of other priorities, the team can't implement this feature right now. This is not to say we'll never implement it, but we can't put in our backlog or give it a due date. Here are some alternatives:

• Non sticky titles: you can have titles in your data source with the support for multiple templates. They won't be sticky, but that's all you would miss. (Docs).
• Custom component: this may not be ideal, but you could implement your whole list as a custom component. This has the disadvantage that this list's template wouldn't be server driven, but you'd be able to implement your sticky headers natively.

[TakasurAtWork]

Custom component: this may not be ideal, but you could implement your whole list as a custom component. This has the disadvantage that this list's template wouldn't be server driven, but you'd be able to implement your sticky headers natively.

Can you please briefly explain why the list's template in a custom component cannot be server driven?

[Tiagoperes]

Let me try to better explain what I mean.

Example with the ListView (alternative 1 in my previous comment):
https://playground.usebeagle.io/#/cloud/S3-f5874f69-dae9-4a54-b527-c022b0489a10

The problem with this approach is that you have no way of making the section titles stick to the screen.

The idea of the second approach is to not use the ListView at all, but instead create a new custom component, like below:

{
  "_beagleComponent_":"custom:myList",
  "sections":[
    {
      "title":"T",
      "items":[
        {
          "name":"Telsin",
          "race":"Terris",
          "planet":"Scadrial",
          "isMistborn":false,
          "age":38,
          "sex":"female"
        },
        {
          "name":"TenSoon",
          "race":"Kandra",
          "planet":"Scadrial",
          "isMistborn":false,
          "age":40,
          "sex":"male"
        }
      ]
    },
    {
      "title":"K",
      "items":[
        {
          "name":"Kaladin",
          "race":"Alethi",
          "planet":"Roshar",
          "isMistborn":false,
          "age":24,
          "sex":"male"
        },
        {
          "name":"Kelsier",
          "race":"Half-skaa",
          "planet":"Scadrial",
          "isMistborn":true,
          "age":38,
          "sex":"male"
        }
      ]
    },
    {
      "title":"V",
      "items":[
        {
          "name":"Vin",
          "race":"Half-skaa",
          "planet":"Scadrial",
          "isMistborn":true,
          "age":20,
          "sex":"female"
        }
      ]
    }
  ]
}

Notice that we can't pass "template" to this new custom component, unless we implement how to interpret this property in the frontend.

It's easy to see that sections is a List of Section and Section is just an object with a title and a list of items. It would be straight forward to implement this property. But what type would template be if we decided to implement it? It is a structure very particular to Beagle and Beagle doesn't provide you a simple method to transform this structure into a view. Even if it id, this template must be rendered within a context (the current item). Beagle doesn't have a simple way for transforming the server driven data (_beagleComponent_, _beagleAction_, etc) into an actual view given a "current context".

This would be a neat feature. But for now, to support templates on your own custom components, you'd have to basically reimplement the ListView, which would be too much work.

[Tiagoperes]

@TakasurAtWork I hope this example helped you. I'm closing this issue due to inactivity. Feel free to reopen it if you still have a problem.