TKMB2B_MultipleCCSpecProducts_Component

<aura:component  controller="TKMB2B_MultipleCCSpecProductsController" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
        <!-- attributes -->
        <aura:attribute name="columns" type="List" default="[]"/>
        <aura:attribute name="data" type="List" default="[]"/>
         <aura:attribute name="selectedData" type="List" default="[]"/>
        <aura:attribute name="dataTableSchema" type="Object"/>
        <aura:attribute name="keyField" type="String" default="id"/>
        <aura:attribute name="initialRows" type="Integer" default="50"/>
        <aura:attribute name="selectedRowsCount" type="Integer" default="0"/>
        <aura:attribute name="enableInfiniteLoading" type="Boolean" default="true"/>
        <aura:attribute name="rowsToLoad" type="Integer" default="50"/>
        <aura:attribute name="loadMoreOffset" type="Integer" default="0"/>
        <aura:attribute name="totalNumberOfRows" type="Integer" default="6000"/>
        <aura:attribute name="loadMoreStatus" type="String" default=""/>
        <aura:attribute name="searchText" type="String" default=""/>
        <aura:attribute name="resetOffsetLimit" type="Boolean" default="false"/>
        <aura:attribute name="recordId" type="String" />
        <aura:html tag="style">


    .slds-modal__footer{
        display:none;
    }
     .slds-modal__container{
        max-width: 80rem !important;
        width:80% !important;

    }
    .slds-modal__content{
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }
   <!--.slds-modal__close{
        display:none;
    }-->

</aura:html>

        <!-- handlers-->
        <aura:handler name="init" value="{! this }" action="{! c.init }"/>
        <lightning:notificationsLibrary aura:id="notifLib"/>

        <div class="slds">
            <div class="slds-is-relative">

                <div class="slds-grid slds-wrap slds-p-around_x-small">
                      <div class="slds-col slds-size_1-of-1">
                          <div class="slds-grid slds-wrap slds-p-around_x-small">
                              <div class="slds-col slds-size_1-of-2 slds-m-bottom_x-small">
                                  <lightning:input onchange="{!c.searchProducts}" type="search" label="Searh" variant="label-hidden" placeholder="Search for Product Name or Part Number" aura:id="SearchBox"/>
                              </div>
                               <div class="slds-col slds-size_1-of-2 slds-m-bottom_x-small">

                              </div>
                              <div class="slds-col slds-size_1-of-2 slds-m-bottom_x-small">
                                 Selected Products {!v.selectedRowsCount}
                              </div>
                              <div class="slds-col slds-size_1-of-2 slds-m-bottom_x-small">

                              </div>
                          </div>

                      </div>
                      <div class="slds-col slds-size_1-of-1">
                        <!-- the container element determine the height of the datatable -->
                            <div style="height: 300px;">
                                <lightning:datatable
                                    columns="{! v.columns }"
                                    data="{! v.data }"
                                    keyField="{! v.keyField }"
                                    showRowNumberColumn="true"
                                    selectedRows="{! v.selectedRows }"
                                    onrowselection="{! c.updateSelectedText }"
                                    enableInfiniteLoading="{! v.enableInfiniteLoading }"
                                    loadMoreOffset="{! v.loadMoreOffset }"
                                    onloadmore="{! c.loadMoreData }"
                                    />
                            </div>
                            {! v.loadMoreStatus }
                      </div>
                      <div class="slds-col slds-size_1-of-1">
                          <div class="slds-grid slds-wrap slds-p-around_x-small">
                              <div class="slds-col slds-size_1-of-2 slds-m-bottom_x-small">

                              </div>
                               <div class="slds-col slds-size_1-of-2 slds-m-bottom_x-small">
                                     <div class="slds-float_right">
                                        <lightning:button label="Clear" title="Clear" onclick="{! c.clearSelection }"/>
                                        <lightning:button variant="brand" label="Save" title="Save" onclick="{! c.saveProductData }" />
                                    </div>
                              </div>

                          </div>
                      </div>
                    </div>

        </div>
       </div>

    </aura:component>