Primeng: Composite key for dataKeys

Created on 20 Mar 2018  路  13Comments  路  Source: primefaces/primeng

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[X] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/qtZi5lB3DjkNt7Kdivg9?p=preview

Current behavior
For now, datakey is only for one column.
example: dataKey="vin"

Expected behavior
Be able to give a array of column name.

What is the motivation / use case for changing the behavior?
Expandable row for table with composite key.

Please tell us about your environment:

  • Angular version: 5.0

  • PrimeNG version: 5.0

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

enhancement

Most helpful comment

Like [dataKey]="['vin','brand']"?

All 13 comments

Like [dataKey]="['vin','brand']"?

Hi,

I think that all these raised issues are related to the same problem - dataKey can't be always represented as single property of row:

https://github.com/primefaces/primeng/issues/5383
https://github.com/primefaces/primeng/issues/5574
https://github.com/primefaces/primeng/issues/5645

In my case I have array of arrays (trying to build table with expandable rows) and the dataKey for me is the rowData[0][0]

Is it possible to specify function that will generate unique dataKey based on rowData? In this case it can solve all problems

@cagataycivici Any plan to add this feature in the upcoming release?

I need this feature as well.

Selection and Datakey isn't compatible with one another. What we'd need would be to be able to use datakey for row grouping, but have a selection that would still select (and mark) specific rows, not be based on the field used in datakey.

any solutions yet?

...
dataKey="key1" dataKey="key2">
I use this way and it works fine :D

I am using row grouping table with single selection and facing the same issue. Both The Functionality uses dataKey. Any alternative to do so ?

I created a pipe to add a compositeDataKey property to the object. It will join the values of the object properties together to create a unique value for each object. I have not tried this on any other component, only p-table. Example below.

@Pipe({
  name: 'compositeDataKey'
})
export class CompositeDataKeyPipe implements PipeTransform {

  /**
   * Appends the compositeDataKey property to the object.
   * This 'compositeDataKey' property should be set to the [dataKey] input on p-table.
   *
   *
   * Example:
   *
   * <p-table [dataKey]="'compositeDataKey'">       <!-- dataKey input -->
   *   <ng-template pTemplate="header">
   *     ...
   *   </ng-template>
   *   <ng-template pTemplate="body">
   *     <tr>
   *       <td>
   *         <a href="#" [pRowToggler]="object | compositeDataKey:['property1', 'property2']">  <!-- compositeDataKey pipe -->
   *            <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
   *         </a>
   *       </td>
   *     </tr>
   *   </ng-template>
   * </p-table>
   *
   * @param object
   * @param properties
   */
  transform(object: any, properties: any[]): any {
    if (object && properties?.length) {
      object.compositeDataKey = properties.map(property => object[property]).join('-');
    }
    return object;
  }
}

dataKey also takes a function as reference ( function without parenthesis) so you need to create a function and bind that to datakey , the function should return the keys that you want to combine with different columns as in primeNG we have
public static resolveFieldData(data: any, field: any): any {
if(data && field) {
if (this.isFunction(field)) {
return field(data);
}
else if(field.indexOf('.') == -1) {
return data[field];
}
else {
let fields: string[] = field.split('.');
let value = data;
for(let i = 0, len = fields.length; i < len; ++i) {
if (value == null) {
return null;
}
value = value[fields[i]];
}
return value;
}
}
else {
return null;
}
}
in above function it is checking if we have field a funtion , if yes then it calls the function we passed that function returns composite keys .

NOTE: The above function is just for understanding which is already in library so all we need to is below code
----------------------HERE IS THE WAY TO IT --------------

in html [datakey]="someFucntion"

in .ts

someFunction(data: dataType) {

 // return data.field3 + data.field2 + data.field3 and so on ...
return data.vin + data.brand;

}

Is there any word on if this is possible?

Is there any word on if this is possible?

please see my above comment - https://github.com/primefaces/primeng/issues/5383#issuecomment-728713523

Above solution didn't work for table with checkboxes. It checked all items in the list when using function. https://github.com/primefaces/primeng/issues/5383#issuecomment-728713523

Added a new unique key to the data.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

miresk picture miresk  路  3Comments

mitosandov picture mitosandov  路  3Comments

markgoho picture markgoho  路  3Comments

jisqaqov picture jisqaqov  路  3Comments

Helayxa picture Helayxa  路  3Comments