I have a table that I am working on, and despite following several different forum threads, I am having trouble getting the column headers to label correctly. I have matched the field and header.title fields in the column section of the props editor. But the actual display keeps reordering the columns seemingly randomly, and it won't allow me to put a space in the data value, even though it matches what I've done down below. Any advice is appreciated.
At a quick glance your first field in your data is DeviceID with no space.
When you enter that into the field part of the columns element you need to match that column name exactly at it is in your data.
Right now, you have it typed as Device ID with a space so it will not be able to match it to a column in your data.
Also, I am not sure what the validity is of spaces in column names in DBs, but it seems like something to generally avoid.
1 Like
Yes, spaces are not valid in JSON object keys. If you want a column heading to have spaces when displayed, do that only in props.columns[x].header.title.
The space was removed from the first field simply because it wouldn't let me leave it there as I was attempting to edit other fields. I could not click off of the element until the issue was resolved.
I need the spaces for general english and naming clarity when clients are looking at this table. A column labeled "DailyTotal" vs "Daily Total" has professionalism implications to our clients, and mostly my boss won't accept a version where the space isn't there.
I tried that, but without an entry in the props.data. [x ] field, the column header was coming up blank.
There is a difference between what is in the data, and what is being displayed.
The data and field name should be valid JSON, with no space. Then you can change the displyed value to whatever, including the space.
Notice how the field name and the title do not have to match.
The column name in the data, and the field name under the columns property must match.
1 Like
Yes, I understand having more legible names in the display, but it is as @pturmel said.
For this example, the column name in props.data should be DeviceID (no spaces). Then in the props.columns[x].field you should enter DeviceID (exactly matching how it appears in your data). Then to change how the column name appears to the user you use the props.columns[x].header.title including spaces or anything else.
2 Likes