Add Custom Column in Customer Grid

In this blog, we are going to learn that how we can add a custom customer attribute column in the customer grid at the admin section.

Here, I have created a custom customer attribute “aadhaar_number”, that I will display in the customer grid.

To add the custom column in the customer grid, you have to follow the below steps:

1. Create customer_listing.xml file inside app/code/Vendor/CustomModule/view/adminhtml/ui_component/ directory.

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
        <listingToolbar name="listing_top"/>
    <columns name="customer_columns" class="Magento\Customer\Ui\Component\Listing\Columns">
        <column name="aadhaar_number" class="Vendor\CustomModule\Ui\Component\Listing\Column\AadhaarNumber">
            <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="editor" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Aadhaar Number</item>
                    <item name="sortOrder" xsi:type="number">40</item>
                    </item>
            </argument>
        </column>
    </columns>
</listing>

2. Create AadhaarNumber.php file inside app/code/Vendor/CustomModule/Ui/Component/Listing/Column/ directory.

<?php
namespace Vendor\CustomModule\Ui\Component\Listing\Column;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;

class AadhaarNumber extends Column
{
    /**
     *
     * @param ContextInterface   $context
     * @param UiComponentFactory $uiComponentFactory
     * @param array              $components
     * @param array              $data
     */
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        array $components = [],
        array $data = []
    ) {
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }
    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as & $item)
            {
                $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
                $customer = $objectManager->create('Magento\Customer\Model\Customer')->load($item['entity_id']);
                $item[$this->getData('name')] = $customer->getAadhaarNumber();
            }
        }
        return $dataSource;
    }
}
?>

3. Now, in the admin section, the “Aadhaar Number” column will be added in the customer grid as following image: