Magento 2 Grid Column Header Alignment

Question

How do you set the alignment for a grid header (th) element when implementing ui-component? We can set the "fieldClass" config option to center the column contents (td), but there's nothing to indicate how to set the column's header to match.

<column name="field">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 ...
 <item name="fieldClass" xsi:type="string">a-center</item>
 ...
 </item>
 </argument>
</column>

Answer 1

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" (the full path is module-ui/view/base/web/templates/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">Vendor_Module/grid/columns/text-center</item>
 ...
 </item>
 </argument>
</column>

The actual file would go in the module's view/<area>/web/template/grid/columns folder.

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.)

Answer 2

Just add this to the column definition.

'header_css_class'=>'a-center'

So your column can look like this:

$this->addColumn('some_column', array(
 'header' => Mage::helper('some_helper')->__('Header title'),
 'index' => 'some_column',
 'header_css_class'=>'a-center'
)); 

The header_css_class parameter allows you to set a class to the grid header and a-center is the admin class for text-align:center.