Columns not displaying on Perspective Table component when data property is empty array

[john.mullins]

Hello!

Just for starters, I am currently using Ignition 8.1.24.

I have noticed that I cannot get the column headers to show in the table component in Perspective when the data property is empty, or more specifically an empty array. I am dynamically populating the columns property with the columns and order I wish to display as well as their header titles. I recently tried to set the field property to an empty string, also tried null, to see if that might fix it. I got the idea from this post as it seemed to allude to this solving the issue:

Perspective fixed table header

The field property must match a column name in props.data, or the column settings will be applied in order to the columns of the data. You should expand the header field, and apply the header value you want displayed for the table. This value will not change with the data, so to apply header fields to a table regardless of the data coming back, you should leave the column.field property empty, and you should assign a column.header value you want for that column.

However, the column headers still do not show.

Any and all help is much appreciated, and let me know if I need to provide anymore information!

[cmallonee]

We need to see the code you're using to set the column information. If it's based off of your data, and the data si empty, then wouldn't your column definitions be empty as well?

[john.mullins]

Currently, I have functions written in my script libraries that call stored procedures. I return a dictionary from those scripts in the following format:

returnDict = {'Columns': list of columns, 'Data': array of dictionaries}

I have bound the columns field on a particular table to this Columns array and transformed it via a static replica of the column object.

This static replica lives in our script library. I tried copying the columns object into a custom component property, but it kept getting passed by reference and I could never make a copy of it to solely update. This i'm not worried about.

As you can see, the columns property is fully populated even when the data is an empty array. This is again because I have columns detached from data. I did this because dictionaries have no order, meaning the data property alone caused randomly ordered columns. Thus, in addition to the data I needed a columns array depicting the order I wanted the columns to appear in on the screen.

Hopefully this answers your question!

[cmallonee]

Ah, okay, I see what you're encountering. You're hitting a weird little edge-case caused by our implementation of the ability to render a message when the Table has no data. Due to the way the Table is built, the Headers displayed are a result of the data content because when there is no data we have to allow users to display a message in the Body of the Table. Since we're sort of injecting this forced message, the Headers see no data, so they don't display themselves.

I recommend making use of Table.props.emptyMessage.noData.text to inform your users as to what they need to do in order to render data, and ALSO bind Table.props.enableHeader with the following expression: len({this.props.data}) > 0

[john.mullins]

Sweet! That makes sense. I think I could recommend a future addition to this so that you could enable/disable this empty message feature and just display the columns instead if you so desired. This would save a little time for someone developing who doesn't care to have an empty data message. I do love the addition though and think it will be useful in the application I am currently working on! Thanks for the help!