{"id":5988,"date":"2021-01-22T06:15:59","date_gmt":"2021-01-22T06:15:59","guid":{"rendered":"https:\/\/www.greytrix.com\/blogs\/salesforce\/?p=5988"},"modified":"2023-01-30T07:03:53","modified_gmt":"2023-01-30T07:03:53","slug":"salesforce-how-to-get-row-index-of-lightning-table-rows","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/01\/22\/salesforce-how-to-get-row-index-of-lightning-table-rows\/","title":{"rendered":"Salesforce &#8211; How to get row index of lightning table rows"},"content":{"rendered":"\n<p>Dynamic lightning table components help you to display the records in the table format easily. In this blog, we will understand how to get a row index of lightning table rows.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>If we want to do operation on the click on any column of table, we need a <strong>row index<\/strong> of respective rows.Firstly, we need to assign rowindex to rows as shown in the below code.<\/li><li>In below table, we have assigned an \u201c<strong>InputNumberLabel<\/strong>\u201d class for lightning table data so that we can assign style for respective row.<\/li><li>Also,we have included <strong>\u201c<\/strong><strong>label<\/strong><strong>\u201d<\/strong> attribute of &lt;ui:inputNumber&gt;&nbsp; for storing a row index.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table data-reactroot=\"\" class=\"slds-table slds-table--bordered\"&gt;\n        &lt;thead&gt;\n            &lt;tr class=\"\"&gt;\n                &lt;th scope=\"col\"&gt;\n                    &lt;div class=\"slds-truncate\"&gt;Product&lt;\/div&gt;\n                &lt;\/th&gt;\n                &lt;th scope=\"col\"&gt;\n                    &lt;div class=\"slds-truncate\"&gt;Quantity&lt;\/div&gt; \n                &lt;\/th&gt;\n            &lt;\/tr&gt;\n        &lt;\/thead&gt;\n        &lt;tbody&gt;\n            &lt;aura:iteration indexVar=\"rowIndex\" items=\"{!v.GetProductData}\" var=\"product\"&gt;\n                &lt;tr class=\"\"&gt;\n                    &lt;td class=\"slds-text-align_right slds-text-body_small InputNumberLabel\"  data-row-index=\"{!rowIndex}\"&gt;\n\t\t\t\t\t\t&lt;ui:inputNumber aura:id=\"idProduct\" label=\"{!rowIndex}\" value=\"{!product.Name}\" change=\"{!c.DoAction}\"\/&gt;\t\n                    &lt;\/td&gt;\n                    &lt;td class=\"slds-text-align_right slds-text-body_small InputNumberLabel\" data-row-index=\"{!rowIndex}\"&gt;\n                        &lt;ui:inputNumber aura:id=\"idQuantity\" label=\"{!rowIndex}\"  value=\"{!product.Quantity }\" \/&gt;\n                    &lt;\/td&gt;\n                &lt;\/tr&gt;\n            &lt;\/aura:iteration&gt;\n        &lt;\/tbody&gt;\n    &lt;\/table&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Get the row index of the respective row using following way:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>DoAction: function(cmp,event,helper)\n{\t\n             var rowIndex=event.getSource().get(\"v.label\");\n}\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Apply following css to the table data.<ul><li><strong>visibility<\/strong>:<strong>collapse <\/strong>hides an element entirely (so that it doesn&#8217;t occupy any space in the layout), but only when the element is a table element.<\/li><\/ul><\/li><li>If we <em>don&#8217;t <\/em>apply <strong>visibility<\/strong>:<strong>collapse<\/strong> <em>property, then <\/em>rowindex will be display on the lightning Table UI.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>.THIS .InputNumberLabel \n {\n     visibility: collapse !important;\n }\n<\/code><\/pre>\n\n\n\n<p>We hope you may find this blog resourceful and helpful. If you still have concerns and need more help, please contact us at <a href=\"mailto:salesforce@greytrix.com\">salesforce@greytrix.com<\/a><\/p>\n\n\n\n<p style=\"text-align: justify\"><b>About Us<\/b><\/br>\n<p><a href=\"https:\/\/www.greytrix.com\/\">Greytrix<\/a> \u2013 a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.<br><br> Greytrix has some unique solutions for Cloud CRM such as <a href=\"\">Salesforce Sage integration<\/a> for <a href=\"https:\/\/www.greytrix.com\/sage-x3-erp\/integration\/\">Sage X3<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-100-integration\/\">Sage 100<\/a> and <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-300-integration\/\">Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Salesforce customization and development services<\/a> along with services such as Salesforce <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/data-migration-support\/\">Data Migration<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Integrated App development<\/a>, Custom App development and Technical Support business partners and end users. Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU&#x2122; integration for Sage ERP \u2013 Salesforce is a 5-star rated app listed on <a href=\"https:\/\/appexchange.salesforce.com\/appxListingDetail?listingId=a0N30000000psM5EAI\" target=\"_blank\" rel=\"noopener\">Salesforce AppExchange<\/a>.<br> The GUMU&#x2122; Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.<br><br> For more information on our Salesforce products and services, contact us at <a href=\"mailto:salesforce@greytrix.com\">salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n\n\n\n<p><strong>Related Posts<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2020\/12\/30\/how-to-activate-and-add-salesforce-lightning-component-on-community-experience\/\" target=\"_blank\">How to Activate and Add Salesforce Lightning component on Community experience<\/a><\/li><li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/01\/20\/how-to-add-lightning-web-components-as-custom-tabs-in-salesforce\/\" target=\"_blank\" rel=\"noreferrer noopener\">Add Lightning Web Components as Custom Tabs in Salesforce<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/01\/20\/how-to-set-cookies-in-http-callout-apex-salesforce\/\" target=\"_blank\">How to set cookies in HTTP Callout (APEX Salesforce)<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dynamic lightning table components help you to display the records in the table format easily. In this blog, we will understand how to get a row index of lightning table rows. If we want to do operation on the click on any column of table, we need a row index of respective rows.Firstly, we need\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/01\/22\/salesforce-how-to-get-row-index-of-lightning-table-rows\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1056,1058,1055,1057,651,1032,1059],"class_list":["post-5988","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-custom-data-table","tag-get-row-index","tag-lightning-aura-component","tag-lightning-dyanamic-table","tag-salesforce-lightning-component","tag-salesforce-lightning-component-bundle","tag-salesforce-lightning-table"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/5988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=5988"}],"version-history":[{"count":7,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/5988\/revisions"}],"predecessor-version":[{"id":7055,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/5988\/revisions\/7055"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=5988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=5988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=5988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}