Chris Lewold
Chris Lewold

Reputation: 91

How to change nattable header styling to flat

I would like to get rid of the "3D" styling in the nattable headers when using SortHeaderLayer. Basically all examples I found use this kind of styling.

I found one example, where the UI looks perfect to me - _818_SortableAllFilterPerformanceColumnGroupExample.

However the example is a bit complex, and I don't fully understand how the flat look is achieved - I guess it's related to HoverLayer. The example has one drawback: it seems setting additional sort columns (using the alt key) doesn't work.

Either way - I don't want to focus too much on _818_SortableAllFilterPerformanceColumnGroupExample. I just took it as an example for the flat header styling I want to achieve. Is there a simple way to achieve this ?

I already had some success by adopting DefaultColumnHeaderStyleConfiguration. When using

DefaultColumnHeaderStyleConfiguration config=new DefaultColumnHeaderStyleConfiguration();
config=new TextPainter(true, false, 1, true); 
config.bgColor=//whatever BG color. 

the result looks close to what I want, but the background is white (likely as I omit drawing it).

When changing TextPainter ctor to.

config=new TextPainter(true, true, 1, true); 

the BG color is drawn, but the borders between the headings vanish.

In both cases the 3D look on sorted columns appears when clicking the headers (always using config.bgColor). This is really ugly and not consistent.

Last comment: thanks a lot for this great control !

Chris

Upvotes: 1

Views: 26

Answers (2)

Dirk Fauth
Dirk Fauth

Reputation: 4231

One way is to adjust or replace the DefaultColumnHeaderStyleConfiguration similar to what you have done in your own answer. Another way is to configure the styling by using the ModernNatTableThemeConfiguration, which is done in the example you mentioned.

Basically you execute natTable.setTheme(new ModernNatTableThemeConfiguration()); after natTable.configure();.

There are also other examples that make use of the ModernNatTableThemeConfiguration like the _5018_ColumnResizeExample for example.

Upvotes: 1

Chris Lewold
Chris Lewold

Reputation: 91

Ok, I found it on my own - seems I have to post in order to get onto the right track ;-)

// 1 Change default header config like this 
DefaultColumnHeaderStyleConfiguration config=new DefaultColumnHeaderStyleConfiguration();
config=new TextPainter(true, true, 1, true); 
config.bgColor=//whatever BG color
config.renderGridLines=true;

// 2 disable default configuration when constructing the SortHeaderLayer
ILayer layer=new SortHeaderLayer(columnHeaderLayer, sortModel, false); 

// 3 add SingleClickConfig, but dont use the defaults painter
natTable.addConfiguration(new SingleClickSortConfiguration(new SortableHeaderTextPainter());

This worked for me. I hope this is the correct way, if not a short info would be nice.

Upvotes: 0

Related Questions