virtual scrolling on sub groups about ngx-ui-scroll

[dhilt]

@bernard4uece As I understand this is the another part of issue #68. The common way I see is to normalise your data to have a flat list instead of nested lists. Very rough, from

data = [
  { id: 1, name: 'gr1', items: [{ index: 1, name: 'A1' }, { index: 2, name: 'B1' }, ...], ... },
  { id: 2, name: 'gr2', items: [{ index: 1, name: 'A2' }, { index: 2, name: 'B2' }, ...], ... },
  ...
]

to

normData = [
  { groupId: 1, groupName: 'gr1', itemIndex: 1, itemName:  'A1' },
  { groupId: 1, groupName: 'gr1', itemIndex: 2, itemName:  'B1' },
  ...
  { groupId: 2, groupName: 'gr2', itemIndex: 1, itemName:  'A2' },
  { groupId: 2, groupName: 'gr2', itemIndex: 2, itemName:  'B2' },
  ...
]

or better

groups = [{ id: 1, name: 'gr1'}, { id: 2, name: 'gr2'}, ...]

normData = [
  { gid: 1, index: 1, name: 'A1' },
  { gid: 1, index: 2, name: 'B1' },
  ...
  { gid: 2, index: 1, name: 'A2' },
  { gid: 2, index: 2, name: 'B2' },
  ...
]

Previously we were feeding the Datasource with the initial data which had uncertain sub-items lists, now we will do it with normalised normData, that will allow the uiScroll to take care of sub-items precisely. Do not forget to increase bufferSize, say, to 20.

Then you may add intermediate items for heading:

groups = [{ id: 1, name: 'gr1'}, { id: 2, name: 'gr2'}, ...]

normData = [
  { isHeader: true, gid: 1, title: groups.find(gid => gid === 1).name },
  { gid: 1, index: 1, name: 'A1' },
  { gid: 1, index: 2, name: 'B1' },
  ...
  { isHeader: true, gid: 2, title: groups.find(gid => gid === 2).name },
  { gid: 2, index: 1, name: 'A2' },
  { gid: 2, index: 2, name: 'B2' },
  ...
]

Here we have headers and data-rows in a single array. So fix the headers view inside the template on the same level as the data-rows view:

  <div *uiScroll="let item of datasource">
    <div *ngIf="item.isHeader">
      {{item.gid}} -- {{item.title}}
      <hr>
    </div>
    <div *ngIf="!item.isHeader">
      {{item.gid}} -- {{item.index}} -- {{item.name}}
    </div>
  </div>

If you have 3 levels, normalise all and you will have a flat list of items of 3 types: headers, sub-headers, data-rows. Also, you may add footer-rows and whatever you need. The idea is to have simple 1-level array that could be easily sliced within the Datasource.get method.

The implementation of this approach in your particular case should take some time, and I'm afraid I can't do it (even I wanted!), but I hope my explanation will help.

[bernard4uece]

@dhilt thanks for the advise!! I think flattening the groups and it's items should do