Creación de componentes de tabla

Crea un componente de tabla reutilizable que muestre datos con columnas y ordenación configurables. Utiliza este esquema para definir rápidamente la estructura de la tabla, lo que te ayudará a presentar los datos de forma coherente y a reducir el esfuerzo de implementación repetitivo.

Acerca de esta tarea

Crea un table componente para mostrar datos en una tabla.

El table-component esquema permite crear un componente de tabla ampliando una de las dos clases de tabla:

1. ClientSidePaginationBaseTableComponent: Para la paginación del lado del cliente, en la que todas las entradas de las filas de la tabla se recuperan en una sola llamada a la API.
2. BaseTableComponent: Para resultados basados en páginas del lado del servidor procedentes de la API.

La siguiente captura de pantalla muestra la página de resultados de la búsqueda de envíos y destaca el componente de tabla.

1. Ve al módulo en el que quieras añadir el componente.
   Por ejemplo, devtoolkit_docker/orderhub-code/buc-app-order.
2. Crea el componente ejecutando el siguiente comando. El esquema crea el componente y actualiza el objeto de enrutamiento de muestra para el componente del resultado de la búsqueda en el módulo de enrutamiento más cercano.

   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

   nombre

   (Obligatorio) El nombre del componente.

   El esquema genera el nombre de una clase de componente eliminando los caracteres especiales y añadiendo la palabra « "TableComponent" ». Por ejemplo, si se especifica el nombre «my-sample», el nombre de la clase generada será « MySampleTableComponent ».

   ampliar

   (Opcional) El nombre de la clase de tabla ampliable. Los valores válidos son ClientSidePaginationBaseTableComponent o BaseTableComponent. Si no se especifica ningún valor en el comando, el terminal te pedirá que elijas un componente. En « Git » de Bash para Windows, el parámetro «extend» es obligatorio.

   ruta-del-archivo-json

   (Obligatorio) La ruta de acceso a la ubicación donde deseas actualizar o crear el archivo de configuración (buc-table-config.json).

   En el buc-table-config.json archivo, el esquema crea un nombre de objeto añadiendo «-table» al nombre. Por ejemplo, mi-tabla-de-ejemplo.

   ruta-del-archivo-de-traducción

   (Obligatorio) La ruta de acceso a la ubicación donde deseas actualizar o crear los literales de traducción (en.json).

   En el en.json archivo, el esquema crea un nombre de objeto añadiendo «-table» al nombre. Por ejemplo, mi-tabla-de-ejemplo.

   vía de acceso

   (Opcional) La ruta para crear el archivo del componente, relativa al módulo actual. De forma predeterminada, se crea una carpeta con el mismo nombre que el componente en la carpeta raíz del módulo.

   nombre-del-archivo-json

   (Opcional) Por defecto, el esquema se actualiza buc-table-config.json con los datos de prueba. Si necesitas actualizar o añadir tu objeto a otro archivo, utiliza este parámetro. Si se indica un nombre de archivo que no existe en la carpeta «assets», se creará un nuevo archivo.

   proyecto

   (Obligatorio) El nombre de la carpeta del paquete en la que se está creando el esquema. Por ejemplo, al crear un componente de resultados de búsqueda en la carpeta «packages/order-search-result», el nombre del proyecto será «order-search-result».

   El siguiente comando ofrece un ejemplo con 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