Magento 2 dynamic custom column in UI listing, sorting not working

Question

I have create two columns "Sending" and "Remaining". The value of them is based on the "In stock" column. When i tried to sort the order of one of column then it doesn't work. It gives me an error. eq In Stock = 10. Entered 3 in "Sending" Remaining column will change to 7.

The sorting doesn't work for both columns.

enter image description here

• Morgan Smith: can you show your error log?
• Avesh Naik: {"error":"UI component could not be rendered because of system exception","errorcode":"42"
• Morgan Smith: magento.stackexchange.com/questions/109224/… this looks similar maybe start here?
• Avesh Naik: Not able to get the solution.
• Morgan Smith: so your file permissions are right and you aren't getting any ajax issues?

Answer 1

This is because you don't have a column in the database that matches the name of your two added fields. Magento takes the name from the xml file in which you specify the grid view and when you want to sort by this column it performs a database query in which it takes the column name from the xml file and tries to add it to the SQL query.

All you have to do is override method \Magento\Ui\Component\Listing\Columns\Column::applySorting() You can do it simply by modifying your xml like that:

<?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="your_column" class="Vendor\Module\Ui\Component\YourColumn">
 <settings>
 <sortable>true</sortable>
 </settings>
 </column>
 </columns>
</listing>

And write your own class Vendor\Module\Ui\Component\YourColumn that extends \Magento\Ui\Component\Listing\Columns\Column. I think something like that should work:

<?php
declare(strict_types=1);
namespace Vendor\Module\Ui\Component;
use Magento\Ui\Component\Listing\Columns\Column;
class YourColumn extends Column
{
 /**
 * Apply sorting
 *
 * @return void
 */
 protected function applySorting()
 {
 $sorting = $this->getContext()->getRequestParam('sorting');
 $isSortable = $this->getData('config/sortable');
 if (
 $isSortable !== false
 && !empty($sorting['field'])
 && !empty($sorting['direction'])
 && $sorting['field'] === $this->getName()
 ) {
 $this->getContext()->getDataProvider()->addOrder(
 'enter here your db column name by which you want to sort',
 strtoupper($sorting['direction'])
 );
 }
 }
}

• Isolde: Thank you Bartosz for pointing me in the right direction. Because my ui_grid column was based on an entity_id but showed the related increment id, when sorting I would get this "UI component could not be rendered because of system exception". A quick fix based on your answer was to add <settings><sortable>false</sortable></settings> to my custom column so the customer no longer got this error. Now it works as it should.
• Avesh Naik: It would been better if you had given an example for Vendor\Module\Ui\Component\YourColumn
• Bartosz Boguszewski: @AveshNaik I added example, let me know what do you think.