Adicionar ou editar uma linha em uma tabela é uma pergunta bastante comum em sites. Temos um componente de tabela básico no Angular Material, mas nenhum componente pronto para uso para a funcionalidade de adicionar / editar. E é precisamente aí que entra este artigo.

Pré-requisitos

• O material angular precisa ser incluído na base de código. Para obter ajuda sobre a inclusão e o tema, você pode consultar este guia -
  Configuração de material angular otimizado
• Estaremos usando os seguintes componentes de Material Angular que devem ser importados no módulo onde o componente da tabela ediTable residirá - MatTableModule, MatTooltipModule, MatPaginatorModule, MatSidenavModule.
• Eu me referi a serviços e utilitários personalizados que uso em meus aplicativos Angular. Para uma visão de como trabalho com APIs, você pode consultar este artigo - Serviço Otimizado / Integração de API para Angular

É importante notar como, “como” fazer essa adição / edição acontecer em tabelas da web é mais uma declaração de problema para UX do que para Angular. A Internet é bastante confusa e, como qualquer outra abordagem de UX, essa é uma decisão muito subjetiva que você precisa tomar. Muitos tópicos sugerem uma funcionalidade de edição embutida, mas os efeitos colaterais que os outliers trazem superam os positivos. Portanto, no decorrer deste artigo, desenvolveremos o design que se concentrará na adição / edição de uma única linha de cada vez.

Antes de começarmos a projetar a adição / edição, projetaremos a tabela Angular Material básica para combinar com o tema de nosso aplicativo.

O design terá os seguintes recursos -

1. Os botões para editar uma única linha ficarão visíveis após cada linha e o botão para adicionar uma nova linha será colocado após todas as linhas.

3. Para a opção “Editar linha”, os campos serão previamente preenchidos com os valores existentes e os campos de chave primária serão desabilitados. Depois que o formulário for enviado e a API retornar os dados atualizados, a tabela será atualizada e a linha atualizada será destacada brevemente por alguns segundos.

Por exemplo. Em nossa tabela de exemplo, a coluna A é a chave primária.

4. Para a opção “Adicionar Nova Linha”, todos os campos estarão disponíveis para inserção de valores nos mesmos. Depois que o formulário for enviado e a API retornar os dados atualizados, a tabela será atualizada e a linha recém-adicionada será destacada brevemente por alguns segundos. Além disso, a paginação levará automaticamente o usuário à página onde a nova linha foi adicionada.

Integrando Lógica

Vamos dividir o código / lógica em duas partes -

1. O componente de tabela autônomo que pode ser usado em todo o aplicativo para todas as tabelas, o que reduzirá muito o código padrão que geralmente acabamos escrevendo para tabelas em Angular Material.
2. O componente pai que abrigará os formulários de adição / edição exclusivos para cada uma das tabelas junto com sua integração de serviço.

Criaremos um componente autônomo modhyobitto-tableque aceitará um objeto de configuração como entrada do componente pai.

Um exemplo de objeto de configuração é fornecido abaixo -

Em contrapartida, este componente emitirá eventos quando o usuário clicar nos botões adicionar / editar. Esses eventos, por sua vez, serão usados ​​pelo componente pai para exibir os formulários e prosseguir com a atualização. Como esse componente é comum em todo o aplicativo, ele será declarado dentro do módulo para utilitários compartilhados.

Componente Pai

No componente pai, precisamos incluir o seletor de componente de tabela autônomo junto com a configuração conforme necessário. Para nossa página de amostra, teremos uma tabela de três colunas com uma coluna sendo uma chave primária e outra sendo uma coluna numérica.

Para fazer o formulário aparecer (e desaparecer) como parte da tabela, usaremos um componente de gaveta de materiais para conter o formulário.

O componente pai conterá a lógica para responder aos gatilhos de edição / adição do componente de tabela autônomo e, em troca, também irá disparar a atualização de dados resultante na tabela.

Próximos passos

Você pode consultar meu repositório Git para todo o código. O exemplo de trabalho no aplicativo de amostra pode ser acessado na página “EdiTable” -