Iteramdp com tabela via javascript | Front-end

Galera, preciso desenvolver um filtro na tabela e também contar as linhas de uma tabela importada do excel.

Estou com os seguintes problemas:

Preciso realizar filtragem de um valor, numa determinada e ao final da pesquisa, além do resultado preciso informar o número de linha exibidas.
O cabeçalho não esta ficando na linha 'th'
Preciso eliminar as colunas 1,7 e 8, ou não gerar essas colunas.
Colocar classe em cada 'td' adiciona, utilizando a coluna como referencia. ex coluna 1 = class 'data', coluna 2 = class 'bina'

let tbody = document.getElementById('tab-body')


function generateTableHead(tbody,data){
    ;
    let row = tbody.insertRow();
    for (let key of data) {
        let td = document.createElement('td');
        let text = document.createTextNode(key);
        td.appendChild(text);
        row.appendChild(td);



    }
}




function generateTableRows(tbody,data){
    let newRow = tbody.insertRow(-1);
    data.map((row,index)=>{

        if(!!row ){
            if (row instanceof Date){


                if( index == 4){

                    let date = new Date(row);
                    date.setHours(date.getHours()+3)
                    date = date.toLocaleTimeString('pt-BR', {  hour:'2-digit',minute:'2-digit',second:'2-digit' })
                    console.log = date

                    let newCell = newRow.insertCell()
                    let newText = document.createTextNode(date);
                    newCell.appendChild(newText)


                    return
                }else{
                    let date =  new Date(row)
                    date.setHours(date.getHours()+3)
                    date = date.toLocaleTimeString('pt-BR', { month:'2-digit', day:'2-digit'})
                    let newCell = newRow.insertCell()

                    let newText = document.createTextNode(date);
                    newCell.appendChild(newText)
                    return

                }

            }


        }


        let newCell = newRow.insertCell();
        let newText = document.createTextNode(row);

        if ((row=1) && (index = 1)){


        }
        newCell.appendChild(newText)
    })

}



var input = document.getElementById('input')

input.addEventListener('change', function() {
  readXlsxFile(input.files[0]).then(function(data) {
    var i = 1;
    let spanContador =document.getElementById('sp-total') 
    spanContador = spanContador.textContent = (data.length)-1;

    data.map((row,index)=>{


        if(i==0){
            let table = document.getElementById('tbl-data');
            generateTableHead(table,row);


        }


        if(i>0) {
            let table = document.getElementById('tbl-data');
            generateTableRows(table,row);
            if (index == 1){
                document.querySelector('td').classList.add('teste')
            }

        };





    });


    });




});

Olá Igor, tudo bem?

Com base nas informações fornecidas, irei tentar te ajudar.

Para realizar a filtragem de um valor em uma tabela, você pode utilizar o método filter() do JavaScript. Ele permite que você filtre um array com base em uma condição específica. Para contar o número de linhas exibidas após a filtragem, você pode utilizar a propriedade length do array resultante.

Para corrigir o problema do cabeçalho não estar na linha 'th', você pode utilizar a tag th ao invés de td para criar as células do cabeçalho.

Para eliminar as colunas 1, 7 e 8, você pode utilizar o método splice() do JavaScript para remover as colunas do array de dados antes de gerar a tabela.

Para adicionar classes em cada td utilizando a coluna como referência, você pode utilizar o método setAttribute() para adicionar a classe desejada.

Segue abaixo um exemplo de como implementar essas soluções:

let tbody = document.getElementById('tab-body')

function generateTableHead(tbody, data) {
  let row = tbody.insertRow();
  for (let key of data) {
    let th = document.createElement('th');
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }
}

function generateTableRows(tbody, data) {
  let newRow = tbody.insertRow(-1);
  data.map((row, index) => {
    if (!!row) {
      if (row instanceof Date) {
        if (index == 4) {
          let date = new Date(row);
          date.setHours(date.getHours() + 3);
          date = date.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
          let newCell = newRow.insertCell();
          let newText = document.createTextNode(date);
          newCell.appendChild(newText);
          return;
        } else {
          let date = new Date(row);
          date.setHours(date.getHours() + 3);
          date = date.toLocaleTimeString('pt-BR', { month: '2-digit', day: '2-digit' });
          let newCell = newRow.insertCell();
          let newText = document.createTextNode(date);
          newCell.appendChild(newText);
          return;
        }
      }
    }
    let newCell = newRow.insertCell();
    let newText = document.createTextNode(row);
    newCell.appendChild(newText);
    if (index == 0) {
      newCell.setAttribute('class', 'data');
    } else if (index == 1) {
      newCell.setAttribute('class', 'bina');
    }
  });
}

var input = document.getElementById('input')

input.addEventListener('change', function () {
  readXlsxFile(input.files[0]).then(function (data) {
    let spanContador = document.getElementById('sp-total');
    spanContador.textContent = (data.length) - 1;
    let filteredData = data.filter(row => row[0] === 'valorFiltrado');
    spanContador.textContent += ` (${filteredData.length} linhas exibidas)`;
    filteredData.forEach((row, index) => {
      let table = document.getElementById('tbl-data');
      if (index == 0) {
        generateTableHead(table, row);
      } else {
        row.splice(0, 1);
        row.splice(6, 2);
        generateTableRows(table, row);
      }
    });
  });
});

Essa é uma ideia, agora que você já tem uma ideia de como fazer, pode adaptar para o que você precisa.

Um abraço e bons estudos.