asked on July 3, 2023
Hello,
I want to know if I can selectively align headers in the grid left/right/center. If I override the CSS and change the alignment, it applies to all the column headers but what if I only want the numeric columns to right align and text to left, is that possible?
If you look at the sample code here: https://jsfiddle.net/tvzkewr4/ and perform a drill through, you can see that in the popup, the column headers for Color and Country are right aligned. But, I want them to be left aligned. Is there a quick css override here or a property in the API I have missed?
Thank you,
Rushi
⋅ July 3, 2023
Hello Rushi,
Thank you for reaching out to us.
It is possible to align the headers for the text fields to the left using the customizeCell function. For example, you can check whether the type of the hierarchy is "string" and make those headers left aligned:
function customizeCellFunction(cell, data) {
if (data.isDrillThrough &&
data.type == "header" && data.hierarchy.type == "string") {
cell.addClass("align-left");
}
}
Then use the following CSS rules:
#fm-pivot-view .fm-header-c.align-left {
text-align: left !important;
padding-left: 4px !important;
}
You are welcome to check the following JSFiddle for reference: https://jsfiddle.net/flexmonster/o23hrcmd/
Please let us know if it works for you. Looking forward to hearing your feedback.
Kind regards,
Nadia
⋅ July 3, 2023
Thanks Nadia. Your solution works fine. I was actually thinking if there was a solution without using the customizeCell function, rather specifying the column header alignments during the grid definition (say, in mappings object).
I am using the component in a Blazor application and wanted to limit my custom JavaScript code. However, the above code is small and should not be too much of an issue.
Thanks again,
Rushi
⋅ July 4, 2023
Hello Rushi,
Thank you for the feedback.
We recommend using the customizeCell method as it provides the most efficient and optimal solution.
Feel free to contact us in case other questions arise.
Kind regards,
Nadia