Preciso fazer uma tabela conforme a da imagem:
Usando os seguintes dados:
Este é o meu código atual:
import wixData from 'wix-data'; $w.onReady( function () { let cols = $w("#table1").columns; cols = []; cols.push({ "id": "col1", "dataPath": "secretaria", "label": "SECRETARIA", "width": 100, "visible": true, "type": "string" }); cols.push({ "id": "col2", "dataPath": "endereo", "label": "ENDEREÇO E CONTATO", "width": 100, "visible": true, "type": "string" }); $w('#table1').columns= cols; wixData.query("Secretarias") .find() .then((res)=>{ var finalTab= res.items; console.log(finalTab); $w('#table1').rows=finalTab; }); });
O código funciona bem, mas eu preciso juntar duas informações na mesma célula da tabela.
Oii @Matheaus Pessoa, tudo bem? Bom, não sei se entendi certinho o que você precisa, mas o que você pode fazer é juntar esses dados antes de passá-los para a tabela. Segue um exemplo (veja se atende sua necessidade):
$w.onReady( function () { let cols = $w("#table1").columns; cols = []; cols.push({ "id": "col1", "dataPath": "secretaria", "label": "SECRETARIA", "width": 100, "visible": true, "type": "string" }); cols.push({ "id": "col2", "dataPath": "enderecoContato", "label": "ENDEREÇO E CONTATO", "width": 100, "visible": true, "type": "string" }); $w('#table1').columns= cols; wixData.query("Secretarias").find() .then((res)=>{ var finalTab = res.items.map((item)=>({ ...item, enderecoContato: item.endereco + item.email + item.telefone })) $w('#table1').rows=finalTab; }); });
Aqui, antes de adicionar os itens na tabela eu usei uma função .map() para criar uma nova propriedade nos itens da coleção (chamei essa nova propriedade de enderecoContato)
wixData.query("Secretarias").find() .then((res)=>{ var finalTab = res.items.map((item)=>({ ...item, enderecoContato: item.endereco + item.email + item.telefone })) $w('#table1').rows=finalTab; });
No exemplo, eu simplesmente passei para a nova propriedade a junção do campo de endereço com os campos de contato. Mas você pode construir essa nova propriedade da forma que quiser.
enderecoContato: item.endereco + item.email + item.telefone //Você também pode usar uma template string para formatar o texto da forma que quiser enderecoContato: `Endereço: ${item.endereco} | Email: ${item.email} | Telefone: ${item.telefone}`
Perceba que eu alterei também o dataPath do campo de endereço para identificar o novo parâmetro personalizado que criei
cols.push({ "id": "col2", "dataPath": "enderecoContato", //dataPath alterado "label": "ENDEREÇO E CONTATO", "width": 100, "visible": true, "type": "string" });
Espero ter ajudado. Em caso de mais dúvidas, só deixar um comentário. Fico à disposição
Consegui resolver! O código ficou da seguinte maneira:
$w('#table1').columns= cols; wixData.query("Secretarias").find() .then((res)=>{ var finalTab = res.items.map((item)=>({ ...item, secNome: `${item.secretaria}<br/>${item.nome}`, enderecoContato: `${item.endereo}<br/>E-mail: ${item.email} - Telefone: ${item.telefone}`, })) $w('#table1').rows=finalTab; });
Agradeço muito a ajuda.
@VH - Desenvolvimento Wix, muito obrigado! Passei muito tempo quebrando a cabeça com isso antes de vir aqui.
Só tenho mais uma dúvida:
Como coloco os dados na linha de baixo? No caso na mesma linha da tabela, mas sendo como que um parágrafo seguinte.
Tentei usar o "\n", mas não funciona:
$w('#table1').columns= cols; wixData.query("Secretarias").find() .then((res)=>{ var finalTab = res.items.map((item)=>({ ...item, secNome: item.secretaria + "\n" + item.nome, enderecoContato: item.endereo + "\nE-mail: " + item.email + " - Telefone: " + item.telefone })) $w('#table1').rows=finalTab; });
Sou iniciante nisso e ainda não entendo muito de programação.
Mas desde já agradeço muito sua ajuda.