Adding editable columns to existing tables

Complete this task to enable editable columns for existing tables. Then, you can use the isEditable, fieldConfig and options header attributes in a table.

Procedure

  1. Declare "tokenId": "abctable-custom-service", in parallel to the headers property.
    For example:
    {
        "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. Update the app-customization.impl.ts file with the following code:
    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. Declare the new service:
    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);
        }
    
    }
    

What to do next

You can use the isEditable, fieldConfig and options header attributes in a table. For more information, see Adding columns and actions to existing tables.