Data Table Demo

datatable_demo.html

<template> 
    <div class="slds-text-heading_large slds-text-align_left">
        Lightning DataTable - Infinite Scrolling
    </div>
    <br />
    <div class="slds-text-heading_medium"> Demo using @wire decorator </div>
    <br /> 
    <div class="demo-only" style="padding:0.5rem;background:#16325c">
        <div class="slds-text-color_inverse slds-text-heading_small"> 
            If you keep scrolling & search for first employee name, you would find many <span style="background:#ff0000"> duplicate rows. </span> 
            <br />  As Wire methods must  be used with  <b> cacheable=true </b> and Apex parameter never changes [in this case always 10] , Salesforce is 
            not calling Apex at all to improve performance.  
        </div>
      </div>
      <br />
    <c-datatable_wire></c-datatable_wire>

    <br />
    <div class="slds-text-heading_medium"> Demo using Imperative Apex </div>
    <br /> 
    <div class="demo-only" style="padding:0.5rem;background:#16325c">
        <div class="slds-text-color_inverse slds-text-heading_small"> 
            If you keep scrolling & search for first employee name, you would  <span style="background:#00FF00;color:#000"> not find duplicate rows. </span> 
            <br />  As Imperative can be used with  <b> cacheable=false </b> , even when Apex parameter never changes [in this case always 10] , 
            Salesforce still makes server call everytime to get new records.  
        </div>
      </div>
      <br />
    <c-datatable_imperative></c-datatable_imperative>
</template>

datatable_demo.js

import { LightningElement } from 'lwc';

export default class Datatable_demo extends LightningElement {}