Criação de componentes de tabela

Crie um componente de tabela reutilizável que exiba dados com colunas e ordenação configuráveis. Use este esquema para definir rapidamente a estrutura da tabela, o que ajuda a apresentar os dados de forma consistente e a reduzir o trabalho repetitivo de implementação.

Sobre esta tarefa

Crie um table componente para exibir dados em uma tabela.

O table-component esquema permite criar um componente de tabela estendendo uma das duas classes de tabela:

1. ClientSidePaginationBaseTableComponent: Para paginação do lado do cliente, em que todas as entradas das linhas da tabela são recuperadas em uma única chamada de API.
2. BaseTableComponent: Para resultados baseados em páginas do lado do servidor provenientes da API.

A captura de tela a seguir mostra a página de resultados da pesquisa de remessas e destaca o componente de tabela.

1. Vá até o módulo onde deseja adicionar o componente.
   Por exemplo, devtoolkit_docker/orderhub-code/buc-app-order.
2. Crie o componente executando o comando a seguir. O esquema cria o componente e atualiza o objeto de roteamento de amostra para o componente de resultado da pesquisa no módulo de roteamento mais próximo.

   ng g @buc/schematics:table-component --name <name> \
   --extend <extendableClassName> \
   --json-file-path <json-file-path> \
   --translation-file-path <translation-file-path> \
   --path <path> \
   --project <project-name> \
   --skip-import

   Parâmetros

   nome

   (Obrigatório) O nome do componente.

   O esquema gera um nome de classe de componente removendo os caracteres especiais e acrescentando a palavra “ "TableComponent" ”. Por exemplo, se você especificar o nome `my-sample `, o nome da classe gerada será ` MySampleTableComponent `.

   ampliar

   (Opcional) O nome da classe da tabela extensível. Os valores válidos são ClientSidePaginationBaseTableComponent ou BaseTableComponent. Se você não especificar um valor no comando, será solicitado no terminal que escolha um componente. No Bash para Windows do Git, o parâmetro `extend` é obrigatório.

   caminho-do-arquivo-json

   (Obrigatório) O caminho para o local onde você deseja atualizar ou criar o arquivo de configuração (buc-table-config.json).

   No buc-table-config.json arquivo, o esquema cria um nome de objeto acrescentando "-table" ao nome. Por exemplo, minha-tabela-de-exemplo.

   caminho-do-arquivo-de-tradução

   (Obrigatório) O caminho para o local onde você deseja atualizar ou criar os literais de tradução (en.json).

   No en.json arquivo, o esquema cria um nome de objeto acrescentando "-table" ao nome. Por exemplo, minha-tabela-de-exemplo.

   caminho

   (Opcional) O caminho para criar o arquivo do componente, relativo ao módulo atual. Por padrão, é criada uma pasta com o mesmo nome do componente na pasta raiz do módulo.

   nome-do-arquivo-json

   (Opcional) Por padrão, o esquema é atualizado buc-table-config.json com os dados de teste. Se você precisar atualizar ou adicionar seu objeto a um arquivo diferente, use este parâmetro. Se você especificar um nome de arquivo que não exista na pasta de recursos, um novo arquivo será criado.

   projeto

   (Obrigatório) O nome da pasta do pacote na qual o esquema está sendo criado. Por exemplo, ao criar um componente de resultados de pesquisa na pasta packages/order-search-result, o nome do projeto será order-search-result.

   O comando a seguir apresenta um exemplo com parâmetros.

   ng g @buc/schematics:table-component --name my-sample2 --extend ClientSidePaginationBaseTableComponent --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --path packages/order-search/src-custom/app/features/search --project order-search --skip-import