Add column to gridview in custom extension

Question

I have a custom extension where the admin user needs to select a customer from the drop down. The extension saves the customer ID to the database.

Currently, on the grid view, in my UI component I have the following:

 <column name="customer_id">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">textRange</item>
            <item name="sorting" xsi:type="string">asc</item>
            <item name="label" xsi:type="string" translate="true">Customer ID</item>
        </item>
    </argument>
</column>

This displays the customer id as expected.

However, my question is how do actually display the customer name instead of just the ID in the grid view?

Answer 1

You have to define your own custom class in order to get and display the firstname and the lastname of the customer in one UI column field, otherwise you can either use only one of them.
Like below code:

<column name="customer_firstname">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">textRange</item>
            <item name="sorting" xsi:type="string">asc</item>
            <item name="label" xsi:type="string" translate="true">Customer Firstname</item>
        </item>
    </argument>
</column>