Filtrar dados da tabela com menu dropdown usando apenas Javascript puro e sem frameworks

Programação
#1

Olá, pessoal.

Tenho pesquisado no google e no youtube, mas ainda não consegui encontrar a solução que preciso. O único que consegui chegar perto foi um vídeo de um indiano. Porém, mesmo assim não corresponde ao que eu exatamente necessito.
Se alguém puder me ajudar, agradeço.
Vamos lá:

Tenho uma tabela.
Nesta tabela existem várias colunas.
Uma dessas colunas reúne informações de cor da pele de várias pessoas.
Preciso criar um menu dropdown, que seja relacionada a esta coluna de “skin_color” .
Este menu , de preferência deve estar apresentado por fora da tabela, como se fosse um botão perto da tabela.
Neste menu dropdown, quero que apresente várias opções de “cor da pele”.
A funcionalidade que quero: ao ser selecionada uma “cor da pele”, a tabela me apresente apenas a lista de pessoas as quais são relacionadas com a "cor de pele " que selecionei.

Não quero usar framework datatable. Quero usar javascript puro.
Motivo: o framework vem com outras funcionalidades que não quero.

Estou neste patamar aqui.

Sem título-1
Sem título-13394×1717 490 KB

Sem título-2
Sem título-22671×1660 306 KB

#2

O jeito mais simples pra fazer isso é usando o filter.

arr = arr.filter((item) => item.skin === “Rosa”); //Rosa deve ser a cor que a pessoa selecionou no select.
//arr é o array que popula sua tabela

————

const qSkin = document.querySelector(“#combo-skin”);

Ai vc pode trocar o “Rosa” por:

item.skin === qSkin.value
1 curtida
#3

Olá, Rodrigues !

Não entendi exatamente como isso deve ser implementado, porém você já me ajudou bastante em me informar sobre o filter.

Já sabia da existência do filter, mas não com esse nível de detalhamento.

Muito obrigada! Saúde e paz.

1 curtida
#4

Vc pode colocar no onchange do select.

<select onchange=“filterBySkin”>
   <option value=“blue>Blue</option>
</select>

function onChange(evt) {
   const value = evt.target.value;
   arr = arr.filter((item) => item.skin === value);
}
1 curtida
#5

Eu acho q assim funciona, faz tempo q não uso vanillaJS (tô escrevendo pelo celular pra piorar), se não der certo da um toque aqui

1 curtida
#6

Obrigada !

1 curtida
#7

Vou estudar sobre este vanilla. Muito obrigada pelas dicas Rodrigues ! Ajudou a clarear a mente ! :grinning:

1 curtida
#8

o vanilla seria um framework?
no caso deste código, ele funcionaria apenas se usasse o vanilla?

#9

Não não, acabei não sendo muito claro nisso, desculpe!

VanillaJS é o javascript puro mesmo

1 curtida
#10

beleza, Rodrigues. valeu !