Hiding a Table Block If No Results Found

Ask the community
,
1

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>
2

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

2 Likes
3

Much appreciated!!! :clap:

4

@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!

1 Like
5

Hey @flavi,

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

Thanks for bringing this to our attention.

6

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?

Screenshot 2023-09-23 at 11.45.20 AM
Screenshot 2023-09-23 at 11.45.20 AM2376×392 4.93 KB

Screenshot 2023-09-23 at 11.45.54 AM
Screenshot 2023-09-23 at 11.45.54 AM1022×1522 72.2 KB

Screenshot 2023-09-23 at 11.46.22 AM
Screenshot 2023-09-23 at 11.46.22 AM1106×474 51.8 KB

7

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.

2 Likes
8

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

9

Thanks, Matthieu! Unfortunately, I can’t seem to get this to work either, to hide any tables with no results. Hoping there will be a native hide table option soon, or a code workaround until there is.

10

Hey all, just wanted to let you know that we have an open task on this, I will keep you all posted once the option is supported natively.

I think it will be available soon :slight_smile: