Perspective Table - Where does Column > Justify = Auto inherit from?

Hi all!

Hopefully a trivial one this...

When setting up a perspective table and adding objects to the columns array, there is an attribute for 'justify' which sets the columns text position. This by default is set to 'auto', however I cannot figure out where it inherits from! (Default from auto is left justify)
Ideally, I'd like to set the whole table to be of center type using this 'auto' without having to manually set each one (albeit sadly the header still has to be set to center manually)

Thanks in advance!

1 Like


In the spirit of treating tables as artefacts to be read, don’t centre text within tables. Align table text as you would anywhere else; that is, aligned left. As text in tables tends to end up in narrow columns, don’t justify the text either – leave it ragged-right – or you will end up with rivers flowing down the tables, potentially causing confusion and certainly harming readability.

You will have to override the CSS. This isn't something that is settable from a property, when you set it to auto the component builds out the CSS using JS behind the scenes.

You can find the correct selector by using the developer tools in your browser of choice.

In this case you're looking for something like:

tc ia_table__cell content

1 Like

After a brief examination, the table cells don't "inherit" their justification from anything. The auto setting doesn't mean "use inherited setting" - it means "determine my justification based on column render type". Unfortunately, I don't see any render type where we don anything other than flex-start by default.

So your options are to either apply a justification to each column (which it sounds like you're not a fan of), or you could apply your own CSS rule in either the theme files or stylesheet.css resource (if you're using 8.1.22 or newer).

I recommend against the selector @lrose recommended because that will adjust the justification for ALL tables (including the Alarm Status Table and Alarm Journal Tables) and will probably also affect the headers/footers. You should probably target something like

[data-component="ia.display.table"] .tb .tc .content{
    justify-content: center

so that you're only targeting the content of a cell within the body of the Table.