title: How can I implement infinite scrolling on a table using react-virualised?
body: <p><strong>I have been struggling with react-virtualised docs</strong> They have full-featured example tables.
  All I want is simple infinite scrolling for my table. Please if anyone can help.
  I just want to render my content when it's visible on the screen.<br/>
  <strong>NOTE: I am not pulling the data from any API I have static data(an array of objects) saved into my local folder.</strong><br/>
  Please see a screenshot of my app below.
  <a href="https://i.stack.imgur.com/yY33o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yY33o.png" alt="enter image description here" /></a></p>
  <p>Below is my code.</p>
  <pre><code>const renderRows = items.map((data, index) =&gt; {
      return (
        &lt;tr
          className=&quot;table__row&quot;
          key={data.id}
          onClick={() =&gt; onRowClick(data.id)}
        &gt;
          &lt;td style={{ marginRight: '2px' }}&gt;
            &lt;img
              onClick={(e) =&gt; {
                toggleStarSelect(e, data.id);
              }}
              src={Star}
              className=&quot;star&quot;
              alt=&quot;star&quot;
              style={{ padding: '2px' }}
            /&gt;
  
            {data['#']}
          &lt;/td&gt;
          &lt;td&gt;
            &lt;ImageLoadHandler
              isloaded={isloaded}
              handleImage={handleImage}
              data={data}
            /&gt;
  
            &lt;span style={{ padding: '10px' }}&gt;{data.Name}&lt;/span&gt;
            &lt;span
              style={{
                backgroundColor: 'lightgray',
                opacity: '0.5',
                fontSize: '13px',
              }}
            &gt;
              {data.Symbol}
            &lt;/span&gt;
          &lt;/td&gt;
          &lt;td&gt;{data.Price}&lt;/td&gt;
          &lt;td&gt;{data['1h']}&lt;/td&gt;
          &lt;td className={data['24h'] &gt; 0 ? 'green' : 'red'}&gt;
            {data['24h'] &gt; 0 ? (
              &lt;img className=&quot;arrowicon&quot; src={SortUpGreen} alt=&quot;sort-up-green&quot; /&gt;
            ) : (
              &lt;img className=&quot;arrowicon&quot; src={SortDownRed} alt=&quot;sort-down-red&quot; /&gt;
            )}
            {data['24h']}%
          &lt;/td&gt;
          &lt;td&gt;{data['7d']}&lt;/td&gt;
          &lt;td&gt;{data['Mkt Cap']}&lt;/td&gt;
          &lt;td&gt;{data['24h Vol']}&lt;/td&gt;
          &lt;td style={{ padding: '0', paddingRight: '8px' }}&gt;
            &lt;Suspense fallback={&lt;div className=&quot;loading&quot;&gt;loading...&lt;/div&gt;}&gt;
              &lt;Graph data={data} idx={index} /&gt;
            &lt;/Suspense&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      );
    });
  
    return (
      &lt;div className=&quot;app&quot;&gt;
        &lt;header&gt;
          &lt;Header /&gt;
        &lt;/header&gt;
        &lt;table className=&quot;app__table&quot;&gt;
          &lt;thead className=&quot;app__tablehead&quot;&gt;
            &lt;tr&gt;
              &lt;th
                onClick={() =&gt; requestSort('#')}
                className={getClassNamesFor('#')} //returns ascending or descending
              &gt;
                #
              &lt;/th&gt;
              &lt;th
                onClick={() =&gt; requestSort('Name')}
                className={getClassNamesFor('Name')}
              &gt;
                Coin
              &lt;/th&gt;
              &lt;th
                onClick={() =&gt; requestSort('Price')}
                className={getClassNamesFor('Price')}
              &gt;
                Price
              &lt;/th&gt;
              &lt;th
                onClick={() =&gt; requestSort('1h')}
                className={getClassNamesFor('1h')}
              &gt;
                1h
              &lt;/th&gt;
              &lt;th
                onClick={() =&gt; requestSort('24h')}
                className={getClassNamesFor('24h')}
              &gt;
                24h
              &lt;/th&gt;
              &lt;th
                onClick={() =&gt; requestSort('7d')}
                className={getClassNamesFor('7d')}
              &gt;
                7d
              &lt;/th&gt;
              &lt;th
                onClick={() =&gt; requestSort('Mkt Cap')}
                className={getClassNamesFor('Mkt Cap')}
              &gt;
                Mkt Cap
              &lt;/th&gt;
              &lt;th
                onClick={() =&gt; requestSort('24h Vol')}
                className={getClassNamesFor('24h Vol')}
              &gt;
                24h Vol
              &lt;/th&gt;
              &lt;th className=&quot;nohover&quot;&gt;Last 7 days&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;{renderRows}&lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    );
  </code></pre>