Creating table components

Create a reusable table component that displays data with configurable columns and sorting. Use this schematic to quickly define table structure, which helps you present data consistently and reduce repetitive implementation effort.

About this task

Create a table component to display data in a table.

The table-component schematic supports creating a table component by extending one of the two table classes:

1. ClientSidePaginationBaseTableComponent: For client-side pagination, where all table row entries are retrieved in one API call.
2. BaseTableComponent: For server-side page-based results from the API.

The following screen capture shows the Shipment search results page and highlights the table component.

1. Go to the module where you want to add the component.
   For example, devtoolkit_docker/orderhub-code/buc-app-order.
2. Create the component by running the following command. The schematic creates the component and updates the sample routing object for the search result component in the nearest routing module.

   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

   Parameters

   name

   (Required) The name of the component.

   The schematic creates a component class name by removing special characters and appending the word "TableComponent". For example, if you specify the name my-sample, the generated class name is MySampleTableComponent.

   extend

   (Optional) The name of the extendable table class. Valid values are ClientSidePaginationBaseTableComponent or BaseTableComponent. If you do not specify a value in the command, then you are prompted in the terminal to choose a component. In Git Bash for Windows, the extend parameter is mandatory.

   json-file-path

   (Required) The path to where you want to update or create the configuration file (buc-table-config.json).

   In the buc-table-config.json file, the schematic creates an object name by appending "-table" to the name. For example, my-sample-table.

   translation-file-path

   (Required) The path to where you want to update or create the translation literals (en.json).

   In the en.json file, the schematic creates an object name by appending "-table" to the name. For example, my-sample-table.

   path

   (Optional) The path to create the component file, relative to the current module. By default, a folder with the same name as the component is created in the module's root folder.

   json-file-name

   (Optional) By default, the schematic updates buc-table-config.json with test data. If you need to update or add your object to a different file, then use this parameter. If you specify a file name that does not exist in the assets folder, then a new file is created.

   project

   (Required) The name of the package folder that the schematic is being created in. For example, creating a search result component in packages/order-search-result the project name will be order-search-result.

   The following command provides an example with parameters.

   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