SOURCE

const tabledata = [

];

const table = new Tabulator('#app', {
    //   data: tabledata,
    layout: 'fitColumns',
    responsiveLayout: "hide",  //hide columns that dont fit on the table
    tooltips: true,            //show tool tips on cells
    addRowPos: "top",          //when adding a new row, add it to the top of the table
    history: true,             //allow undo and redo actions on the table
    //   pagination: "local",       //paginate the data
    pagination: "remote", //enable remote pagination
    ajaxURL: "http://localhost:3000/mock/table", //set url for ajax request
    paginationDataSent: {
       "page": "start", //change page request parameter to "pageNo"
       "size": 'end',
    },
    paginationSize: 5,         //allow 7 rows per page of data
    movableColumns: true,      //allow column order to be changed
    resizableRows: true,       //allow row order to be changed
    columns: [
        { title: 'Name', field: 'name', width: 150 },
        { title: 'Age', field: 'age', hozAlign: 'left', formatter: 'progress' },
        { title: 'Favourite Color', field: 'col' },
        { title: 'Data of Birth', field: 'dob', sorter: 'date', hozAlign: 'center' },
    ],
})

// axios.get('http://localhost:3000/mock/table?start=1&end=30').then((response) => {
//     //   table.updateData(response.data);
//     table.setData(response.data);
//     table.setPage(2);
// })

<div id="app"></div>
<link href="https://unpkg.com/tabulator-tables@4.6.2/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.6.2/dist/js/tabulator.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

#app {
    width: 100%;
}