TYPO3: JS Snippets for Modal Table Filtering

run-in-browser-console.js

// this works in the browser console, 
// when the modal dialog is visible
// after clicking on the "i" button for a frontendusergroup

function filterTableRows(tableDiv) {
    if (!tableDiv) { console.error(`selector 'div.table-fit' not found!`); return; }
    const table = tableDiv.querySelector('table');
    if (!table) { console.error(`table contains no data`); return; }

    const headers = table.querySelectorAll('thead th');
    let fieldColIndex = -1;
    if (!headers) { console.error(`table contains no headers`); return; }
    headers.forEach((th, index) => {
        if (th.textContent.trim() === 'Field') {
            fieldColIndex = index;
        }
    });
    if (fieldColIndex === -1) { console.error(`table contains no 'Field' column`); return; }

    const rows = table.querySelectorAll('tbody tr');
    rows.forEach(row => {
        const cells = row.querySelectorAll('td');
        if (cells.length > fieldColIndex) {
            const fieldValue = cells[fieldColIndex].textContent.trim();
            if (fieldValue !== 'Groups') {
                row.remove();
            }
        }
    });
}

function selectIFrame(sel) {
    // Access the iframe and apply the function
    const iframe = document.querySelector(sel);
    if (iframe) {
        const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
        const tableDivs = iframeDocument.querySelectorAll('div.table-fit');

        if (tableDivs && tableDivs.length > 0) {
            filterTableRows(tableDivs[1]);
        }
    }
}


selectIFrame('iframe[name="modal_frame"]'); 

typo3-filter-modal-dialogbox-backend-feusergroup-onInfoIconClick.js

// Define the filterTableRows function
function filterTableRows(selector = 'div.table-fit table.table-striped') {
    const tableDiv = document.querySelector(selector);
    if (!tableDiv) { console.error(`selector '${selector}' not found!`); return; }
    //const table = tableDiv.querySelector('table.table-striped');
    //if (!table) { console.error(`table contains no data`); return; }

    const headers = tableDiv.querySelectorAll('thead th');
    let fieldColIndex = -1;
    if (!headers) { console.error(`table contains no headers`); return; }
    headers.forEach((th, index) => {
        if (th.textContent.trim() === 'Field') {
            fieldColIndex = index;
        }
    });
    if (fieldColIndex === -1) { console.error(`table contains no 'Field' column`); return; }

    const rows = table.querySelectorAll('tbody tr');
    rows.forEach(row => {
        const cells = row.querySelectorAll('td');
        if (cells.length > fieldColIndex) {
            const fieldValue = cells[fieldColIndex].textContent.trim();
            if (fieldValue !== 'Groups') {
                row.remove();
            }
        }
    });
}

function selectIFrame(){
    // Access the iframe and apply the function
    const iframe = document.querySelector('iframe[name="modal_frame"]');
    if (iframe) {
        //iframe.onload = function() {
            const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
            filterTableRows.call(iframeDocument, 'div.table-fit');
        //};
    } else {
        console.error('Iframe not found!');
    }
}

selectIFrame();