Perspective change table header size

Ignition
,
1

All of the tables when you enable headers default to a 30px height (as far as I can tell), and I cannot figure out how to change this. In particular I am trying to make that header 20px currently. Is there a way to target that property? Or is that property not accessible to us?

Included in this is the desire to change the base height per row, which seems to coincide with the header size, but I again cannot find that property.

2

I am interested in this also. I’m currently trying to display a single row of data + header in a small space. I’ve changed the text height to 1.5vmin, which shrinks the text size as desired but the header still contains a lot of white space.

3

You might be able to change this via your css theme. Will check in an hour or so

Update: it doesn’t look like it

4

@wade.dunham this is now possible via theming. You can override the following class in your own .css file (please follow IA's method of implementing theming):

div.th-container.ia_table__headContainer {
    height: 20px;
}

NOTE: This will change the style of all tables

This is a little trickier :thinking: I haven't found how to do this yet. I will try to have more of a play and feedback if I find anything.

If you need a more in depth explanation of how I found the .css solution please let me know :slight_smile:

1 Like
5

Thanks for pointing this out, I'll remember it for next time. Unfortunately I don't want to change the style of all tables as these ones are a once off thing. It's not a big issue, I think I'll just put up with it for now.

Exposing that property in the designer would be a nice future change...?

6

I thought this might be the case. It is possible to do by:

  1. Create a dummy style (mine is called 'h-20' and is placed in the root of the Styles folder) in the designer using the conventional methods

  2. Apply the style class to the table (should be assigned at props.style.classes)

  3. Amend the css I posted previously too:

div.psc-h-20.ia_tableComponent div.th-container.ia_table__headContainer {
    height: 20px;
}

This will only apply the height setting to table components with the Ignition style (in my case h-20). Note in the css selector that Ignition prefixes the custom styles with psc- so that you can find them easily, and I assume so it doesn't override any of their own internal classes.

Although this method works, IMO it's not very supportable due to the disconnection between the dummy style class and the css file. It would have to be well documented and/or understood by anyone modifying it in the future.

This would be a better solution. I think I will create a post where we can collate all the properties that would be nice to expose and we can then create a feature request based on it :thinking:

EDIT: Collation Post: [FEATURE] Perspective Component Styles

7

It doesnt have to be the root but then you will have to add the path to it and escape the '/' with '\'
path/to/style/header/h-20 =>
.psc-path\/to\/style\/header\/h-20
Kinda ugly here but atleast you keep up a nice folder structure in the designer xd

1 Like
8

Thanks @victordcq, forgot to mention there are the possibilities of doing this :sweat_smile:

1 Like