JavaScript Data Table Library

This JavaScript data table library fetches a list of to do entries from a REST API, and displays them in a table with 3 columns (ID, Title, and Completed). Initially, it loads the first 20 entries and shows them. When the user scrolls to the bottom of the page, it appends the next 20 entries to the table. This continues until all entries are shown. The code achieves this by adding an event listener to the scrolling of the container element, which calls the appendEntries function after a delay of 1000 milliseconds.

How to Use JavaScript Data Table Library

First of all, create the HTML table element as follows:

<header>
        <h2>
            Infinitely scrollable Data table
        </h2>
    </header>
    <div class="container">
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Title</th>
                    <th>Completed</th>
                </tr>
            </thead>
            <tbody></tbody>
            <tfoot>
                <tr>
                    <td></td>
                    <td><span class="loader"></span></td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>

Now, style the table using the following CSS styles. These CSS styles are optional, you can define your own styles according to your needs.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.cd__main{
display: block !important;
}
html, body {
    width: 100%;
    height: 100%;
}

.container {
    width: 60%;
    height: 500px;
    overflow-y: scroll;
    margin: 0 auto;
}

header {
    padding: 10px;
    text-align: center;
    margin: 10px;
}

table {
    width: 100%;
    border-spacing: 0px;
    border-collapse: collapse;
}

thead {
    position: sticky;
    top: 0;
}

th {
    border: 1px solid rgb(228, 228, 228);
    background-color: rgb(109, 185, 109);
    color: white;
    padding: 10px;
}

td {
    border: 1px solid rgb(228, 228, 228);
    padding: 10px;
}

tbody tr:nth-child(odd) {
    background-color: rgb(238, 238, 238);
}

tfoot td {
    text-align: center;
    border: none;
}

tfoot tr {
    border: 1px solid rgb(228, 228, 228);
}

.loader {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-left-color: rgb(214, 214, 214);
    border-right-color: rgb(214, 214, 214);
    border-radius: 50%;
    animation: spin 0.5s ease-in 0s infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

Finally, add the following JavaScript function:

let tbody = document.getElementsByTagName('tbody')[0];
let length = 0, count = 20;
let allEntries = [];
let container = document.getElementsByClassName('container')[0];

container.addEventListener('scroll', () => {
    if(container.scrollTop + container.clientHeight >= container.scrollHeight)
        setTimeout(appendEntries, 1000);
});

async function getAllEntries() {
    let res = await fetch('https://jsonplaceholder.typicode.com/todos');
    allEntries = await res.json();
    appendEntries();
}

function getNextEntries(start, count) {
    let toAppend = allEntries.slice(start, start+count);
    let entriesStr = '';
    toAppend.forEach(entry => {
        entriesStr += `
            <tr>
                <td>${entry.id}</td>
                <td>${entry.title}</td>
                <td>${entry.completed ? 'Yes' : 'No'}</td>
            </tr>`;
    });
    return entriesStr;
}

function appendEntries() {
    let entries = getNextEntries(length, count);
    tbody.insertAdjacentHTML('beforeend', entries);
    length += count;
}

function init() {
    getAllEntries();
}

init();

That’s all! hopefully, you have successfully created JavaScript Data Table Library. If you have any questions or suggestions, feel free to comment below.