Multi-line header

JasonMcmunn

I'd like to have a multi-line header because the truncation with the ellipses doesn't look great for my use case. I tried to overload it like this, but the more specific style always overloads it:
:global(.wx-text){

border: 1px solid #ff0000;
white-space: normal;
   overflow-wrap: break-word;
   word-break: break-word;

}
:global(.wx-willow-theme .grid .header-cell) {
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
line-height: 1.2;
padding: 4px;
}

More specific:
.wx-print-cell-header .wx-text, .wx-text.s-z3w4ZS1vP9Xu {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

Any suggestions?

tasha

Hello JasonMcmunn

To rewrite build-in styles you can use columnStyle property. To make it work you need to add more specificity with your custom class(here in the example its .demo class).
Also you need to set white-space: unset; as by default it is set towhite-space: nowrap;

Please check the example: https://stackblitz.com/edit/sveltejs-kit-template-default-yu3mko5z?file=src%2Froutes%2FMyGrid.svelte

JasonMcmunn

This works great. Thank you so much for your help! I really appreciate you.