Uma tabela de membros da equipe com pesquisa, filtros, ordenação, seleção com ações em lote, paginação, menu por linha, edição numa gaveta e confirmação de exclusão.
A tela que fica em "Configurações → Equipe" na maioria dos SaaS, dentro da estrutura do app: cabeçalho, barra lateral (só ícones no tablet, uma gaveta de menu no celular) e a área de conteúdo. Tudo funciona: filtre por função, time e situação, ordene qualquer coluna, selecione linhas em várias páginas, mude funções em lote, edite alguém numa gaveta, convide um membro novo e exclua com confirmação. As mudanças ficam no estado local até você recarregar a página.
minimal · light · #3fa34d
FernwayAP
Membros da equipe
Convide pessoas, defina o que cada uma pode fazer e remova o acesso de quem sai.
Pesquisa e filtros. O campo de pesquisa encontra nomes e e-mails enquanto você digita. Função e situação são Selects com a opção "Todas"; time é um Combobox, para você digitar e achar numa lista maior. No celular, os filtros vão para uma gaveta inferior, atrás de um botão Filtros que conta os ativos. Limpar filtros aparece quando algum filtro está ligado, e a linha acima da tabela diz quantos membros combinam.
Ordenação. Toda coluna com dados ordena ao clicar: crescente, decrescente e de volta para sem ordem. A tabela começa ordenada por nome.
Seleção e ações em lote. As linhas têm caixas de seleção, e a do cabeçalho seleciona todas as linhas que passam nos filtros, em todas as páginas. Com algo selecionado, aparece uma barra com Mudar função, Suspender e Excluir. Mudar um filtro limpa a seleção, para uma ação em lote nunca atingir linhas que você não está vendo.
Paginação. Dez linhas por página. Um filtro novo volta para a página 1.
Menu da linha. Editar, Suspender ou Reativar, e Excluir para um membro.
Editar e convidar numa gaveta. O mesmo formulário edita um membro ou convida um novo. Ele confere o nome, o formato do e-mail e se ninguém mais usa aquele e-mail.
Excluir com confirmação. Um AlertDialog diz quem vai ser excluído e o que acontece depois. Toda mudança termina com um toast.
Telas estreitas. Abaixo de 720px as colunas Time e Último acesso saem; no celular, função e situação vão para baixo do nome. Se ainda não couber, a tabela rola para o lado.
A tabela tem nome, e os cabeçalhos ordenáveis são botões que definem aria-sort, então o leitor de tela diz qual coluna está ordenada e em que sentido.
Cada caixa de seleção e cada menu de linha leva o nome do membro ("Selecionar Aline Prado", "Ações para Aline Prado"); a contagem de selecionados e a linha "Mostrando 12 de 18" são regiões dinâmicas.
A gaveta e o diálogo prendem o foco e o devolvem ao menu que os abriu. Depois de uma exclusão a linha some, então o foco vai para o título da página.
Quando o formulário da gaveta tem erro, o foco vai para o primeiro campo com problema, e o erro é lido junto.
A aba Código mostra a tela inteira em um arquivo, com @camaleo/react e lucide-react como únicas dependências (o DataTable traz o TanStack Table junto). Os membros são dados fixos: troque pela sua API, e leve a filtragem e a paginação para o servidor quando a lista crescer (o DataTable aceita pageCount, totalRows e sorting controlado para isso).