{"id":3408,"date":"2024-02-09T08:44:37","date_gmt":"2024-02-09T08:44:37","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/add-a-row-count-to-the-order-sales-view-items-table-in-magento-2-4\/"},"modified":"2025-03-17T05:20:01","modified_gmt":"2025-03-17T05:20:01","slug":"add-a-row-count-to-the-order-sales-view-items-table-in-magento-2-4","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-a-row-count-to-the-order-sales-view-items-table-in-magento-2-4\/","title":{"rendered":"How To Add a Row Count to The Order Sales View Items Table In Magento 2.4?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Adding a row count to the order sales view items table in Magento 2.4 makes it easy for you, as a store owner, to view and manage the orders. By default, these functionalities will not be available in your store, so let us see how you can add them for smooth management. Let\u2019s go step-by-step into this. Here, we will look at 2 solutions here:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>By adding a column via sales_order_view.xml<\/li>\n\n\n\n<li>By adding a column via plugins<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">First, let us start by creating the module&nbsp;<strong>Meetanshi_RowCounter<\/strong>&nbsp;with the needed files for both solutions:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1). Add registration.php:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\nuse Magento\\Framework\\Component\\ComponentRegistrar;\nComponentRegistrar::register(\n ComponentRegistrar::MODULE,\n 'Meetanshi_RowCounter',\n __DIR__\n);<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Add etc\/module.xml:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\"?>\n&lt;config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n    &lt;module name=\"Meetanshi_RowCounter\"\/>\n&lt;\/config><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3). Create a block file, Block\/Adminhtml\/Items\/Column\/Row.php:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\ndeclare(strict_types=1);\n\nnamespace Meetanshi\\RowCounter\\Block\\Adminhtml\\Items\\Column;\n\nuse Magento\\Sales\\Block\\Adminhtml\\Items\\Column\\DefaultColumn;\n\nclass Row extends DefaultColumn\n{\n\n    \/** @var int *\/\n    private int $row = 1;\n\n    \/**\n     * @return int\n     *\/\n    public function getRow(): int\n    {\n        return $this->row++;\n    }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Once you\u2019ve created the module, there are two approaches to the soluton.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Solution 1: Adding a column via sales_order_view.xml<\/strong><br>Create&nbsp;<strong>view\/adminhtml\/layout\/sales_order_view.xml:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\"?>\n&lt;page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    &lt;body>\n        &lt;referenceBlock name=\"order_items\">\n            &lt;arguments>\n                &lt;argument name=\"columns\" xsi:type=\"array\">\n                    &lt;item name=\"row\" xsi:type=\"string\" translate=\"true\">#&lt;\/item>\n                &lt;\/argument>\n            &lt;\/arguments>\n            &lt;block class=\"Meetanshi\\RowCounter\\Block\\Adminhtml\\Items\\Column\\Row\" name=\"column_row\" template=\"Meetanshi_RowCounter::items\/column\/row.phtml\" group=\"column\"\/>\n        &lt;\/referenceBlock>\n        &lt;referenceBlock name=\"default_order_items_renderer\">\n            &lt;arguments>\n                &lt;argument name=\"columns\" xsi:type=\"array\">\n                    &lt;item name=\"row\" xsi:type=\"string\" translate=\"true\">col-row&lt;\/item>\n                &lt;\/argument>\n            &lt;\/arguments>\n        &lt;\/referenceBlock>\n    &lt;\/body>\n&lt;\/page><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This solution has only one drawback: you will not have control over the order of columns, and a new column will be added. Now, let us head to the 2nd solution here: adding a column via plugins<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Solution 2: By adding a column via plugins<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1). Add view\/adminhtml\/layout\/sales_order_view.xml:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\"?>\n&lt;page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    &lt;body>\n        &lt;referenceBlock name=\"order_items\">\n            &lt;block class=\"Meetanshi\\RowCounter\\Block\\Adminhtml\\Items\\Column\\Row\" name=\"column_row\" template=\"Meetanshi_RowCounter::items\/column\/row.phtml\" group=\"column\"\/>\n        &lt;\/referenceBlock>\n    &lt;\/body>\n&lt;\/page><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2). Add etc\/adminhtml\/di.xml for the plugins:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\"?>\n&lt;config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:ObjectManager\/etc\/config.xsd\">\n    &lt;type name=\"Magento\\Sales\\Block\\Adminhtml\\Order\\View\\Items\">\n        &lt;plugin name=\"Meetanshi_RowCounter::OrderViewItems\" type=\"Meetanshi\\RowCounter\\Plugin\\Block\\Adminhtml\\Order\\View\\Items\"\/>\n    &lt;\/type>\n    &lt;type name=\"Magento\\Sales\\Block\\Adminhtml\\Order\\View\\Items\\Renderer\\DefaultRenderer\">\n        &lt;plugin name=\"Meetanshi_RowCounter::OrderViewItemsDefaultRenderer\" type=\"Meetanshi\\RowCounter\\Plugin\\Block\\Adminhtml\\Order\\View\\Items\\Renderer\\DefaultRenderer\"\/>\n    &lt;\/type>\n&lt;\/config><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3). Add first plugin class, Plugin\/Block\/Adminhtml\/Order\/View\/Items.php<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\ndeclare(strict_types=1);\n\nnamespace Meetanshi\\RowCounter\\Plugin\\Block\\Adminhtml\\Order\\View;\n\nuse Magento\\Sales\\Block\\Adminhtml\\Order\\View\\Items as BaseItems;\n\nclass Items\n{\n\n    \/**\n     * @param BaseItems $subject\n     * @param array $result\n     *\n     * @return array\n     *\/\n    public function afterGetColumns(\n        BaseItems $subject,\n        array $result\n    ): array {\n        return [\n            'row' => __('#'),\n            ...$result,\n        ];\n    }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4). Add the other plugin Plugin\/Block\/Adminhtml\/Order\/View\/Items\/Renderer\/DefaultRenderer.php<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\ndeclare(strict_types=1);\n\nnamespace Meetanshi\\RowCounter\\Plugin\\Block\\Adminhtml\\Order\\View\\Items\\Renderer;\n\nuse Magento\\Sales\\Block\\Adminhtml\\Order\\View\\Items\\Renderer\\DefaultRenderer as BaseDefaultRenderer;\n\nclass DefaultRenderer\n{\n\n    \/**\n     * @param BaseDefaultRenderer $subject\n     * @param array $result\n     *\n     * @return array\n     *\/\n    public function afterGetColumns(\n        BaseDefaultRenderer $subject,\n        array $result\n    ): array {\n        return [\n            'row' => 'col-row',\n            ...$result,\n        ];\n    }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">And that\u2019s it! This is how you will see the column appear after running the second solution, where you have more control over the column order. Try it yourself, and if you have any doubts, let me know in the comments. I would love to help you out.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding a row count to the order sales view items table in Magento 2.4 makes it easy for you, as a store owner, to view&#8230;<\/p>\n","protected":false},"author":51,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-3408","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=3408"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3408\/revisions"}],"predecessor-version":[{"id":17831,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3408\/revisions\/17831"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=3408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=3408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=3408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}