magento2 – Magento 2 Grid Column Header Alignment

The MagentoBackendBlockWidgetGridColumnRendererAbstractRenderer::renderHeader() indicates that a column data index of “header_css_class” would be valid (as part of the data array, not the data/config).

Of course, with the ui-component, nothing is quite what it seems.

There actually is no argument to pass to the header, which uses a default template. Looking at the specified component js/grid/columns/column.js, we find the default headerTmpl is ui/grid/columns/text.html.

So for this example, we can copy this to a custom template which we might call “text-center.html” (what else?), and add the “a-center” class as needed:

<th class="data-grid-th a-center" click="sort"
    css="
        _sortable: sortable,
        _draggable: draggable,
        _ascend: sorting === 'asc',
        _descend: sorting === 'desc'">
    <span class="data-grid-cell-content" translate="label"/>
</th>

and then specify this new template as part of the column config:

<column name="field">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            ...
            <item name="headerTmpl" xsi:type="string">ui/grid/columns/text-center</item>
            ...
        </item>
    </argument>
</column>

(Obviously, we would place this in our module’s folder, but this is just an example.)

Success! The new template is used, and this column is now rendered with the modified header. However, since in this case we’re trying to center the header text, our attempt fails because of the default style on the .data-grid th class, which already has an explicit text-align:left style.

Of course, we can always add a class with a different name (“th-center” perhaps) and add it to our custom stylesheet.

Then, finally, after we’ve done all this hard work, we must ask the hard question:

Will anybody really care that the header is centered anyway?

(Or perhaps we should have asked that question first.)