Multiple items per row

[Climax777]

Hi

I would like to know if this supports multiple items per row, for example when flex-box is used? None of the examples show that it could.

[dhilt]

@Climax777 It's a great issue and currently we don't have such a functionality. Marking this issue with "Enhancement" label.

By the way, if you know the exact number of items per row, you may build an additional layer (via template and Datasource implementation) to provide N original items as 1 combined item...

[mahdi8731]

@dhilt Hi Would you please tell me more about how to do this? For example, if we want to have 4 or 5 items in each row and display it. I tried to responsive this scroll with flexLayout. But it didn't work for me because when I use this scroll, a div is created that causes the response to be disrupted. Do you have a solution for this? I use the following code to use flex:

<div class="viewport" fxLayout="row" fxLayoutAlign="space-around">
    <div *uiScroll="let item of datasource; let even = even" fxFlex="1 1 25%">
      <div class="item" [class.even]="even">
        <img src="assets/1_4ZMcCrF95AUvVzJ4S6Lo-g.png" width="200" height="200" >
      </div>
    </div>
  </div>

[dhilt]

@mahdi8731 Hi! Though we have had more flexibility since 2018, it is still impossible to build floating rows UI without a lot of extra efforts. And I'm not sure if this would be solved on the lib end. But if you need to have fixed number of items per row (say, 4), then you may try grouping approach I mentioned in the previous comment. Fortunately, I put grouping demo on stackblitz few months ago:

https://stackblitz.com/edit/angular-ngx-ui-scroll-grouping-datasource -- it is rough but it should be enough to catch the idea.

Also, there is one more demo on grouping which also could be helpful:

https://stackblitz.com/edit/angular-ngx-ui-scroll-grouped-data-table -- more ancient and more complex. As you may see, this is not about flex, but with fixed sub-item width (200), I guess, this solution might work for you.

[Fasteroid]

I managed it with subgrids and a lot of cursed ::ng-deep styling

%virtual-grid-table {

    --number-of-columns: 10;

    %fill-columns {
        display:               grid;
        grid-template-columns: subgrid;                     // align columns with parent
        grid-column:           span var(--number-of-columns); // fill all of them
    }

    display: grid;
    grid-template-columns: repeat(var(--number-of-columns), 1fr);
    grid-auto-flow: row;                            

    margin: 0 0;

    .header {
        @extend %fill-columns;
        grid-row-start: 1; // top
        grid-row-end:   2; 

        grid-auto-flow: column; // generate columns
    }

    .vscroll {
        @extend %fill-columns;

        height: 500px;                   // default height
        grid-row-start: 2;               // after header
        overflow-x:            hidden;

        & > ::ng-deep div[ui-scroll] {
            @extend %fill-columns;

            grid-template-areas: 
                "padding-backward"
                "data-region"
                "padding-forward"
            ;

            & > div {

                @extend %fill-columns;
                grid-area: "data-region";

                &[data-padding-backward] {
                    grid-area: "padding-backward";
                }

                &[data-padding-forward] {
                    grid-area: "padding-forward";
                }

                & .row {
                    @extend %fill-columns;
                    grid-auto-flow: row;
                    margin: 0px 0px; // fixes weird subgrid overflow (yay!)

                    & * {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
    }
}

<div class="vscroll">
    <div *uiScroll="let data of datasource" class="row">
        <!-- put some divs here; if styled to span all columns they will show up as extra rows -->
    </div>
</div>

[dhilt]

@Fasteroid Thank you for the contribution to the topic! By the way, is there any chance to get a demo on stackblitz/codesandbox/whatever? It might be very helpful for others to have it.