oracle-jet

How to set infinite scroll in OJET Table?


I am using OJET framework's oj-table component. The structure of the table looks as below:

    protected render(): VComponent.VNode {
    return (
      <div>
        <oj-table
          id="table"
          aria-label="Lists"
          selectionMode={this.selectedSelectionMode}
          data={this.dataSource}
          columns={this.columns}
          class="oj-bg-neutral-0"
        ></oj-table> 
      </div>
    )};

Can someone please help on how I can set the scrolling as infinite-scroll? There should be a way in which the records should load as we scroll in the table. I am new to OJET framework and do not have much idea how we can achieve this. Any help is appreciated.


Solution

  • After a lot of documentation re-read I found an answer for this issue. In oracle-jet, they have added a property to the <oj-table> called scrollPolicy.

    I have modified the code as below with scrollPolicy

       protected render(): VComponent.VNode {
          return (
              <div>
                  <oj-table
                   id="table"
                   aria-label="Lists"
                   selectionMode={this.selectedSelectionMode}
                   data={this.dataSource}
                   scrollPolicy="loadAll"
                   columns={this.columns}
                   class="oj-bg-neutral-0"
                  ></oj-table> 
              </div>
           )};
    

    Now the dataSource fetches more records as I reach to the end of the table. This is a cool feature and helped me reduce my first payload size. Posting it here so that it can help someone who got stuck on this. Cheers!!