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 column alignment
posted

Hello,

I am faced with a requirement to align the content of a specific cell and its corresponding header to the right side of the igx-grid.

Like this:

After going through the documentation and exploring various options within the igx-grid configuration, I haven't been able to identify a direct method to achieve this specific alignment requirement. I understand that the igx-grid offers a lot of customization options, but I'm uncertain if aligning individual cells and headers to the right side is directly supported out-of-the-box.

If this functionality is not currently supported, I would like to request it as a potential feature enhancement for a future release. Aligning content and headers to the right side can greatly improve the visual and functional aspects of certain data presentations.

If there are any workarounds, CSS techniques, or code snippets that could assist me in achieving this alignment, I would greatly appreciate your assistance in providing that information.

Thank you very much for your time and attention to this matter. I look forward to your response.

Parents
  • 1560
    Offline posted

    Hello,

    I have been looking into your question and what I could say is that by design the string columns are aligned to the left and the number columns to the right similar to the Excel behavior.

    However, the alignment could be changed on application level by defining a header template in order to apply a proper CSS class and setting the required column cellClasses property to the same class as follows:

     <igx-column
      field="ProductName"
      header="Product Name"
      [dataType]="'string'"
      [cellClasses]="rightAlignment"
    >
      <ng-template igxHeader let-column>
        <div class="rightAlign">
          {{ column.header ? column.header : column.field }}
        </div>
      </ng-template>
    </igx-column>

      .rightAlign{
    text-align: end;
    justify-content: end;
  }

    A small sample where the first column alignment is changed could be found here. Please test it on your side and let me know if I may be of any further assistance.


    Sincerely,
    Teodosia Hristodorova
    Software Developer

Reply Children
No Data