I find the table user interface extremely confusing for the following reasons:
it is not clear where a column in the header starts and where it ends, and the same happens for a column in the table (unless I select a cell in that case the cell is highlighted with a blue border as in the image below)
the "order by" icon with the arrow up and arrow down symbol is aligned next to the column title and not the end of the column which would have given a visual cue of where the column ends
Perspective (I've added the tag to your question) uses CSS styles. Most of the components have a props.styles where you can control these.
In the Project Browser, right-click on Perspective → Styles, and create a new style class, e.g., tableHeader.
Go to the Border section and hit the Unlink Sides button so that you can control each of the bounding box borders individually. Set the right border to Solid, 1 px, and select a color. (See Perspective Built-In Themes - Ignition User Manual 8.1 - Ignition Documentation for how to do this consistently through your application. Don't just apply random colors.) OK your style to save it.
Select the table. On the Perspective Property Editor go set headerStyle.classes : tableHeader
(You can select the class from the dropdown in the classes section.)
Hi, I know about the possibility of editing the style of the table but was thinking about the default in Ignition which is not very user friendly.
Anyway setting the border style and applying it to a table is already leaps better, below how it renders now.
I find the "order by" icon still confusing just after the text, I would have put it aligned to the right but don't know whether it's possible to address it through CSS.
