turma para vocês que estão no YouTube e vão perceber que é um vídeo com uma dinâmica um pouquinho diferente do Normal né Menos efeitos e tal porque na verdade só que é uma aula da comunidade sem rodar Mas é uma aula em que eu apresento um recurso novo que Bubble acabou de lançar que eu acho tão importante que eu optei por lançar também no YouTube essa aula que importante divulgar essa mensagem galera isso aqui é um recurso que eu aguardava alguns anos eu tenho certeza que você que usa Bubba há um tempo aí também já
sentiu muita falta e isso agora a gente tem no Bubble um recurso que se chama table ou tabela galera que que isso aqui faz quando a gente quer mostrar listas de dados em Bubble a gente usava o grupo repetidor e a gente tinha que montar tudo bem na unha assim né então por exemplo para mostrar uma lista de usuários começa aqui a gente precisava criar um grupo repetidor e personalizando item aí tem elemento por elemento a largura de cada um desses elementos precisava criar um cabeçalho fora do grupo repetidor a gente tinha que assim criada
a unha realmente uma tabela de dados o que esse novo componente nos traz essa tabela pronta galera então se eu quiser aqui por exemplo com a tabela só trouxe aqui para minha interface e agora eu quero criar uma lista de usuários aqui eu trago por um texto aqui vai ser o cabeçalho né então o nome idade país essa primeira linha fica estática E aí aqui na linha um para baixo fica o que uma linha é repetidora aí funciona de forma mais ou menos similar ao repetir em grupo então eu trago aqui por exemplo Opa tinha
uma imagem aqui que eu já tinha colocado aí eu trago um texto aqui por exemplo vamos dizer que essa tabela esteja fazendo uma busca por usuários simples assim aí eu venho aqui e trago o usuário da linha atual não é mais Card Cell como era no repetition o usuário da linha atual nome completo aí aqui eu trago os Vale da linha atual idade aqui eu trago os olhos da linha atual país início eu já consigo criar a tabela cara facinho facinho assim e Inclusive a tabela já fica responsiva então você vê que a gente consegue
atingir níveis de layout de responsabilidade de forma muito mais simples com esse layout aqui de tabela já pronto então olha só Qual que é a estrutura de um elemento table o elemento table é composto da tabela em si que você consegue personalizar quando você clica aqui para selecionar ela como um todo das colunas então para cada dado que você quer inserir você insere uma nova coluna pode inclusive ó adicionar mais uma coluna aqui ou não errei deleta essa coluna então ficou muito mais fácil de você manusear assim né Ela é composta de uma linha estática
que é a primeira linha aqui em que você pode inserir o via de regra a gente encera o nome do da coluna né Qual que é o título daquela coluna a gente coloca assim mais em e tal aquela coisa toda né Então essa linha estática ela já é Nativa do elemento table aí você tem as linhas dinâmicas logo abaixo ou repetition já começa a se repetir o que você insere aqui seja um texto seja um botão seja um ícone tudo que você inserir vai ser repetido nas linhas de baixo aqui e por fim existe a
célula propriamente dita que você se você selecionar a célula você vê até aqui na árvore de elementos ele já te traz as células né você também consegue definir condicionais para essa célula o layout dessa célula e por aí vai essa é a estrutura básica de uma table tá e seguinte eu já subi no Bubble essencial kit vários modelos prontos de tabela para você entender o funcionamento dela então você já consegue no Bubble sem choque aqui pegar uma dessas tabelas prontas copiar e colar direto no seu aplicativo aí você já vai trazer uma estrutura toda pronta
aí aqui você já consegue ver ele entender exatamente como que eu fiz para criar ela e para reproduzir esses recursos ou por exemplo de uma tabela vertical de uma tabela horizontal isso aqui é bem bacana galera basta você alterar a direção da tabela aqui ó de vertical para horizontal que ele já faz essa inversão automática Então se na vertical Eu tenho um dado por coluna agora na horizontal tem um dado por linha entendeu isso aqui é bacana porque às vezes você quer mostrar de uma forma no desktop de outra forma no celular então fica muito
fácil fazer isso você consegue criar condicionais específicas por coluna então quando seleciona uma coluna ela toda acende quando seleciona uma linha ela toda acende quando seleciona uma célula só a célula acende ou tabelas mais comuns assim com linhas alternadas E aí pessoal Olha só quando usar grupo repetidor e quando usar tabela a partir de agora antes a gente usava o grupo repetidor para tudo né agora galera a gente vai usar grupo repetidor para listas de uma só coluna ou listas de karts quer ver um exemplo clássico aqui a gente tem uma lista de cards são
cards de produtos assim apesar de ser uma lista de dados não é aquela lista com diversas colunas né galera então para isso aqui ainda vai fazer muito sentido você usar o grupo repetidor vai ter uma experiência melhor sem dúvida nenhuma e você vai usar a tabelas para quando for listas de mais de uma coluna que é exatamente o exemplo que a gente está trazendo aqui uma lista de usuários uma lista de produtos enfim tabelas de dados mesmos mesmo né recursos legais que atendem já possuem galera e que eu acho que se você começar a brincar
aí você vai já ver que realmente é massa agrega bastante primeiro copiar e colar colunas Então você consegue vir aqui ó que é copiar essa coluna quer copiar essa coluna aqui ó copiar E aí já Cola ela do lado direito por exemplo e tem o estilo dá muito mais facilidade em manusear dados você consegue deletar e adicionar colunas também já mostrei isso anteriormente você consegue inverter entre vertical e horizontal como por exemplo se você quiser fazer uma diferenciação entre desktop e celular e a responsabilidade é muito mais simples também claro que você ainda vai precisar
definir galera aqui na coluna por exemplo você vai selecionar a coluna e vai definir a largura mínima dessa coluna largura máxima e tudo mas com poucos cliques você consegue ter esse tipo de comportamento aqui por exemplo onde a tabela você estica até o infinito aí ela começa a encurtar ela já não encurta mais após um determinado ponto aí ela já cria um scroll horizontal aqui entendeu então tudo isso fica muito mais fácil inclusive se você quiser por exemplo eu quero que essa coluna dê aqui ó suma se a pega essa coluna eu quero que para
você entender o exemplo eu quero que essa coluna e aqui ó suma se a largura da página estiver menor do que mil pixels por exemplo esse elemento não fica mais visível e pronto galera encurtei a tela pão sumiu a coluna inteira antes do grupo repetidor a gente Precisava fazer isso item aí tem agora a gente faz na coluna inteiro ou na linha inteira fica bem mais fácil de fazer isso tá agora por fim recursos que a table ainda não tem Infelizmente galera papo vai lançar não tenho dúvida mas nessa V1 da tabela ainda não tem
páginas eu sei galera a gente queria uma tabelinha com paginação pronta né eu sei é Infelizmente ainda não foi dessa vez será no futuro ainda não tem ordenamento dinâmico como seria legal se a gente viesse aqui né E por exemplo ao clicar em nome ele já ordenasse Aqui de acordo com a ordem alfabética do nome esse tipo de coisa a gente até já faz isso com um grupo se repetidores a gente mostra até que como fazer algum grupos repetidores só que assim tem uma série de workflows para isso acontecer é feito realmente mas na unha
né galera então quero ordenar por e-mail por país a gente faz isso em Bubble hoje em dia mas era ruim e não tem ainda dimensionamento de colunas seria legal também se a gente viesse aqui pô reduz o aumento essa coluna passa ele achou mas ainda não foi dessa vez Então pessoal Essa é a novidade Já pode começar a usar para aparecer a table aí você precisa nas configurações versões e garantir que o teu Bubble esteja pelo menos na versão 21 tá o meu aqui já tá na 25 então se não tiver só dar uma upgrade
para 21 e Garanta que a sua página esteja na nova responsividade se você não sabe que a nova responsabilidade procura por Renato a se nova responsabilidade no YouTube que você vai descobrir já deve ser porque faz mais de um ano que o Bubble lançou isso né então é isso divirta-se
