Hey so this is the code for my lightning web component html:

<template>
<lightning-card>
<lightning-accordion allow-multiple-sections-open class="example-accordion"
onsectiontoggle={handleToggleSection}
active-section-name="B">
<lightning-accordion-section name="A" label="2 Bit Pizza LLC DBA Dominos [930781]">
<lightning-button-menu slot="actions"
alternative-text="Show menu"
icon-size="x-small"
menu-alignment="right">
<lightning-menu-item value="New" label="Menu Item One"></lightning-menu-item>
<lightning-menu-item value="Edit" label="Menu Item Two"></lightning-menu-item>
</lightning-button-menu>
<lightning-accordion-section name="B" label="2 Bit Pizza LLC DBA Dominos">
</lightning-accordion-section>
<lightning-accordion-section name="B" label="test location">
</lightning-accordion-section>
<lightning-accordion-section name="B" label="2 Bit Pizza LLC DBA Dominos [930551]">
</lightning-accordion-section>
<lightning-accordion-section name="B" label="2 Bit Pizza LLC DBA Dominos [923781]">
<lightning-accordion-section name="B" label="test archives">
</lightning-accordion-section>
</lightning-accordion-section>
<lightning-accordion-section name="B" label="2 Bit Pizza LLC DBA Dominos [930341]">
</lightning-accordion-section>
<lightning-accordion-section name="B" label="2 Bit Pizza LLC DBA Dominos [956081]">
</lightning-accordion-section>
<lightning-accordion-section name="B" label="Contacts">
<lightning-accordion-section name="B" label="Darren Wong">
<section aria-describedby="dialog-body-id-77" aria-label="Dialog Title" class="slds-popover slds-nubbin_left" role="dialog">
<button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">Close dialog</span>
</button>
<div class="slds-popover__body" id="dialog-body-id-77">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</section>
</lightning-accordion-section>
</lightning-accordion-section>
<lightning-accordion-section name="B" label="Orders">
</lightning-accordion-section>
</lightning-accordion-section>
</lightning-accordion>
</lightning-card>
</template>

I have slds popups but i want them to display only when i over the specific accordion text like when i hover over the accordion Darren Wong, a popover should appear with Darren's phone number and email address. 

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">
<th class="slds-text-align_right" scope="col" style="width:3.25rem">
<span id="column-group-header" class="slds-assistive-text">Choose a row</span>
<div class="slds-th__action slds-th__action_form">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-289" value="checkbox-289" tabindex="0" aria-labelledby="check-select-all-label column-group-header" />
<label class="slds-checkbox__label" for="checkbox-289" id="check-select-all-label">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select All</span>
</label>
</div>
</div>
</th>
<th aria-label="Service Location" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Service Location">Service Location</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Service Location column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-526" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Location" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Location">Location</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Account Name column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-527" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="ICC Subscriber ID" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="ICC Subscriber ID">ICC Subscriber ID</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="ICC Subscriber ID column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-528" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Legacy ID" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Legacy ID">Legacy ID</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Legacy ID column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-529" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Acquired Company or Biller" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Acquired Company or Biller">Acquired Company or Biller</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Acquired Company or Biller column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-530" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="BillingID" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="BillingID">BillingID</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="BillingID column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-531" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Billable" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Billable">Billable</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Billable column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-532" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Parent Service Location" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Parent Service Location">Parent Service Location</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Parent Service Location column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-533" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th class="" scope="col" style="width:3.25rem">
<div class="slds-truncate slds-assistive-text" title="Actions">Actions</div>
</th>
</tr>
</thead>
<tbody>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-01" value="checkbox-01" tabindex="0" aria-labelledby="check-button-label-01 column-group-header" />
<label class="slds-checkbox__label" for="checkbox-01" id="check-button-label-01">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 1</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="437 Jarvis Street">
<a href="javascript:void(0);" tabindex="0">437 Jarvis Street</a>
</div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="Acme">Acme</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="25665">25665</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 1,200 Widgets</span>
</button>
</td>
<td role="gridcell">
<div class="slds-truncate" title="2571 Lundigan DR">
<a href="javascript:void(0);" tabindex="0">2571 Lundigan Dr</a>
</div>
</td>
</tr>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-02" value="checkbox-02" tabindex="0" aria-labelledby="check-button-label-02 column-group-header" />
<label class="slds-checkbox__label" for="checkbox-02" id="check-button-label-02">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 2</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="5160 Orbitor Dr">
<a href="javascript:void(0);" tabindex="0">5160 Orbitor Dr</a>
</div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="Acme">Acme</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="256234">256234</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 1,200 Widgets</span>
</button>
</td>
<td role="gridcell">
<div class="slds-truncate" title="5160 orbitor Dr Mississuaga">
<a href="javascript:void(0);" tabindex="0">5160 orbitor Dr Mississuaga</a>
</div>
</td>
</tr>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-03" value="checkbox-03" tabindex="0" aria-labelledby="check-button-label-03 column-group-header" />
<label class="slds-checkbox__label" for="checkbox-03" id="check-button-label-03">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 3</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="121 University ave east">
<a href="javascript:void(0);" tabindex="0">121 University ave east</a>
</div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="salesforce.com">salesforce.com</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="563234">563234</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 1,200 Widgets</span>
</button>
</td>
<td role="gridcell">
<div class="slds-truncate" title="121 University Ave East">
<a href="javascript:void(0);" tabindex="0">121 University Ave East</a>
</div>
</td>
</tr>
</tbody>
</table>

This is my code of the table. Basically i want a button and javascript that would help me view the selected rows only.

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">
<th class="slds-text-align_right" scope="col" style="width:3.25rem">
<span id="column-group-header" class="slds-assistive-text">Choose a row</span>
<div class="slds-th__action slds-th__action_form">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-289" value="checkbox-289" tabindex="0" aria-labelledby="check-select-all-label column-group-header" />
<label class="slds-checkbox__label" for="checkbox-289" id="check-select-all-label">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select All</span>
</label>
</div>
</div>
</th>
<th aria-label="Service Location" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Service Location">Service Location</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Service Location column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-526" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Location" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Location">Location</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Account Name column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-527" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="ICC Subscriber ID" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="ICC Subscriber ID">ICC Subscriber ID</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="ICC Subscriber ID column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-528" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Legacy ID" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Legacy ID">Legacy ID</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Legacy ID column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-529" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Acquired Company or Biller" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Acquired Company or Biller">Acquired Company or Biller</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Acquired Company or Biller column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-530" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="BillingID" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="BillingID">BillingID</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="BillingID column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-531" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Billable" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Billable">Billable</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Billable column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-532" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Parent Service Location" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Parent Service Location">Parent Service Location</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Parent Service Location column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-533" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th class="" scope="col" style="width:3.25rem">
<div class="slds-truncate slds-assistive-text" title="Actions">Actions</div>
</th>
</tr>
</thead>
<tbody>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-01" value="checkbox-01" tabindex="0" aria-labelledby="check-button-label-01 column-group-header" />
<label class="slds-checkbox__label" for="checkbox-01" id="check-button-label-01">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 1</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="437 Jarvis Street">
<a href="javascript:void(0);" tabindex="0">437 Jarvis Street</a>
</div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="Acme">Acme</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="25665">25665</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 1,200 Widgets</span>
</button>
</td>
<td role="gridcell">
<div class="slds-truncate" title="2571 Lundigan DR">
<a href="javascript:void(0);" tabindex="0">2571 Lundigan Dr</a>
</div>
</td>
</tr>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-02" value="checkbox-02" tabindex="0" aria-labelledby="check-button-label-02 column-group-header" />
<label class="slds-checkbox__label" for="checkbox-02" id="check-button-label-02">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 2</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="5160 Orbitor Dr">
<a href="javascript:void(0);" tabindex="0">5160 Orbitor Dr</a>
</div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="Acme">Acme</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="256234">256234</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 1,200 Widgets</span>
</button>
</td>
<td role="gridcell">
<div class="slds-truncate" title="5160 orbitor Dr Mississuaga">
<a href="javascript:void(0);" tabindex="0">5160 orbitor Dr Mississuaga</a>
</div>
</td>
</tr>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-03" value="checkbox-03" tabindex="0" aria-labelledby="check-button-label-03 column-group-header" />
<label class="slds-checkbox__label" for="checkbox-03" id="check-button-label-03">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 3</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="121 University ave east">
<a href="javascript:void(0);" tabindex="0">121 University ave east</a>
</div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="salesforce.com">salesforce.com</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="563234">563234</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 1,200 Widgets</span>
</button>
</td>
<td role="gridcell">
<div class="slds-truncate" title="121 University Ave East">
<a href="javascript:void(0);" tabindex="0">121 University Ave East</a>
</div>
</td>
</tr>
</tbody>
</table>

This is my code of the table. Basically i want to hide and show the table when i click on the button.

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">
<th class="slds-text-align_right" scope="col" style="width:3.25rem">
<span id="column-group-header" class="slds-assistive-text">Choose a row</span>
<div class="slds-th__action slds-th__action_form">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-289" value="checkbox-289" tabindex="0" aria-labelledby="check-select-all-label column-group-header" />
<label class="slds-checkbox__label" for="checkbox-289" id="check-select-all-label">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select All</span>
</label>
</div>
</div>
</th>
<th aria-label="Service Location" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Service Location">Service Location</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Service Location column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-526" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Location" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Location">Location</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Account Name column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-527" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="ICC Subscriber ID" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="ICC Subscriber ID">ICC Subscriber ID</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="ICC Subscriber ID column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-528" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Legacy ID" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Legacy ID">Legacy ID</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Legacy ID column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-529" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Acquired Company or Biller" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Acquired Company or Biller">Acquired Company or Biller</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Acquired Company or Biller column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-530" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="BillingID" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="BillingID">BillingID</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="BillingID column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-531" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Billable" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Billable">Billable</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Billable column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-532" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Parent Service Location" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Parent Service Location">Parent Service Location</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Parent Service Location column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-533" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th class="" scope="col" style="width:3.25rem">
<div class="slds-truncate slds-assistive-text" title="Actions">Actions</div>
</th>
</tr>
</thead>
<tbody>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-01" value="checkbox-01" tabindex="0" aria-labelledby="check-button-label-01 column-group-header" />
<label class="slds-checkbox__label" for="checkbox-01" id="check-button-label-01">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 1</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="437 Jarvis Street">
<a href="javascript:void(0);" tabindex="0">437 Jarvis Street</a>
</div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="Acme">Acme</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="25665">25665</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 1,200 Widgets</span>
</button>
</td>
<td role="gridcell">
<div class="slds-truncate" title="2571 Lundigan DR">
<a href="javascript:void(0);" tabindex="0">2571 Lundigan Dr</a>
</div>
</td>
</tr>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-02" value="checkbox-02" tabindex="0" aria-labelledby="check-button-label-02 column-group-header" />
<label class="slds-checkbox__label" for="checkbox-02" id="check-button-label-02">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 2</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="5160 Orbitor Dr">
<a href="javascript:void(0);" tabindex="0">5160 Orbitor Dr</a>
</div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="Acme">Acme</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="256234">256234</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 1,200 Widgets</span>
</button>
</td>
<td role="gridcell">
<div class="slds-truncate" title="5160 orbitor Dr Mississuaga">
<a href="javascript:void(0);" tabindex="0">5160 orbitor Dr Mississuaga</a>
</div>
</td>
</tr>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-03" value="checkbox-03" tabindex="0" aria-labelledby="check-button-label-03 column-group-header" />
<label class="slds-checkbox__label" for="checkbox-03" id="check-button-label-03">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 3</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="121 University ave east">
<a href="javascript:void(0);" tabindex="0">121 University ave east</a>
</div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="salesforce.com">salesforce.com</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="563234">563234</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 1,200 Widgets</span>
</button>
</td>
<td role="gridcell">
<div class="slds-truncate" title="121 University Ave East">
<a href="javascript:void(0);" tabindex="0">121 University Ave East</a>
</div>
</td>
</tr>
</tbody>
</table>

This is my code of the table. Basically i want to filter out a row by a keyword so that it only shows that onw row and hides the rest. This is a lightning web component from slds.

Hey so i created a lightning web component button that opens a url on VS code and then deployed it to my org. Now i wanted to make this component reusable so that if i want to change the url that the button takes me to when clicked, i would just have to click on it when editing a page and it will show properties/attributes of the component and i can change the url there rather than going back to my code on VS code and changing it manually. Any help would be appreciated.

Hey so i created a lightning web component button that opens a url on VS code and then deployed it to my org. Now i wanted to make this component reusable so that if i want to change the url that the button takes me to when clicked, i would just have to click on it when editing a page and it will show properties/attributes of the component and i can change the url there rather than going back to my code on VS code and changing it manually. Any help would be appreciated.