既存のテーブルへの編集可能列の追加

既存のテーブルの編集可能列を有効にするには、このタスクを実行します。 その後、 isEditable、 fieldConfig 、および options ヘッダー属性を表で使用できます。

1. ヘッダー・プロパティーと並行して "tokenId": "abctable-custom-service", を宣言します。
   例:

   {
       "order-table": { //Add new columns to the outbound order search results table
           "name": "order-table",
           "aliases": [
               "inbound-order-table" //Add the same columns to the inbound order search results table
           ],
           "tokenId": "abctable-custom-service"
           "headers": [

2. 以下のコードで app-customization.impl.ts ファイルを更新します。

   import { ABCTableCustomEditableFieldsService } from "./services/abctable-custom.service";
       
   export class AppCustomizationImpl {
       static readonly components = [];
   
       static readonly providers = [
           {
               provide: 'abctable-custom-service',
               useClass: ABCTableCustomEditableFieldsService
           }
       ];
   
       static readonly imports = [];
   }
   

3. 新しいサービスを宣言します。

   import { Injectable } from "@angular/core";
   import { BucTableHeaderItem, EditableFieldsInterface } from "@buc/common-components";
   import { OrderlineListTableComponent } from "../../app/features/order/orderline-list-table/orderline-list-table.component"
   
   @Injectable()
   export class ABCTableCustomEditableFieldsService implements EditableFieldsInterface {
   
       tableContext: OrderlineListTableComponent;
   
       initializeTableParentContext(parentContext) {
           //  set the context of the table here. Mandatory method
           this.tableContext = parentContext;
       }
       //processDefaultValueInField(header: BucTableHeaderItem, data: any): void {
           // this is an optional method
           // if the default value is set via the json configuration, this method can be used to update the parent context 
       //}
   
       //getDataForField(header: BucTableHeaderItem, data) {
           // This is an optional method. returns custom data for an editable field. 
           // Example - If the list in dropdown requires further filtering, then this methid can be used to return custom list
       //}
   
       onDropdownSelection(event, data) {
   // logic to update the table data in parent tablecontext
           const key = data.item.key;
           this.tableContext.allTableData.forEach((row) => {
               if (row.key === key) {
                   if (data.headerId === 'lineTypeCustom') {
                    // created a new property lineType to store the selected value
                       row.item.lineType = data.value;
                   }
               }
           });
   
           this.tableContext.tableDataChange.emit(this.tableContext.allTableData);
       }
   
   }
   

次のタスク

isEditable、 fieldConfig 、および options ヘッダー属性を表で使用できます。 詳しくは、 既存の表への列およびアクションの追加を参照してください。