How to filter multiple columns in an HTML table?

I want to implement a filtering function similar to the one in excel, however I want two options “All” and “None”, “None” hides all rows if a certain column has empty/blank cells and “All” hides all rows if a certain column has non-empty/non-blank cells. It is just like the excel filter functionality but a bit more generalized.

How can I implement this?

my first approach was to simply see if the cell is empty or not and based on the selection i would either hide it or not, that did not work as removing filters would affect different unrelated columns.

my second approach was to have a huge hashmap of arrays with values “All”, “None”. each column had its own array in the hashmap. “All” and “None” would be removed/added based on if they are checkedunchecked in that column. then it checks if either “All” or “None” are unchecked and if the cells is not blank or blank respectively for every row and every column

this is a jsfiddle to showcase what my code looks like
https://jsfiddle.net/7ng4adfh/

This is my code

function filter_rows(index, parentID) {
    let rows = tableid.rows;
    let options = document.getElementById(parentID).getElementsByTagName('label')
    let checkboxes = document.getElementById(parentID).getElementsByTagName('input')
    for (let i = 0; i < options.length; i++) {
        if (checkboxes[i].checked) {
            if (!hashmapOfoptions[index].includes(options[i].innerText)) {
                hashmapOfoptions[index].push(options[i].innerText)
            }
        } else {
            hashmapOfoptions[index] = hashmapOfoptions[index].filter(item => item !== options[i].innerText)
        }
    }


    for (let row = 1; row < rows.length; row++) {
        let cols = rows[row].cells;
        willHideRow = false
        for (let j = 0; j < cols.length; j++) {
            if (!hashmapOfoptions[j].includes("None")) {
                if (cols[j].innerText == "" || cols[j].innerText == "-" || cols[j].innerText == "n") {
                    willHideRow = true
                }
            }
            if (!hashmapOfoptions[j].includes("All")) {
                if (cols[j].innerText != "" || cols[j].innerText != "-" || cols[j].innerText != "n") {
                    willHideRow = true
                }
            }
        }
        if (willHideRow) {
            rows[row].style.display = 'none'
        } else {
            rows[row].style.display = ''
        }
    }
}

How can i make it work?