1

I have this Angular component implemented as a table:

<div _ngcontent-nyg-c4="" fxlayout="column" class="feature-content" id="content.rowify" style="flex-direction: column; box-sizing: border-box; display: flex; place-content: stretch space-between; align-items: stretch; max-width: 100%;"><mobileweb-value-display _ngcontent-nyg-c34="" class="compact-xs" id="materialInquiryDuplicateMessage" label.flex="100%" _nghost-nyg-c31=""><!----><div _ngcontent-nyg-c31="" fxlayout="row" fxlayoutalign="start stretch" class="compact-xs track-size-dialog-c3ba10e1-f724-345e-d637-788428718b44" id="materialInquiryDuplicateMessage.form-info" style="flex-direction: row; box-sizing: border-box; display: flex; place-content: stretch flex-start; align-items: stretch; max-height: 100%;"><!----><!----><mat-label _ngcontent-nyg-c31="" class="compact-xs compact-right-margin ng-star-inserted" id="materialInquiryDuplicateMessage.label" style="flex: 1 1 100%; box-sizing: border-box; max-width: 100%;">Please select one material from the list<!----><span _ngcontent-nyg-c31="" class="ng-star-inserted">:</span></mat-label><!----><div _ngcontent-nyg-c31="" fxflex="auto" fxlayout="row" fxlayoutalign="space-between stretch" class="ng-star-inserted" style="flex-direction: row; box-sizing: border-box; display: flex; place-content: stretch space-between; align-items: stretch; flex: 1 1 auto;"><!----><!----><!----><!----><!----><!----></div></div></mobileweb-value-display><div _ngcontent-nyg-c34="" id="table-container" class="resizeable-container-c3ba10e1-f724-345e-d637-788428718b44" style="height: calc(100vh - 97px);"><mobileweb-mobile-grid _ngcontent-nyg-c34=""><!----><ag-grid-angular class="mobile-grid mobile-grid-top-gap"><div ref="eRootWrapper" class="ag-root-wrapper ag-layout-normal ag-ltr ag-keyboard-focus">
                
                <div class="ag-root-wrapper-body ag-layout-normal ag-focus-managed" ref="rootWrapperBody"><div class="ag-tab-guard ag-tab-guard-top" role="presentation" tabindex="0"></div>
                    <!--AG-GRID-COMP--><div class="ag-root ag-unselectable ag-layout-normal" role="grid" unselectable="on" ref="gridPanel" aria-rowcount="6" aria-colcount="3">
        <!--AG-HEADER-ROOT--><div class="ag-header ag-focus-managed ag-pivot-off" role="presentation" ref="headerRoot" unselectable="on" style="height: 26px; min-height: 26px;">
            <div class="ag-pinned-left-header ag-hidden" ref="ePinnedLeftHeader" role="presentation" style="width: 0px; max-width: 0px; min-width: 0px;"><div class="ag-header-row ag-header-row-column" role="row" aria-rowindex="1" style="top: 0px; height: 25px; width: 0px;"></div></div>
            <div class="ag-header-viewport" ref="eHeaderViewport" role="presentation">
                <div class="ag-header-container" ref="eHeaderContainer" role="rowgroup" style="width: 300px; transform: translateX(0px);"><div class="ag-header-row ag-header-row-column" role="row" aria-rowindex="1" style="top: 0px; height: 25px; width: 300px;"><div class="ag-header-cell ag-focus-managed ag-header-cell-sortable" role="columnheader" unselectable="on" tabindex="-1" aria-sort="none" aria-colindex="1" col-id="lookupCode" style="width: 100px; left: 0px;">
            <div ref="eResize" class="ag-header-cell-resize ag-hidden" role="presentation"></div>
            <!--AG-CHECKBOX--><div role="presentation" ref="cbSelectAll" class="ag-header-select-all ag-labeled ag-label-align-right ag-checkbox ag-input-field ag-hidden">
                <div ref="eLabel" class="ag-input-field-label ag-label ag-hidden ag-checkbox-label"></div>
                <div ref="eWrapper" class="ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper" role="presentation">
                    <input ref="eInput" class="ag-input-field-input ag-checkbox-input" type="checkbox" id="ag-220-input" tabindex="-1" aria-label="Press Space to toggle all rows selection (unchecked)">
                </div>
            </div>
        <div class="ag-cell-label-container ag-header-cell-sorted-none">
            
            <div ref="eLabel" class="ag-header-cell-label" role="presentation" unselectable="on">
                <span ref="eText" class="ag-header-cell-text" unselectable="on">Material</span>
                <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon ag-hidden" aria-hidden="true"><span class="ag-icon ag-icon-filter" unselectable="on" role="presentation"></span></span>
                <span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order ag-hidden" aria-hidden="true"></span>
                <span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon ag-hidden" aria-hidden="true"><i class="fas fa-arrow-circle-up"></i></span>
                <span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon ag-hidden" aria-hidden="true"><i class="fas fa-arrow-circle-down"></i></span>
                <span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon ag-hidden" aria-hidden="true"><span class="ag-icon ag-icon-none" unselectable="on" role="presentation"></span></span>
            </div>
        </div></div><div class="ag-header-cell ag-focus-managed ag-header-cell-sortable" role="columnheader" unselectable="on" tabindex="-1" aria-sort="none" aria-colindex="2" col-id="description" style="width: 100px; left: 100px;">
            <div ref="eResize" class="ag-header-cell-resize ag-hidden" role="presentation"></div>
            <!--AG-CHECKBOX--><div role="presentation" ref="cbSelectAll" class="ag-header-select-all ag-labeled ag-label-align-right ag-checkbox ag-input-field ag-hidden">
                <div ref="eLabel" class="ag-input-field-label ag-label ag-hidden ag-checkbox-label"></div>
                <div ref="eWrapper" class="ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper" role="presentation">
                    <input ref="eInput" class="ag-input-field-input ag-checkbox-input" type="checkbox" id="ag-223-input" tabindex="-1" aria-label="Press Space to toggle all rows selection (unchecked)">
                </div>
            </div>
        <div class="ag-cell-label-container ag-header-cell-sorted-none">
            
            <div ref="eLabel" class="ag-header-cell-label" role="presentation" unselectable="on">
                <span ref="eText" class="ag-header-cell-text" unselectable="on">Description</span>
                <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon ag-hidden" aria-hidden="true"><span class="ag-icon ag-icon-filter" unselectable="on" role="presentation"></span></span>
                <span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order ag-hidden" aria-hidden="true"></span>
                <span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon ag-hidden" aria-hidden="true"><i class="fas fa-arrow-circle-up"></i></span>
                <span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon ag-hidden" aria-hidden="true"><i class="fas fa-arrow-circle-down"></i></span>
                <span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon ag-hidden" aria-hidden="true"><span class="ag-icon ag-icon-none" unselectable="on" role="presentation"></span></span>
            </div>
        </div></div><div class="ag-header-cell ag-focus-managed ag-header-cell-sortable" role="columnheader" unselectable="on" tabindex="-1" aria-sort="none" aria-colindex="3" col-id="projectLookupCode" style="width: 100px; left: 200px;">
            <div ref="eResize" class="ag-header-cell-resize ag-hidden" role="presentation"></div>
            <!--AG-CHECKBOX--><div role="presentation" ref="cbSelectAll" class="ag-header-select-all ag-labeled ag-label-align-right ag-checkbox ag-input-field ag-hidden">
                <div ref="eLabel" class="ag-input-field-label ag-label ag-hidden ag-checkbox-label"></div>
                <div ref="eWrapper" class="ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper" role="presentation">
                    <input ref="eInput" class="ag-input-field-input ag-checkbox-input" type="checkbox" id="ag-226-input" tabindex="-1" aria-label="Press Space to toggle all rows selection (unchecked)">
                </div>
            </div>
        <div class="ag-cell-label-container ag-header-cell-sorted-none">
            
            <div ref="eLabel" class="ag-header-cell-label" role="presentation" unselectable="on">
                <span ref="eText" class="ag-header-cell-text" unselectable="on">Project</span>
                <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon ag-hidden" aria-hidden="true"><span class="ag-icon ag-icon-filter" unselectable="on" role="presentation"></span></span>
                <span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order ag-hidden" aria-hidden="true"></span>
                <span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon ag-hidden" aria-hidden="true"><i class="fas fa-arrow-circle-up"></i></span>
                <span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon ag-hidden" aria-hidden="true"><i class="fas fa-arrow-circle-down"></i></span>
                <span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon ag-hidden" aria-hidden="true"><span class="ag-icon ag-icon-none" unselectable="on" role="presentation"></span></span>
            </div>
        </div></div></div></div>
            </div>
            <div class="ag-pinned-right-header ag-hidden" ref="ePinnedRightHeader" role="presentation" style="width: 0px; max-width: 0px; min-width: 0px;"><div class="ag-header-row ag-header-row-column" role="row" aria-rowindex="1" style="top: 0px; height: 25px; width: 0px;"></div></div>
        </div>
        <div class="ag-floating-top" ref="eTop" role="presentation" unselectable="on" style="min-height: 0px; height: 0px; display: none; overflow-y: hidden;">
            <div class="ag-pinned-left-floating-top ag-hidden" ref="eLeftTop" role="presentation" unselectable="on"></div>
            <div class="ag-floating-top-viewport" ref="eTopViewport" role="presentation" unselectable="on">
                <div class="ag-floating-top-container" ref="eTopContainer" role="presentation" unselectable="on" style="width: 300px; transform: translateX(0px);"></div>
            </div>
            <div class="ag-pinned-right-floating-top ag-hidden" ref="eRightTop" role="presentation" unselectable="on"></div>
            <div class="ag-floating-top-full-width-container ag-hidden" ref="eTopFullWidthContainer" role="presentation" unselectable="on"></div>
        </div>
        <div class="ag-body-viewport ag-layout-normal ag-row-no-animation" ref="eBodyViewport" role="presentation">
            <div class="ag-pinned-left-cols-container ag-hidden" ref="eLeftContainer" role="presentation" unselectable="on" style="height: 250px;"><div role="row" row-index="0" aria-rowindex="2" row-id="0" comp-id="228" class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-position-absolute ag-row-first ag-row-selected" aria-selected="true" style="height: 50px; transform: translateY(0px); " aria-label="Press SPACE to deselect this row."></div><div role="row" row-index="1" aria-rowindex="3" row-id="1" comp-id="232" class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-position-absolute" aria-selected="false" style="height: 50px; transform: translateY(50px); " aria-label="Press SPACE to select this row."></div><div role="row" row-index="2" aria-rowindex="4" row-id="2" comp-id="236" class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-position-absolute" aria-selected="false" style="height: 50px; transform: translateY(100px); " aria-label="Press SPACE to select this row."></div><div role="row" row-index="3" aria-rowindex="5" row-id="3" comp-id="240" class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-position-absolute" aria-selected="false" style="height: 50px; transform: translateY(150px); " aria-label="Press SPACE to select this row."></div><div role="row" row-index="4" aria-rowindex="6" row-id="4" comp-id="244" class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-position-absolute ag-row-last" aria-selected="false" style="height: 50px; transform: translateY(200px); " aria-label="Press SPACE to select this row."></div></div>
            <div class="ag-center-cols-clipper" ref="eCenterColsClipper" role="presentation" unselectable="on" style="height: 250px;">
                <div class="ag-center-cols-viewport" ref="eCenterViewport" role="presentation" style="height: calc(100% + 17px);">
                    <div class="ag-center-cols-container" ref="eCenterContainer" role="rowgroup" unselectable="on" style="width: 300px; height: 250px;"><div role="row" row-index="0" aria-rowindex="2" row-id="0" comp-id="228" class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-position-absolute ag-row-first ag-row-selected" aria-selected="true" style="height: 50px; transform: translateY(0px); " aria-label="Press SPACE to deselect this row."><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="1" comp-id="229" col-id="lookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 0px;">1</div><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="2" comp-id="230" col-id="description" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 100px;">1</div><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="3" comp-id="231" col-id="projectLookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 200px;">Derek Project</div></div><div role="row" row-index="1" aria-rowindex="3" row-id="1" comp-id="232" class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-position-absolute" aria-selected="false" style="height: 50px; transform: translateY(50px); " aria-label="Press SPACE to select this row."><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="1" comp-id="233" col-id="lookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 0px;">1</div><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="2" comp-id="234" col-id="description" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 100px;">1</div><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="3" comp-id="235" col-id="projectLookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 200px;">Derek Project 7</div></div><div role="row" row-index="2" aria-rowindex="4" row-id="2" comp-id="236" class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-position-absolute" aria-selected="false" style="height: 50px; transform: translateY(100px); " aria-label="Press SPACE to select this row."><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="1" comp-id="237" col-id="lookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 0px;">1</div><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="2" comp-id="238" col-id="description" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 100px;">A single blue pillow</div><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="3" comp-id="239" col-id="projectLookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 200px;">ST P&amp;S</div></div><div role="row" row-index="3" aria-rowindex="5" row-id="3" comp-id="240" class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-position-absolute" aria-selected="false" style="height: 50px; transform: translateY(150px); " aria-label="Press SPACE to select this row."><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="1" comp-id="241" col-id="lookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 0px;">12</div><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="2" comp-id="242" col-id="description" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 100px;">XtraRainbowSheet</div><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="3" comp-id="243" col-id="projectLookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 200px;">ST P&amp;S</div></div><div role="row" row-index="4" aria-rowindex="6" row-id="4" comp-id="244" class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-position-absolute ag-row-last" aria-selected="false" style="height: 50px; transform: translateY(200px); " aria-label="Press SPACE to select this row."><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="1" comp-id="245" col-id="lookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 0px;">1</div><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="2" comp-id="246" col-id="description" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 100px;">1</div><div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="3" comp-id="247" col-id="projectLookupCode" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 200px;">002</div></div></div>
                </div>
            </div>
            <div class="ag-pinned-right-cols-container ag-hidden" ref="eRightContainer" role="presentation" unselectable="on" style="height: 250px;"><div role="row" row-index="0" aria-rowindex="2" row-id="0" comp-id="228" class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-position-absolute ag-row-first ag-row-selected" aria-selected="true" style="height: 50px; transform: translateY(0px); " aria-label="Press SPACE to deselect this row."></div><div role="row" row-index="1" aria-rowindex="3" row-id="1" comp-id="232" class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-position-absolute" aria-selected="false" style="height: 50px; transform: translateY(50px); " aria-label="Press SPACE to select this row."></div><div role="row" row-index="2" aria-rowindex="4" row-id="2" comp-id="236" class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-position-absolute" aria-selected="false" style="height: 50px; transform: translateY(100px); " aria-label="Press SPACE to select this row."></div><div role="row" row-index="3" aria-rowindex="5" row-id="3" comp-id="240" class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-position-absolute" aria-selected="false" style="height: 50px; transform: translateY(150px); " aria-label="Press SPACE to select this row."></div><div role="row" row-index="4" aria-rowindex="6" row-id="4" comp-id="244" class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-position-absolute ag-row-last" aria-selected="false" style="height: 50px; transform: translateY(200px); " aria-label="Press SPACE to select this row."></div></div>
            <div class="ag-full-width-container" ref="eFullWidthContainer" role="presentation" unselectable="on" style="height: 250px;"></div>
        </div>
        <div class="ag-floating-bottom" ref="eBottom" role="presentation" unselectable="on" style="min-height: 0px; height: 0px; display: none; overflow-y: hidden;">
            <div class="ag-pinned-left-floating-bottom ag-hidden" ref="eLeftBottom" role="presentation" unselectable="on"></div>
            <div class="ag-floating-bottom-viewport" ref="eBottomViewport" role="presentation" unselectable="on">
                <div class="ag-floating-bottom-container" ref="eBottomContainer" role="presentation" unselectable="on" style="width: 300px; transform: translateX(0px);"></div>
            </div>
            <div class="ag-pinned-right-floating-bottom ag-hidden" ref="eRightBottom" role="presentation" unselectable="on"></div>
            <div class="ag-floating-bottom-full-width-container ag-hidden" ref="eBottomFullWidthContainer" role="presentation" unselectable="on"></div>
        </div>
        <div class="ag-body-horizontal-scroll" ref="eHorizontalScrollBody" aria-hidden="true" style="height: 17px; max-height: 17px; min-height: 17px;">
            <div class="ag-horizontal-left-spacer ag-scroller-corner" ref="eHorizontalLeftSpacer" style="width: 0px; max-width: 0px; min-width: 0px;"></div>
            <div class="ag-body-horizontal-scroll-viewport" ref="eBodyHorizontalScrollViewport" style="height: 17px; max-height: 17px; min-height: 17px;">
                <div class="ag-body-horizontal-scroll-container" ref="eBodyHorizontalScrollContainer" style="width: 300px; height: 17px; max-height: 17px; min-height: 17px;"></div>
            </div>
            <div class="ag-horizontal-right-spacer ag-scroller-corner" ref="eHorizontalRightSpacer" style="width: 0px; max-width: 0px; min-width: 0px;"></div>
        </div>
        <!--AG-OVERLAY-WRAPPER--><div class="ag-overlay ag-hidden" aria-hidden="true" ref="overlayWrapper">
            <div class="ag-overlay-panel">
                <div class="ag-overlay-wrapper ag-layout-normal ag-overlay-no-rows-wrapper" ref="eOverlayWrapper"></div>
            </div>
        </div>
    </div>
                    
                <div class="ag-tab-guard ag-tab-guard-bottom" role="presentation" tabindex="0"></div></div>
                
                <!--AG-PAGINATION--><div class="ag-paging-panel ag-unselectable ag-hidden" id="ag-185" aria-live="polite" aria-describedby="ag-185-start-page ag-185-start-page-number ag-185-of-page ag-185-of-page-number ag-185-first-row ag-185-to ag-185-last-row ag-185-of ag-185-row-count">
                <span class="ag-paging-row-summary-panel" aria-hidden="true">
                    <span id="ag-185-first-row" ref="lbFirstRowOnPage" class="ag-paging-row-summary-panel-number"></span>
                    <span id="ag-185-to">to</span>
                    <span id="ag-185-last-row" ref="lbLastRowOnPage" class="ag-paging-row-summary-panel-number"></span>
                    <span id="ag-185-of">of</span>
                    <span id="ag-185-row-count" ref="lbRecordCount" class="ag-paging-row-summary-panel-number"></span>
                </span>
                <span class="ag-paging-page-summary-panel" role="presentation">
                    <div ref="btFirst" class="ag-paging-button" role="button" aria-label="First Page" tabindex="0"><span class="ag-icon ag-icon-first" unselectable="on" role="presentation"></span></div>
                    <div ref="btPrevious" class="ag-paging-button" role="button" aria-label="Previous Page" tabindex="0"><span class="ag-icon ag-icon-previous" unselectable="on" role="presentation"></span></div>
                    <span class="ag-paging-description" aria-hidden="true">
                        <span id="ag-185-start-page">Page</span>
                        <span id="ag-185-start-page-number" ref="lbCurrent" class="ag-paging-number"></span>
                        <span id="ag-185-of-page">of</span>
                        <span id="ag-185-of-page-number" ref="lbTotal" class="ag-paging-number"></span>
                    </span>
                    <div ref="btNext" class="ag-paging-button" role="button" aria-label="Next Page" tabindex="0"><span class="ag-icon ag-icon-next" unselectable="on" role="presentation"></span></div>
                    <div ref="btLast" class="ag-paging-button" role="button" aria-label="Last Page" tabindex="0"><span class="ag-icon ag-icon-last" unselectable="on" role="presentation"></span></div>
                </span>
            </div>
                
            </div></ag-grid-angular></mobileweb-mobile-grid></div></div>

I tried to use this code to find all elements and click on the text if the text value is found:

        WebElement tableContainer = driver.findElement(By.id("table-container"));

        List<WebElement> list = tableContainer.findElements(By.xpath("./child::*"));

        // iterate sub-elements
        for ( WebElement element : list )
        {
            System.out.println("Searching for " + element.getText());

            if(element.getText().equals(valueToSelect))
            {
                element.click();
                break; 
            }
        }

        .....
        // Click Confirm button to submit form
        WebDriverWait webDriverWait = new WebDriverWait(driver, 5);
        System.out.println("Click on Button " + name + " using id locator " + button_id);
        WebElement webElement = webDriverWait.until(ExpectedConditions.elementToBeClickable(By.id(button_id)));
        webElement.sendKeys(Keys.ENTER);

But it's not working. Table row is not selected. Text values are printed during execution but nothing is selected. Can you advice me how I can implement the code properly.

1 Answer 1

1

You can use a XPATH selector to find an element by it's text. You can then .click() that element if it is clickable.

driver.findElement(By.xpath("//*[text=()='foo']");

Reads like: // starting anywhere on the page * any tagName [text()='foo'] whose text is 'foo'

1
  • Can you extend the example a little bit please? I can't make it working. Commented Apr 29, 2021 at 15:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.