How to set empty state for a table?

As you can see my table has 0 results and in the empty state I have given a string value, but when I preview it there is no message shown.

Is this a bug or am I doing something wrong?

Hey @ritvik_singhvi! This empty state message seems to be working as expected for me :thinking:

Quick question, do you know what version of table you're using? If not, would you mind sharing a screenshot of more of the right panel so I can try deducing from there? Thank you!

The difference i can notice is:
image

In my case I am getting just an empty array with no column names, will that affect it?

My Query response:

Don't see version written anywhere, but here is the right side of the component:

How strange! If you create a new table component and use just [] as the data, does it show the empty state?

I added a new table component from the right side and it does show the message when I manually add the [] data

I duplicated my old table component and for it I also manually set the data as [] and added an error message and it only shows the emoji so I found out the text color was also white and background was also white, hence it was not showing up :frowning:

It is fixed! Thank you. Btw the default color should be something else than white haha

One other issue I have is:
some queries are set to trigger manually so for those queries as well it is showing "No data found" whereas in reality it is not triggered yet. Can we do something around this?

@victoria

So glad you found the issue! Good point, I’ll write a ticket for this.

For your second question, do you want to customize the empty message? Or do you just want to run the query on page load?

I want to show the empty state message only after the query has been ran because if the query hasn't ran yet it will be empty from default right

Got it, thank you for taking the time to share! Added that to the ticket and will let you know when we can clarify this behavior :slight_smile:

In the meantime, you should be able to use Temporary State to create a workaround!

  1. Add a success handler to your query to Set a temporary state value to true
  2. Set that state's default value to false
  3. Set your table's empty state property to {{!queryRan.value ? "Query didn't run yet" : "No rows found" }}

Let me know how this works for you! See attached app JSON if you want to poke around with my setup! You can import this JSON file by clicking Create new (home page) > From JSON. Quick docs on importing apps here.


Screen Recording 2023-05-01 at 8.45.31 PM.mov

Thank you!

My pleasure! Let us know if you have any other questions :slight_smile: