Hice una cuadrícula personalizada en el administrador de Magento usando el componente UI. Básicamente, todo funciona bien, además del orden de las columnas que no se muestra correctamente.
- como puede ver, la columna de acción está justo al principio y la seleccionada está al final
- cuando creé las columnas en XML tomé en consideración el
sortOrder
atributo de cada columna, pero de alguna manera el orden no es el que configuré para ser
El código de listing.xml
es el siguiente
<columns name="inactive_columns" class="Module\MyModule\Ui\Component\Listing\Columns">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">inactive_listing.inactive_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current</item>
</item>
<item name="editorConfig" xsi:type="array">
<item name="selectProvider" xsi:type="string">inactive_listing.inactive_listing.inactive_columns.ids</item>
<item name="enabled" xsi:type="boolean">true</item>
<item name="indexField" xsi:type="string">entity_id</item>
<item name="clientConfig" xsi:type="array">
<item name="saveUrl" xsi:type="url" path="customer/index/inlineEdit"/>
<item name="validateBeforeSave" xsi:type="boolean">false</item>
</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="fieldAction" xsi:type="array">
<item name="provider" xsi:type="string">inactive_listing.inactive_listing.inactive_columns_editor</item>
<item name="target" xsi:type="string">startEdit</item>
<item name="params" xsi:type="array">
<item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
<item name="1" xsi:type="boolean">true</item>
</item>
</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">inactive_listing.inactive_listing.listing_top.bookmarks</item>
<item name="root" xsi:type="string">columns.${ $.index }</item>
<item name="namespace" xsi:type="string">current.${ $.storageConfig.root }</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 name="sortOrder" xsi:type="number">0</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">textRange</item>
<item name="sorting" xsi:type="string">asc</item>
<item name="label" xsi:type="string" translate="true">ID</item>
<item name="sortOrder" xsi:type="number">20</item>
</item>
</argument>
</column>
<column name="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">Firstname</item>
<item name="editor" xsi:type="string">text</item>
<item name="sortOrder" xsi:type="number">40</item>
</item>
</argument>
</column>
<column name="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">Lastname</item>
<item name="editor" xsi:type="string">text</item>
<item name="sortOrder" xsi:type="number">50</item>
</item>
</argument>
</column>
<column name="email">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="editor" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Email Cacat</item>
<item name="sortOrder" xsi:type="number">30</item>
</item>
</argument>
</column>
<column name="group_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">select</item>
<item name="editor" xsi:type="string">select</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
<item name="dataType" xsi:type="string">select</item>
<item name="label" xsi:type="string" translate="true">Group</item>
<item name="sortOrder" xsi:type="number">90</item>
</item>
</argument>
</column>
<column name="billing_telephone">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="editor" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Phone</item>
<item name="sortOrder" xsi:type="number">100</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="dataType" xsi:type="string">date</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="label" xsi:type="string" translate="true">Customer Since</item>
<item name="sortOrder" xsi:type="number">110</item>
</item>
</argument>
</column>
<column name="last_visit_at" class="Magento\Ui\Component\Listing\Columns\Date">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="filter" xsi:type="string">dateRange</item>
<item name="visible" xsi:type="boolean">false</item>
<item name="dataType" xsi:type="string">date</item>
<item name="label" xsi:type="string" translate="true">Last Logged In</item>
<item name="sortOrder" xsi:type="number">120</item>
</item>
</argument>
</column>
<column name="created_in">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
<item name="label" xsi:type="string" translate="true">Account Created in</item>
<item name="sortOrder" xsi:type="number">140</item>
</item>
</argument>
</column>
<column name="kpi_views_customer">
<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">Kpi Views</item>
<item name="sortOrder" xsi:type="number">60</item>
</item>
</argument>
</column>
<column name="customer_membership">
<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 Membership</item>
<item name="sortOrder" xsi:type="number">70</item>
</item>
</argument>
</column>
<column name="customer_access">
<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 Access</item>
<item name="sortOrder" xsi:type="number">80</item>
</item>
</argument>
</column>
<actionsColumn name="actions" class="Magento\Customer\Ui\Component\Listing\Column\Actions">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="indexField" xsi:type="string">entity_id</item>
<item name="sortOrder" xsi:type="number">222</item>
</item>
</argument>
</actionsColumn>
</columns>
y la clase Module \ MyModule \ Ui \ Component \ Listing \ Columns es
class Columns extends \Magento\Ui\Component\Listing\Columns
{
/**
* @var \KPIs\CustomerReports\Model\Customer\Attribute\Repository\AttributeRepository $attributeRepository
*/
protected $attributeRepository;
protected $manageAttributes;
/** @var int */
protected $columnSortOrder;
public function __construct(
ContextInterface $context,
ColumnFactory $columnFactory,
AttributeRepository $attributeRepository,
ManageAttributes $manageAttributes,
InlineEditUpdater $inlineEditor,
array $components = [],
array $data = []
)
{
parent::__construct($context, $components, $data);
$this->columnFactory = $columnFactory;
$this->attributeRepository = $attributeRepository;
$this->manageAttributes = $manageAttributes;
$this->inlineEditUpdater = $inlineEditor;
}
public function prepareDataSource(array $dataSource)
{
$customerAccessOptions = $this->attributeRepository->get(CustomerMetadataInterface::ENTITY_TYPE_CUSTOMER, "customer_access")->getOptions();
$customerMembershipOptions = $this->attributeRepository->get(CustomerMetadataInterface::ENTITY_TYPE_CUSTOMER, "customer_membership")->getOptions();
if (isset($dataSource['data']['items'])) {
foreach ($dataSource['data']['items'] as & $item) {
if (isset($item["customer_access"])) {
$item["customer_access"][0] = $customerAccessOptions[$item["customer_access"][0]]->getLabel();
}
if (isset($item["customer_membership"])) {
$item["customer_membership"] = $customerMembershipOptions[$item["customer_membership"][0]]->getLabel();
}
}
}
return $dataSource;
}
}
- como puede ver, en la clase no hago nada relacionado con el orden :), por lo que debería ser el comportamiento predeterminado
- Además, las columnas de acción y selección no se pueden arrastrar y soltar (por lo que vi)
¿Alguien tiene alguna idea de cómo puedo ordenar las columnas de XML o del código? La acción debe ser la última columna y la selección la primera. ¡Gracias! :)