'Tabulator Dynamic Height with Pagination

I do not understand how to get tabulator to automatically set the proper pagesize for a dynamic height table. It is giving 2 pages but the amount of rows does not match the height of the table

JavaScript

var ActivityTable = new Tabulator("#ActivityTable",{
  index:"id",
  ajaxURL:"/api/getActionLogsData",
  layout:"fitDataFill",
  responsiveLayout:"hide",
  resizableColumns:false,
  layoutColumnsOnNewData:true,
  pagination:"local",
  paginationElement: document.getElementById("ActivityTablePagination"),
  height:"90%",

  columns:[
    {title:"First", field:"User.FirstName"},
    {title:"Last", field:"User.LastName"},
    {title:"Time", field:"CreatedAt",formatter:localRelativeTimeFormatter},
    {title:"Success", field:"Success"},
    {title:"Message", field:"Message"},
  ]
})

HTML

<div class="container-fluid h-100">
  <div class="d-flex justify-content-between">
    <h4>Activity Logs</h4>
    <div id="ActivityTablePagination"></div>
  </div>
  <div class="h-100" id="ActivityTable"></div>
</div>

Output Activity Log Display Page 1 Activity Log Display Page 2

tabulator


Solution 1:[1]

if you specify the height of the table, either in CSS or by using the height option, and don't define the paginationSize option the page size will be automatically set to fill the height of the table.

    height:"300px",
    pagination:"local", //enable local pagination.
});```

source http://tabulator.info/docs/4.1/page

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shafeeque OT

Related Questions