Demo3Cmp

<aura:component controller="AccountController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
	<aura:attribute name="accounts" type="List" /> 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
    <aura:handler name="navigateToComponent"  event="c:navigateToComponent" action="{!c.setFilterResult}"/>
    <aura:attribute name="accountid" type="String"/> 
    <aura:attribute name="Likedisable" type="Boolean" default="false" /> 
    <aura:attribute name="showFilter" type="boolean" default="false"/>
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:scan_card" alternativeText="Total Account"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Account</h1>
                <h2 class="slds-text-heading--medium">View Account</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
        </lightning:layoutItem>
    </lightning:layout>
    <div class="slds-float--left">
      <lightning:button aura:id="View"  class="slds-button_neutral" label="filter" onclick="{!c.View}"  variant="preview"  iconName="utility:preview" disabled="{!v.Likedisable}"/>          
    </div>
    <br></br>
    <br></br>
    <aura:if isTrue="{!v.showFilter}">
        <c:filter />
    </aura:if>
     <h1>Account List:</h1>
        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-title_caps" scope="col">
        <div class="slds-truncate" title="ID">ID</div>
      </th>
      <th class="slds-text-title_caps" scope="col">
        <div class="slds-truncate" title="Account Name">Account Name</div>
      </th>
      <th class="slds-text-title_caps" scope="col">
        <div class="slds-truncate" title="Description">Description</div>
      </th>
      <th class="slds-text-title_caps" scope="col">
        <div class="slds-truncate" title="Number Of Employees">Number Of Employees</div>
      </th>
      <th class="slds-text-title_caps" scope="col">
        <div class="slds-truncate" title="Annual Revenue">Annual Revenue</div>
      </th>
      <th class="slds-text-title_caps" scope="col">
        <div class="slds-truncate" title="Phone">Phone</div>
      </th>
      
    </tr>
  </thead>
    
        
       
            <tbody> 
                <aura:iteration items="{!v.accounts}" var="account"> 
    <tr class="slds-hint-parent">
      <th data-label="ID" scope="row">
        <div class="slds-truncate" title="{!account.Id}"><a href="javascript:void(0);" tabindex="-1">{!account.Id}</a></div>
      </th>
      <td data-label="Account Name">
        <div class="slds-truncate" title="{!account.Name}">{!account.Name}</div>
      </td>
      <td data-label="Description">
        <div class="slds-truncate" title="{!account.Description}">{!account.Description}</div>
      </td>
      <td data-label="Number Of Employees">
        <div class="slds-truncate" title="{!account.NumberOfEmployees}">{!account.NumberOfEmployees}</div>
      </td>
      <td data-label="Annual Revenue">
        <div class="slds-truncate" title="{!account.AnnualRevenue}">{!account.AnnualRevenue}</div>
      </td>
      <td data-label="Phone">
        <div class="slds-truncate" title="{!account.Phone}">{!account.Phone}</div>
      </td>
      
    </tr>
    
               </aura:iteration>
  </tbody>
    </table>
</aura:component>