DataTable adds unnecessary blank space after ajax.reload()

mending3

Link to test case: https://codesandbox.io/s/kind-bas-kcb6s
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

I know this made up class causes the blank space, but I think this is related to how DataTable renders the table

.flexText {
      display: inline-block !important;
      white-space: break-spaces;
      width: 330px;
      cursor: auto !important;
      overflow-wrap: anywhere;
    }

I don't know what to do next

Steps to reproduce:

1. scroll to bottom
2. click the reload table button
3. you should see the blank space after you scroll to bottom again

allan

Hi,

Thanks for the link. When using the Scroller extension you _must) have all rows in the table as the same height. This is to allow it to perform height calculations on rows which haven't yet been shown (thus how it allows millions of rows, even when it only actually renders a handful).

Because your rows are of unequal height, Scroller is simply breaking. If you remove the scroller: true option - it works as it should since it is no longer using virtual scrolling calculations.

How many records do you expect your table to have?

Allan

mending3

I think that settles down. Thank you so much