Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Michael Dahm
350
igx-grid vertical column headers
posted

Dear Infragistics Team,

I am currently working with the igx-grid component and am exploring options for customizing the appearance of the grid's column headers.

I have a specific requirement to align the column headers vertically. Could you please advise if there is a built-in feature or a recommended approach to achieve vertical alignment for column headers within the igx-grid?

It should look somewhat like this:

Furthermore, I am also interested in knowing whether this vertical alignment can be retained when exporting the grid data to Excel. Ensuring that the alignment persists in the exported Excel file is crucial for maintaining a consistent user experience.

Any guidance, documentation, or insights you can provide on these matters would be greatly appreciated.

Thank you for your assistance and I'm looking forward to your response.

Best regards,

Michael

Parents
No Data
Reply
  • 1560
    Offline posted

    Hello,

    I have been looking into your question and what I could suggest in order to change the grid's headers orientation is to use the igxHeader template and apply a custom CSS class like follows:

     <igx-column
      *ngFor="let c of columns"
      [field]="c.field"
      [editable]="true"
      [dataType]="c.dataType"
    >
      <ng-template igxHeader let-column>
        <div class="vertical-header">
          {{ column.field }}
        </div>
      </ng-template>
    </igx-column>

    .vertical-header {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 10px 0px 10px 0px;
}

    Regarding the second requirement, I could say that exporting custom styling could be achieved via the Excel Library by defining a worksheet and applying cellFormat to the header row:

        worksheet.rows(0).cellFormat.rotation = 90;
    worksheet.rows(0).cellFormat.alignment = HorizontalCellAlignment.Center;
    worksheet.rows(0).height = 2000;

    A small sample that demonstrates my suggestion can be found attached below.

    Please test it on your side and let me know if I may be of any further assistance.

    Sincerely,
    Teodosia Hristodorova
    Software Developer

    4682.exportVertHeader.zip

Children