Lightning Web Components – How to Create Nested Template for:each for a Map of Arrays

LWC does not support expression evaluation in the markup yet. I have raised an idea for it a few months back.

You have alter your JS to support complex javascript object with index of your choice.

import { LightningElement, track, api } from 'lwc';

    export default class App extends LightningElement {

        @api empNames = [ { name: "A" , index : 1} ,{ name: "B" , index : 2} , { name: "C" , index :3} ];
    }

Markup:

<template>
      <ul>
        <template for:each={empNames} for:item="employee" for:index="index">
             <li key={employee.index}> Employee Record {employee.index}
                {employee.name} 
             </li>
        </template> 
    </ul>
</template>

Playground Link.

Before this answer, no, I have not implemented such a feature. However, doing so is pretty trivial, so I decided to write one for you. This is not a full-scale, production-ready code, simply an example to get you started with infinite scrolling in LWC. Please see the Playground I created for this.

HTML:

<template>
    <div class="scrollContainer" onscroll={handleScroll}>
        <div class="scrollArea" >
            <table>
                <thead>
                    <th>Column 1</th>
                    <th>Column 2</th>
                </thead>
                <tbody>
                    <template for:each={items} for:item="item">
                        <tr key={item.id}>
                            <td>
                                {item.name}
                            </td>
                            <td>
                                {item.desc}
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
</template>

CSS:

.scrollContainer {
    max-height: 300px;
    overflow: auto;
    position: relative;
    border: 1px solid black;
}
.scrollArea {
    position: relative;
}

JS:

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    @track items = [];
    connectedCallback() {
        this.items = [];
        let i = 0;
        while(++i < 30) {
            this.items.push( {id:i, name:"Row "+i, desc: "Example Row "+i} );
        }
    }
    handleScroll(event) {
        let area = this.template.querySelector('.scrollArea');
        let threshold = 2 * event.target.clientHeight;
        let areaHeight = area.clientHeight;
        let scrollTop = event.target.scrollTop;
        if(areaHeight - threshold < scrollTop) {
            let i = 0, t = this.items.length;
            while(++i < 30) {
                this.items.push( {id:i+t, name:"Row "+(i+t), desc: "Example Row "+(i+t)} );
            }
        }
    }
}

I leave it as an exercise to the reader to implement SLDS and other relevant styles. This is meant only to serve as a demo on how to infinite scroll in LWC.