Skip to content

ExtensibleTableComponent: Custom Cell Component Injector Lacks Row Data Context #22555

@davidsi02

Description

@davidsi02

Is there an existing issue for this?

  • I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

Currently, when using the component property in the column definition of the ExtensibleTableComponent to render a custom Angular component within a table cell, the injector provided to that custom component is limited.

I have analyzed the source code for ExtensibleTableComponent (specifically the ngOnChanges method where the injector for *ngComponentOutlet is created) and found that the injector only provides the PROP_DATA_STREAM token. This token supplies an Observable<string> representing the formatted display value of the cell, but critically, it does not provide access to the underlying record object for the entire row.

_ #Reference: ExtensibleTableComponent.ts -> ngOnChanges method -> Injector.create({...}) block_

// Current injector creation for custom cell components
if (prop.value.component) {
  record[propKey].injector = Injector.create({
    providers: [
      {
        provide: PROP_DATA_STREAM, // Only provides formatted value stream Observable<string>
        useValue: value,           // 'value' is the Observable from getContent(prop, record)
      },
      // PROBLEM: Missing provider for the 'record' object or a suitable context token
    ],
    parent: this.#injector, // Assuming this.#injector is the component's injector instance variable
  });
  record[propKey].component = prop.value.component;
}

Impact:

This limitation prevents custom cell components rendered via the component property from accessing other data within the same row (record). This significantly hinders the ability to create interactive or stateful cell components that need to react to or manipulate data from the broader row context (e.g., enabling/disabling a button in the cell based on another property in the row, displaying related data, performing actions using the row's ID, etc.).

Describe the solution you'd like

Enhancement Request:

I propose enhancing the ExtensibleTableComponent to provide the full row record object (or a dedicated context object containing it) to custom components via the injector.

The recommended approach would be to use a documented InjectionToken for this purpose (e.g., ROW_RECORD, EXTENSIBLE_TABLE_ROW_CONTEXT, or similar).

Example of Proposed Enhancement:

// Proposed injector enhancement
Injector.create({
  providers: [
    { provide: PROP_DATA_STREAM, useValue: value },
    // Add the raw record data using a dedicated token
    { provide: ROW_RECORD, useValue: record } // <-- Requesting this injection
  ],
  parent: this.#injector,
});

Benefits

Injecting the row record would greatly enhance the power and flexibility of the ExtensibleTableComponent's custom component feature. It would allow developers to build truly interactive and context-aware components that integrate seamlessly with the table row data, enabling richer user experiences.

Related Support Ticket

https://abp.io/support/questions/9040

Metadata

Metadata

Assignees

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions