Magento 2 Add Customer Fullname on Admin Grid

While developing any custom extension most of the time we need to add some features which depend on the customer and in that case, we'll store the customer id in our custom table and want to display the customer's full name in the admin grid. So, in this article, we'll show you how to display the customer's full name on the admin UI grid.

Before we start I assume, you have already created a custom grid collection.

Now, you just need to add _initSelect() and addFieldToFilter functions in your collection class file.

saveCopyzoom_out_map
protected function _initSelect()
{
    parent::_initSelect();
    $this->getSelect()->join(
        ['ce' => $this->getConnection()->getTableName('customer_entity')],
        'main_table.customer_id = ce.entity_id',
        [
            'customer_name' => 'CONCAT(`ce`.`firstname`, " ", `ce`.`lastname`)'
        ]
    );
    return $this;
}

In the above code you can see we've get customer firstname and lastname from the customer_entity table usgin join.

saveCopyzoom_out_map
public function addFieldToFilter($field, $condition = null)
{
    if ($field === 'customer_name') {
        $customerTable = $this->getConnection()->getTableName('customer_entity');
        $this->getSelect()->joinLeft(
        ['cust' => $customerTable],
            'main_table.customer_id = cust.entity_id',
        []
        );
        $conditionSql = $this->_getConditionSql(
            'CONCAT(`cust`.`firstname`, " ", `cust`.`lastname`)',
            $condition
        );
        $this->getSelect()->where($conditionSql);
        return $this;
    }
    return parent::addFieldToFilter($field, $condition);
}

We've added addFieldToFilter function with join just because of filter.

Now, you just need to add customer_name as an column in your grid. Review below example code for your reference.

saveCopyzoom_out_map
<column name="customer_name">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">text</item>
            <item name="dataType" xsi:type="string">select</item>
            <item name="label" xsi:type="string" translate="true">Customer Name</item>
        </item>
    </argument>
</column>

Open Command line in folder root of magento and run the below commands.

saveCopyzoom_out_map
php bin/magento setup:upgrade

php bin/magento cache:clean

That's it.

We hope this Magento article helped you to know How to Add Customer Fullname on Admin UI Grid in Magento 2.

Bookmark it for your future reference. Do comment below if you have any other questions or doubts.

P.S. Do share this article with your team.