How to keep height in table rows even without records?

How to keep height in table rows even without records?

claudneysessaclaudneysessa Posts: 6Questions: 1Answers: 0

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.

Replies

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    edited August 2018

    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

  • claudneysessaclaudneysessa Posts: 6Questions: 1Answers: 0

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

  • KulvinderSinghKulvinderSingh Posts: 1Questions: 0Answers: 0

    Hi @colin Thanks much, this also helped me.

  • amitshahcamitshahc Posts: 2Questions: 0Answers: 0

    try to use this css:

    div.dataTables_wrapper div.dataTables_scrollBody {
      min-height: 300px;
    }
    
This discussion has been closed.