Order UI Grid display items in sales order

Question

I have impelemented a table grid that display all the list of orders under the Sales_order table. Now everything is fine but I was thinking to add all the item names in that order. Assuming one of the order has 3 items in it. I want to display all the names of that item in one of the column.

So within this grid I want to add a new column that contains the names of the items in that order. How can I accomplish this? Below is my xml code under ui_component

<columns name="reports_order_column">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="childDefaults" xsi:type="array">
                <item name="fieldAction" xsi:type="array">
                    <item name="provider" xsi:type="string">reports_orders_grid.reports_orders_grid.reports_order_column</item>
                    <item name="target" xsi:type="string">applyAction</item>
                    <item name="params" xsi:type="array">
                        <item name="0" xsi:type="string">view</item>
                        <item name="1" xsi:type="string">${ $.$data.rowIndex }</item>
                    </item>
                </item>
            </item>
        </item>
    </argument>
    <selectionsColumn name="ids">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="indexField" xsi:type="string">entity_id</item>
            </item>
        </argument>
    </selectionsColumn>
    <column name="entity_id">
        <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">Order ID</item>
                <item name="sorting" xsi:type="string">desc</item>
                <item name="sortOrder" xsi:type="number">1</item>
            </item>
        </argument>
    </column>
<column name="status">
  <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">Status</item>          
      <item name="sortOrder" xsi:type="number">2</item>
    </item>
  </argument>
</column>
<column name="total_item_count">
  <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">Total Item</item>          
      <item name="sortOrder" xsi:type="number">3</item>
    </item>
  </argument>
</column>    
    <column name="customer_email">
        <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">Customer Email</item>             
                <item name="sortOrder" xsi:type="number">4</item>
            </item>
        </argument>
    </column>
    <column name="customer_firstname">
   <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">First Name</item>
           <item name="sortOrder" xsi:type="number">5</item>
       </item>
   </argument>
</column>
<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">7</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">8</item>
         </item>
     </argument>
  </column>
  <column name="total_due">
    <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">Total</item>          
        <item name="sortOrder" xsi:type="number">9</item>
      </item>
    </argument>
  </column>
  <actionsColumn name="actions" class="Vendor\Reports\Ui\Component\Listing\Column\Action">
      <argument name="data" xsi:type="array">
          <item name="config" xsi:type="array">
              <item name="viewUrlPath" xsi:type="string">sales/order/view</item>
              <item name="urlEntityParamName" xsi:type="string">order_id</item>
          </item>
      </argument>
      <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>
      <settings>
          <indexField>entity_id</indexField>
      </settings>
  </actionsColumn>

Answer 1

try this

   <actionsColumn name="total_item_count" class="VendoreName\ModuleName\Ui\Component\Listing\Column\OrderItems">
         <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
                <item name="filter" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Total Item</item>
                <item name="sortOrder" xsi:type="number">30</item>
                <item name="resizeEnabled" xsi:type="boolean">true</item>
            </item>
        </argument>
    </actionsColumn>

app\code\VendoreName\ModuleName\Ui\Component\Listing\Column

OrderItems.php

<?php

namespace VendoreName\ModuleName\Ui\Component\Listing\Column;

use Magento\Framework\UrlInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Ui\Component\Listing\Columns\Column;

class OrderItems extends Column
{
    private $orderCollectionFactory;

    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        \Magento\Sales\Api\OrderRepositoryInterface $orderCollectionFactory,
        array $components = [],
        array $data = []
    ) {
        parent::__construct($context, $uiComponentFactory, $components, $data);
        $this->orderCollectionFactory = $orderCollectionFactory;
    }

    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as &$item) {
                $name = $this->getData('name');
                if (isset($item['order_id'])) {
                    $order_data = $this->orderCollectionFactory->get($item['order_id']); // pass order id here
                    $result = '';
                    $result = "<table>";
                    foreach ($order_data->getAllVisibleItems() as $value) {
                        $result .= "<tr><td>" . $value->getName() . "</td></tr>";
                    }
                    $result .= "</table> ";
                    $item['total_item_count'] = html_entity_decode($result);
                }
            }
        }
        return $dataSource;
    }
}