Add a dropdown in Grid

Question

I have added a custom grid in my Admin custom module. Now I want to add a Dropdown on the column. So meaning per records will have a dropdown for them to select from. This dropdown will contain list of templates. So basically per record/row I will choose which template I will assign for that record. Then I will have a button where it will run the update command for those record that we selected.

So my question is how can I add a dropdown for the grid table column? It's not just one dropdown. I want to add a dropdown on EVERY ROW in the grid table.

<column name="customer_lastname">
       <argument name="data" xsi:type="array">
           <item name="config" xsi:type="array">
               <item name="filter" xsi:type="string">text</item>
               <item name="label" xsi:type="string" translate="true">Last Name</item>
               <item name="sortOrder" xsi:type="number">6</item>
           </item>
       </argument>
    </column>
    <column name="customer_middlename">
       <argument name="data" xsi:type="array">
           <item name="config" xsi:type="array">
               <item name="filter" xsi:type="string">text</item>
               <item name="label" xsi:type="string" translate="true">Middle Name</item>
               <item name="sortOrder" xsi:type="number">5</item>
           </item>
       </argument>
    </column>
    <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date" >
       <argument name="data" xsi:type="array">
           <item name="config" xsi:type="array">
               <item name="filter" xsi:type="string">dateRange</item>
               <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
               <item name="dataType" xsi:type="string">date</item>
               <item name="label" xsi:type="string" translate="true">Order Date</item>
               <item name="sortOrder" xsi:type="number">2</item>
           </item>
       </argument>
   </column>
   <actionsColumn name="actions" class="Tcm\Reports\Ui\Component\Listing\Column\Action">
       <argument name="data" xsi:type="array">
           <item name="config" xsi:type="array">
               <item name="resizeEnabled" xsi:type="boolean">false</item>
               <item name="resizeDefaultWidth" xsi:type="string">107</item>
               <item name="indexField" xsi:type="string">id</item>
           </item>
       </argument>
  </actionsColumn>

Answer 1

You can try following way..

Add select options and component in column. Full column like this:

<column name="items">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Vendor\Module\Ui\Component\Listing\Column\Myoptions</item>
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">select</item>
            <item name="label" xsi:type="string" translate="true">Items</item>
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
            <item name="dataType" xsi:type="string">select</item>
            <item name="editor" xsi:type="array">
                <item name="editorType" xsi:type="string">select</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">false</item>
                </item>
            </item>
        </item>
    </argument>
</column>

Now create Myoptions.php at

app/code/Vendor/Module/Ui/Component/Listing/Column/Myoptions.php

Now you can load table and pass array data in toOptionArray() like

<?php

namespace Vendor\Module\Ui\Component\Listing\Column;

class Status implements \Magento\Framework\Option\ArrayInterface
{
    //Here you can __construct Model

    public function toOptionArray()
    {
        return [
            ['value' => 0, 'label' => __('Option 1')],
            ['value' => 0, 'label' => __('Option 2')]
        ];
    }
}