UI component custom column sorting not working

Question

I am creating 3 custom columns in sales order grid column:

1. Country
2. Area
3. City

Filters are working but when I try to sort the column it shows Attention: Something went wrong

Iksula/InternationalShipping/view/adminhtml/ui_component/sales_order_grid.xml

<?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">
 <columns name="sales_order_columns">
 <column name="country_id" class="Iksula\InternationalShipping\Ui\Component\Listing\Column\Country">
 <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">Country</item>
 </item>
 </argument>
 </column>
 <column name="region" class="Iksula\InternationalShipping\Ui\Component\Listing\Column\Area">
 <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">Area</item>
 </item>
 </argument>
 </column>
 <column name="city" class="Iksula\InternationalShipping\Ui\Component\Listing\Column\City">
 <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">City</item>
 </item>
 </argument>
 </column>
 </columns>
</listing>

Iksula/InternationalShipping/Ui/Component/Listing/Column/Country.php

<?php
namespace Iksula\InternationalShipping\Ui\Component\Listing\Column;
use \Magento\Sales\Api\OrderRepositoryInterface;
use \Magento\Framework\View\Element\UiComponent\ContextInterface;
use \Magento\Framework\View\Element\UiComponentFactory;
use \Magento\Ui\Component\Listing\Columns\Column;
use \Magento\Framework\Api\SearchCriteriaBuilder;
class Country extends Column
{
 protected $_orderRepository;
 protected $_searchCriteria;
 public function __construct(ContextInterface $context, 
 UiComponentFactory $uiComponentFactory, 
 OrderRepositoryInterface $orderRepository, 
 SearchCriteriaBuilder $criteria, 
 \Magento\Directory\Model\CountryFactory $countryFactory,
 array $components = [], 
 array $data = [])
 {
 $this->_orderRepository = $orderRepository;
 $this->_searchCriteria = $criteria;
 $this->_countryFactory = $countryFactory;
 parent::__construct($context, $uiComponentFactory, $components, $data);
 }
 public function prepareDataSource(array $dataSource)
 {
 if (isset($dataSource['data']['items'])) {
 foreach ($dataSource['data']['items'] as & $item) {
 $order = $this->_orderRepository->get($item["entity_id"]);
 $country_code = $order->getShippingAddress()->getData('country_id');
 $country = $this->_countryFactory->create()->loadByCode($country_code);
 $item[$this->getData('name')] = $country->getName();
 }
 }
 return $dataSource;
 }
}

Iksula/InternationalShipping/Ui/Component/Listing/Column/Area.php

<?php
namespace Iksula\InternationalShipping\Ui\Component\Listing\Column;
use \Magento\Sales\Api\OrderRepositoryInterface;
use \Magento\Framework\View\Element\UiComponent\ContextInterface;
use \Magento\Framework\View\Element\UiComponentFactory;
use \Magento\Ui\Component\Listing\Columns\Column;
use \Magento\Framework\Api\SearchCriteriaBuilder;
class Area extends Column
{
 protected $_orderRepository;
 protected $_searchCriteria;
 public function __construct(ContextInterface $context, UiComponentFactory $uiComponentFactory, OrderRepositoryInterface $orderRepository, SearchCriteriaBuilder $criteria, array $components = [], array $data = [])
 {
 $this->_orderRepository = $orderRepository;
 $this->_searchCriteria = $criteria;
 parent::__construct($context, $uiComponentFactory, $components, $data);
 }
 public function prepareDataSource(array $dataSource)
 {
 if (isset($dataSource['data']['items'])) {
 foreach ($dataSource['data']['items'] as & $item) {
 $order = $this->_orderRepository->get($item["entity_id"]);
 $region= $order->getShippingAddress()->getData('region');
 $item[$this->getData('name')] = $region;
 }
 }
 return $dataSource;
 }
}

Iksula/InternationalShipping/Ui/Component/Listing/Column/City.php

<?php
namespace Iksula\InternationalShipping\Ui\Component\Listing\Column;
use \Magento\Sales\Api\OrderRepositoryInterface;
use \Magento\Framework\View\Element\UiComponent\ContextInterface;
use \Magento\Framework\View\Element\UiComponentFactory;
use \Magento\Ui\Component\Listing\Columns\Column;
use \Magento\Framework\Api\SearchCriteriaBuilder;
class City extends Column
{
 protected $_orderRepository;
 protected $_searchCriteria;
 public function __construct(ContextInterface $context, UiComponentFactory $uiComponentFactory, OrderRepositoryInterface $orderRepository, SearchCriteriaBuilder $criteria, array $components = [], array $data = [])
 {
 $this->_orderRepository = $orderRepository;
 $this->_searchCriteria = $criteria;
 parent::__construct($context, $uiComponentFactory, $components, $data);
 }
 public function prepareDataSource(array $dataSource)
 {
 if (isset($dataSource['data']['items'])) {
 foreach ($dataSource['data']['items'] as & $item) {
 $order = $this->_orderRepository->get($item["entity_id"]);
 $city= $order->getShippingAddress()->getData('city');
 $item[$this->getData('name')] = $city;
 }
 }
 return $dataSource;
 }
}

Answer 1

Since your filters are not working. replace this

<item name="filter" xsi:type="string">text</item>

By

<item name="filter" xsi:type="boolean">false</item>

and for sorting

<item name="sortable" xsi:type="boolean">false</item>

This will solve your problem, pls mark it as solution if it works for you.

• Toji: filter is working but sorting is not working
• Ali Hussain: check my updated answer
• Toji: but this is not the solution to my question. I need filters and sorting to work

Answer 2

Add Sort order to the column

<item name="sortOrder" xsi:type="string">40</item>