Hiding a Table Block If No Results Found

[nocodeking]

I know the code below works to hide a list details block that returns no data, but is it possible to leverage this code to hide a table block?

<script>
window.addEventListener('get-record-list1', (e) => {
if (!e.detail.id) {
document.getElementById('list1').classList.add('d-none');
}
});
</script>

[matthieu_chateau]

Hi, in order to have the same results for a table block, this one should work

<script>
  const onRecords = (e) => {
    const table1 = document.getElementById('table1');
    if (e.detail && e.detail.length > 0) {
      table1.style.display = 'block';
    } else {
      table1.style.display = 'none';
    }
  };

  window.addEventListener('get-records-table1', onRecords);
</script>

Careful, it will also hide the block when choosing an inline filter or typing something in the search bar that gives 0 result

[nocodeking]

Much appreciated!!!

[flavi]

@Suzie Can this be added to to the table-block natively the way it is for other list blocks where it gives you options to hide or display message if no results? Thanks!

[Suzie]

Hey @flavi,

Just checked it, I’ll add this to our ToDos, will keep you posted once the update is released

Thanks for bringing this to our attention.

[nocodeking]

This has recently stopped working for me and i’m trying to figure out what’s preventing these tables from being hidden.

Do you see anything obvious in this configuration?

[matthieu_chateau]

Hi,

Nothing that I can see, nope,
Anyway, the possibility to hide a table block when no record should come soon to align with the list blocks.

[MailysDDM]

Hello!

Thank you for this script; it works perfectly well when the table name is table1, but when the name is different, it doesn’t work anymore (I have several tables on the same page)

I tried to adapt the script for a table called table5:

<script> const onRecords = (e) => { const table5 = document.getElementById('table5'); if (e.detail && e.detail.length > 0) { table5.style.display = 'block'; } else { table5.style.display = 'none'; } }; window.addEventListener('get-records-table5', onRecords); </script>

Do you have any clue why it doesn’t work in that case?

Many thanks,

Mailys