React DataTable with composite key

Support
#1

I have a (legacy) table with a composite key:

@Embeddable
public class BrokerMailerCompKey extends EmbeddableEntity {
    private static final long serialVersionUID = 1084369018502935425L;
    @Column(name = "brk_id")
    private Long brkId;
    @Column(name = "cus_id")
    private Long cusId;
  <rest omitted>

public class BrokerMailer extends BaseGenericIdEntity<BrokerMailerCompKey> {
    private static final long serialVersionUID = -2619395226798110431L;

    @EmbeddedId
    private BrokerMailerCompKey id;
<rest omitted>

Here is a simple DataTable display:

     this.dataCollection = collection<BrokerMailer>(BrokerMailer.NAME, {
        view: "_local",
        sort: "+customername",
        filter: {
          conditions: [
            {property: "broker", operator: "=", value: brokerId}
          ]
        },
      });
    }

  render() {

    if (!this.dataCollection) return null;
    return (
      <div>
        <DataTable
          dataCollection={this.dataCollection}
          canSelectRowByClick={true}
          tableProps={{bordered: true}}
          columnDefinitions={[
            {field: "customername", columnProps: {title: "Mailer"}}
          ]}
        />
      </div>
    );
  }

  handleRowSelectionChange = (selectedRowKeys: string[]) => {
     **<<<What do I actually get for selectedRowKeys and how do they get passed as parameters?>>>**
  };

}

When I display the data in a table and click on a row, it appears I get an Object as the selectedRowKey, which I guess you would expect since it is a BrokerMailerCompKey. The generated code expects a string[] array, however. React “entityId” in the path is only a string, so what gets passed when I click on a row?

Worse yet, I’m getting a React warning in the console. So it appears the key for each table row is an Object and React can’t see what’s inside it, so it can’t tell that the keys are actually different?

What’s the correct way to handle a DataTable with an embedded composite key?

Warning: Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

#3

Hi @eraskin,

It seems to be a bug, I’ve opened a ticket.

For now it might be better to use vanilla antd Table for this specific use case (composite key entity).

The generated code expects a string[] array, however. React “entityId” in the path is only a string, so what gets passed when I click on a row?

DataTable allows to select multiple rows, that’s why it’s an array. However, to edit/delete an entity you’ll need to select a single row, and in this case the array will only contain a single element which would be the entityId that goes into the path.

#4

Yep – agreed. My point was that the entityID is NOT a string in this case, but an object. So handeRowSelectionChange is not actually receiving string[] but instead obect[] (actually BrokerMailerCompKey[]).

Thanks for looking into this.

Since BrokerMailer is a view, my workaround in this case was to create a new string field that is the concatenation of the values in BrokerMailerCompKey and call that “id” in my entity. Basically, do away with the composite key by building a fake one. There can be a performance hit since I can’t index on the key, but my data is relatively small so it won’t be an issue. YMMV.