Auto height table - css to set minimum table height

App Building
1

Hi

I'm using an auto height table, thing is, when the table is empty it doesn't play that nicely with the add new row feature as the column titles are hidden by the new row (see image below). Is it possible to set a min-height for a table using css whilst having it set to auto height? I've had a play but my CSS skills aren't up to scratch it seems..

Thanks for any pointers.

Screenshot 2023-02-28 at 15.50.36
Screenshot 2023-02-28 at 15.50.361646×336 107 KB

2

Hey @DavidS!

This is actually a feature that has been requested before, it's not currently supported but we can report back here if it is. In the meantime, you might try using adding some buffer rows to your data using a query transformer, something like:

const bufferRow = {
  id: null,
  name: null,
  email: null,
  sales: null
}
const bufferData = Array.from({length: 3}, () => bufferRow);
return Object.assign(bufferData, data);

It's not perfect since the empty rows will be selectable but may still be worth it!

Let me know if that helps, I imagine there are a number of variations you could do here to better suit your needs.
buffer_rows (1).json

3

nice workaround, thanks