Columns should be able to access their complete row object

[tsiegleauq]

Please describe the feature you would like to request.

The property prop of PblColumnDefinition should be able to hold the whole object rather than just a single property to determine what part of an object to use. Alternatively, accessing the object of the DataSource, rather than being tied to the single provided property should be possible.

What is the use-case or motivation for this proposal?

Columns are really inflexible, when it comes to process more complex information about an object. To give a brief example we have multiple instances of Person:

export class Person {
  id: number;
  title: string;
  firstName: string;
  lastName: string;

  getFullName(): string {
    const name = `${this.firstName} ${this.lastName}`
    if (this.title) {
      return `${this.title} ${name}`;
    } else {
      return name;
    }
  }
}

What I would like is a table that displays the full name in a single column using the getFullName() function.

The usual approach, as it seems, to display the name of every person-instance using NGrid, seems to be the following:

public threeNameColumns = columnFactory()
  .table({ prop: 'title' }, { prop: 'firstName' }, { prop: 'lastName' })
  .build();

What I would like to have is a way to provide the object as a property, so I can call the getFullName() in the HTML (or do something else with the instance of person directly).

public singleNameColumn = columnFactory()
  .table({ prop: {{the Whole Thing}}, label: 'Name', id: 'name'})
  .build();

<pbl-ngrid [dataSource]="myDS" [columns]="singleNameColumn">
    <div *pblNgridCellDef="'name'; value as value">
       {{ value.getFullName() }}
    </div>
</pbl-ngrid>

Is there anything else we should know?

Basically, I am looking for a way to have more control over the property I am displaying.
I need to have the whole object in every data row.

I currently try to migrate from traditional mat tables to NGrid, before I was using the default approach, using <ng-container>, which provides direct access to your object from the DataSource rathern than just a propery.

<ng-container matColumnDef="selector">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let person">
            {{ person.fullName() }}
        </mat-cell>
</ng-container>

Being tied to the usage of only one single property feels very limited. Perhaps it might also be an option, to allow multiple properties as PblColumnDefinition.prop

[shlomiassaf]

prop supports property path so you can do things like my.path.to.nested.object in addition to the single property reference.

For more complex behaviour you can use transform:

  /**
   * Optional transformer that control the value output from the combination of a column and a row.
   * The value returned from this transformer will be returned from `PblColumn.getValue`
   */
  transform?: (value: any, row?: any, col?: PblColumn) => any;

As you can see it accepts the row which is the object you wanted, as well as the current instance of the column you are on, PblColumn.

Note the if you provide prop with a made up key, the value parameter in transform will return undefined.

[shlomiassaf]

@tsiegleauq By the way, the whole idea of "columns" is to abstract away the need to handle the object.

The general idea is to simplify the daily routine, which is simple columns while allowing complex scenarios like you just described.

As for you specific issue, you can also use a property descriptor (get) to solve it but I guess you're trying to describe a more general issue and not this specific one.

[tsiegleauq]

Thank's for you quick response!

prop supports property path so you can do things like my.path.to.nested.object

Abstracting functions for general use cases is a good idea imo.

Yet I struggle to comprehend how to use the transform property of PblColumnDefinition. Is there an example for that?

prop supports property path so you can do things like my.path.to.nested.object

Yes, I was aware of that, does not directly address my issues.

you can also use a property descriptor (get) to solve it

That case was entirely constructed to simplify the use case. What I primarily need is to access the object from a column.

[tsiegleauq]

Figured it out. Here is what I ended up doing:

public textColumns = columnFactory()
  .table(
    { prop: 'identifier' },
    {
      prop: 'name',
      transform: (name, person: Person) => person
    }
  )
  .build();

That now allows me to access the object from the HTML-Code as intended

Thanks for your help, and your awesome work!

[shlomiassaf]

@tsiegleauq Thanks for using the grid!

Note that you have 2 options now, a declarative one using template and an imperative one using code and you already wrote them here:

<pbl-ngrid [dataSource]="myDS" [columns]="singleNameColumn">
    <div *pblNgridCellDef="'name'; value as value">
       {{ value.getFullName() }}
    </div>
</pbl-ngrid>

public textColumns = columnFactory()
  .table(
    { prop: 'identifier' },
    {
      prop: 'name',
      transform: (name, person: Person) => person
    }
  )
  .build();

IMHO there is no "best" here, you choose based on the thing you want to solve...
Some will find the template approach more easy and others might not.

Re-use is the key here, using templates you define once and reuse many.

Here is a wild example of how you can use functions as properties, even with arguments:

Define this somewhere in the root of the app so it can be reused:

<div *pblNgridCellTypeDef="'asFunc'; row as row; col as col">
     {{ row[col.type.data.key](col.type.data.param) }}
</div>

Note that its pblNgridCellTypeDef and not pblNgridCellDef

Now in the column definitions:

public textColumns = columnFactory()
  .table(
    {
      prop: '__VIRTUAL__',
      type: { name: 'asFunc', data: { key: 'getFullName', param: undefined } }
    }
  )
  .build();