How to keep height in table rows even without records?

claudneysessa

How do I keep the size of 5 rows in a DataTable for in case I query the data and it returns a lower amount of records it keep the height and formatting of 5 rows for example? In case the resource is available this would be interesting for the query size indentification. Here's an example in Picture.

Table On Page Load.

Table After Find Text

In the case even without finding data I would like to keep the size of the table rows fixed, is this possible?

Obs: I would like to reserve a space on the page for the table to keep a layout and it stays the same size with or without data presented.

colin

Hi @claudneysessa ,

It's not possible by default, I'm afraid. When you filter, as you did, the table only shows the records that match, reducing the size - there's not an option to keep the table with blank rows.

You could add draw, or drawCallback that checks the number of rows on the page, and if less than the preferred, you could add blank rows into the table directly - something like this example here.

Cheers,

Colin

claudneysessa

Thank you, my friend, I really liked the solution and it answered what I needed! Fantastic tool this DataTable

KulvinderSingh

Hi @colin Thanks much, this also helped me.

amitshahc

try to use this css:

div.dataTables_wrapper div.dataTables_scrollBody {
  min-height: 300px;
}