Column missing when there is no data in the table

[Jerry]

Hi,

I have a table and its data is coming from JSON and would be filtered by other component. Sometimes there is no data after filtering.

When there is no data, all the column disappear. Since there is no column in the table, user can’t add new row by table as well.

I did found the columns property of the table object stay the same. But not sure how to keep the columns there. Any suggestion helps. Thanks

[ben]

Hi @Jerry! Welcome to the community!

Yes, this seems to been an unfortunate behavior of the table when the input section is null (or {} or []), the table doesn’t no how to map the columns. The table temporarily stores the all of the columns until the page is refreshed, so that its more efficient if the data returns to the table. What is the flow of data in your app? Maybe there is workaround or suggestion we can provide here.

[Jerry]

Hi Ben,

My scenario is there are 2 tables in a page. Category table and material table.
The data of the material table is filtered by the category selected in the category table.
User can add/edit/delete material from the table.
It works pretty well when there is data.

But when there is no data, it is unable to add new material since the columns disappear.

[ben]

Is the schema always the same in the material table? Or is it dependent on the selection of the category table?

[Jerry]

The schema is always the same

[ben]

Gotcha,

Well one option here is to replicate this add row form (since we know the schema). This can be done in many ways, but one would be to add a button to the table which opens a modal with the form for the data. Here is a quick example of this:

Go into your table settings and select 'Show Custom Button', you can select a query (which we will make later), and give the button a name

You'll then see the button in the corner of the table:

Add a new modal:

Set the modal button to be hidden:

Create a new JS Code query, to open the modal (set this to be triggered on our add row button):

Drag Elements into your modal:

Update your insert query to include these form values and to trigger your fetch query onSuccess.

Set the modal submit button to trigger a JS Code query which closes the modal, and calls the insert query:

This will close the modal, and trigger the insert query, inserting the form data and onSuccess fetching data for the table

[ben]

There's also a more hacky approach, in which we take the schema of the data before it's filtered and then use this template object if the filtered data set is in actually empty. Here is an example of this:

{{ filteredData.data.length ? filteredData.data : _.mapValues(allData.data[0], () => [])}}

In this case we check if the filtered data length is zero, if there's data in there we use filteredData. Otherwise, we use the unfiltered data as a template for the table columns.

Then your insert row query, would again fetch new table data onSuccess. This solution would also increase the computation overhead of your app, so be wary of latency.

[Jerry]

Thanks Ben!
I chose second approach before. But I found the first approach looks even better!
Thank you for your super detailed reply.

[AnsonHwang]

@ben

_.mapValues(allData.data[0], () => [])}}

Thanks, I chose second one, it help me so much.