JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table id="example" class="display nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Item 1</th>
            <th>Item 2</th>
            <th>Item 3</th>
            <th>Item 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data a</td>
            <td>data b</td>
            <td>data c</td>
            <td>data d</td>
        </tr>
        <tr>
            <td>data a</td>
            <td>data b</td>
            <td>data c</td>
            <td>data d</td>
        </tr>
        <tr>
            <td>data a</td>
            <td>data b</td>
            <td>data c</td>
            <td>data d</td>
        </tr>
        <tr>
            <td>data a</td>
            <td>data b</td>
            <td>data c</td>
            <td>data d</td>
        </tr>
        <tr>
            <td>data a</td>
            <td>data b</td>
            <td>data c</td>
            <td>data d</td>
        </tr>
        <tr>
            <td>data a</td>
            <td>data b</td>
            <td>data c</td>
            <td>data d</td>
        </tr>
        <tr>
            <td>data a</td>
            <td>data b</td>
            <td>data c</td>
            <td>data d</td>
        </tr>
        <tr>
            <td>data a</td>
            <td>data b</td>
            <td>data c</td>
            <td>data d</td>
        </tr>
        <tr>
            <td>data a</td>
            <td>data b</td>
            <td>data c</td>
            <td>data d</td>
        </tr>
        <tr>
            <td>data a</td>
            <td>data b</td>
            <td>data c</td>
            <td>data d</td>
        </tr>
        <tr>
            <td>data a</td>
            <td>data b</td>
            <td>data c</td>
           ...

CSS

.btn {
    background-color: #f6f6f6;
    border-color: #f6f6f6;
    color: #747474;
    margin: 10px 0;
    padding: 10px 16px;
    width: 100%;
}

JavaScript

var $table = $('#example').DataTable({
    "info" : false,
    "paginate" : false,
    "dom": '"top"i'
});

manageTabsInfiniteScroll($table, "#addMoreRows");

$table.draw();

function manageTabsInfiniteScroll($tabs, tabsButton) {
    var nbLineToDisplay = 5;
    var nbLineDisplayed = 0;
    
    $tabs.on('draw', function() {
        var pageInfo = $tabs.page.info();
        if ((pageInfo.recordsDisplay == pageInfo.recordsTotal) || (pageInfo.recordsDisplay == 0) || (pageInfo.recordsDisplay < 5) || (pageInfo.recordsDisplay < nbLineToDisplay)) {
            $(tabsButton).hide();
        } else {
            $(tabsButton).show();
        }
        
        // remet à 0 le compteur
        nbLineDisplayed = 0;
    });
    
    $(tabsButton).on('click', function () {
        nbLineToDisplay += 5;
        $tabs.draw();
    });
    
    // gestion de l'affichage de plus d'opérations
    $.fn.dataTable.ext.search.push (
        function( settings, data, dataIndex ) {
            
            if (nbLineDisplayed >= nbLineToDisplay) {
                return false;
            }
            
            nbLineDisplayed++;
            
            return true;
        }
    );
}