Hello Santu,

I have been looking into your question and what I could suggest is to use the igxSummary directive to template the column summaries in the igx-grid component. The directive targets the column summary providing as a context the column summary results.

With the igxSummary directive, you can template and shape the column summaries with whatever elements and styles you want. The easiest way to align the text is to use the summaryResults value from the template and according to the datatype of the column to align the label of the summary left or right and against it the result.

<ng-template igxSummary let-summaryResults>
        <div class="summary-temp">
          <span>{{ summaryResults[0].summaryResult }}</span>
          <span><strong style="margin-left: 1rem">{{summaryResults[0].label}}</strong></span>
        </div>
</ng-template>

The same result could be achieved with your custom styles and according to how you want it to be visualized in your application. More information about templating and styling summaries in the grid could be found in this topic of our documentation

Here could be observed that all the columns of the number datatype have left-aligned summaries, and the rest of the columns of the other datatypes have right-alignment:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve, please feel free to more information about your requirements.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics