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
-
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": [
-
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 = []; }
-
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.