Author Topic: Rotate column headers 90 degrees  (Read 228 times)

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 163
    • View Profile
Rotate column headers 90 degrees
« on: May 14, 2024, 06:30:59 pm »
Hi, How can I rotate the header text for a few columns (not all) by 90 degrees? Also, after I rotate, the column width will need to be thinner. It seems when I change the width past a certain value, it doesn't change. Is there a minimum?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6307
    • View Profile
Re: Rotate column headers 90 degrees
« Reply #1 on: May 15, 2024, 05:25:34 pm »
It has never been tried before.

Please see whether it works for you. First add clsHead to the columns.

clsHead: 'rotate'

Then add the following css rules. You may have to adjust the height and transform-origin depending on the text string length.

Code: [Select]
.rotate .pq-title-span{
display: inline-block;
height: 100px;
width: 100%;
text-align: center;
transform-origin:50% 20%;transform:rotate(90deg);
}

Column minimum width can be set with column.minWidth option.

https://paramquery.com/pro/api#option-column-minWidth