A tabela é um elemento comum e bastante usado para listagem de conteúdo com muitas informações agregadas. Nossa tabela tem uma série de ações que extendem as funcionalidades da simples tabela que o Bootstrap dá.

Tabela básica

A tabela funciona totalmente igual ao do Bootstrap, inclusive as classes. Fizemos uma classe customizada para fazer nosso estilo, essa classe é a ls-table.

Selecionando vários elementos

Para fazer uma tabela com edições múltiplas, basta colocar, acima da tabela em questão, o elemento como o descrito abaixo:

	

		

			0 itens selecionados
		
		

			

				Duplicar
				Relatorio
				Arquivar
			
			Excluir
		
	
	

		

			

				

				
Título
				
Campanha
				
Status
				
Data de envio
			
		
		

			

				

				
Mensagem Teste Locastyle
				
Campanha
				
Enviada
				
21/09/2013 as 20:00 PM
			
		
	

	
0 itens selecionados
	

		

			Duplicar
			Relatorio
			Arquivar
		
		Excluir
	

O elemento .well tem a classe hidden, que faz com que ele não seja exibido inicialmente. O script retirará essa classe assim que o usuário selecionar mais de dois checkbox nas linhas da tabela.

Perceba também que existe um atributo data-target cujo valor é a tabela que você quer relacionar à estas ações.

Tabela complexa

Tabelas complexas possuem ações para cada linha de registros, como editar, visualizar, excluir, etc.

Essas tabelas, obrigatoriamente, devem possuir a coluna de seleção de elementos, com checkboxes e uma coluna com ações, em lnks ou botões

A tabela, com o mesmo código, possui algumas diferenças na visualização, dependendo do dispositivo.

Todas as regras, comportamentos e configuraçoes das tabelas compexas, listadas:

• Formulários: Tabelas complexas devem estar dentro de um form;
• Ação única: exibida como um botão em desktop e como um dropdown em mobile;
• Dropdown: exibido com o label "Ações" no desktop e apenas com uma seta no mobile;
• Dropdown em mobile: nas últimas duas linhas da tabela o dropdown de açoes abre para cima, evitando ficar fora da área da tela, caso a tabela seja o último elemento da página;
• Colunas: todas são exibidas no desktop e pode-se ocultar em mobile, bastando adicionar a class hidden-xs na coluna equivalente no cabeçalho th;
• Edição: Para que um ação tenha o comportamento de edição, ela deve possuir o parâmetro data-action-modal="edit";
• Visualização: Para que um ação tenha o comportamento de visualização, ela deve possuir o parâmetro data-action-modal="view";
• Visualização: em mobile, ao se clicar em qualquer lugar da linha é exibida uma modal com todas as informações;
• Visualização em mobile: mesmoq ue nao exista no código a ação Visualizar, ela é inserida em dispositivos com telas pequenas;
• Ações danger: ações que possuam a classe danger, ao clicadas, abrem um modal de confirmação com o texto atribuído no paraâmetro data-confirm-text.
  Exemplo: data-confirm-text="Confirma exclusão do item?";
• Falha na edição: é exibida a linha com fundo vermelho;
• Dados extras: quando desejar enviar dados extras, como tokens de validaçao nas requisiçoes ajax de edição/exclusão, basta inseri-los no form, normalmente, fora da tabela.

Algumas ações comuns já tem seus comportamentos definidos.

Exemplo:

	
	

		

			0
			item selecionado
		
		

			

				Duplicar
				Relatorio
				Arquivar
			
			
				Excluir
			
		
	
	

		

			

				

				
Título
				
Campanha
				
Status
				
Data de envio
				
Ações
			
		
		

			

				
  
				
Texto 1 Success
				
Campanha
				
Enviada
				
21/09/2013
				

				
			
			

				
  
				
Texto 2 
				
Campanha
				
Enviada
				
21/09/2013
				

					
						Excluir
					
				
			
			

				
  
				
Texto 3 
				
Campanha
				
Enviada
				

					
				
				

					Editar
					
						Excluir
					
				
			
		
	

Evento

A tabela complexa faz um disparo de evento no elemento tr afetado pela ação de salvar.

Quando a ação de salvar do form/modal retornar sucesso, será disparado um evento de change na linha afetada. Com isto, sua aplicação pode tomar alguma ação baseada na alteração daquela linha específica na tabela.

$("my_table tr").on("change", function() {
	//do something
});