react-table cannot have column with name `id` / `ID`

Hello.

‘@patternfly/react-table’ cannot have column named with name: id / ID:

index.js:27 Warning: Encountered two children with the same key, `[object Object]-row`. 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.
    in tbody (created by BodyWrapper)
    in BodyWrapper (created by BaseBody)
    in BaseBody (created by Context.Consumer)
    in Body (created by ContextBody)
    in ContextBody (created by Context.Consumer)
    in TableBody (created by SimpleTable)
    in table (created by Provider)
    in Provider (created by Table)
    in Table (created by Context.Consumer)
    in ComponentWithOuia (created by Context.Consumer)
    in Unknown (created by SimpleTable)
    in SimpleTable

It turned out that column cannot be named with id.

Reproducer: https://codesandbox.io/s/mystifying-diffie-e0b0t That is a clone of the first official example: https://codesandbox.io/s/1h9p2 from : https://www.patternfly.org/v4/documentation/react/components/table

There is only 1 line change:

From:

        'Branches',
        { title: 'Pull requests' },

changed to:

        "Branches",
        { title: "Id" },

And in console (press F12) you will see messages:

Encountered two children with the same key, `[object Object]-row`.

I spent 3 hours to understand the cause. Chance that a developer names column with name id / ID / Id is very high.

Version: “@patternfly/react-table”: “^2.28.47”,

[karelhala]

@Andrei-Stepanov I wonder who put the This prop should not be set manually as it’s not correct and should on other side describe the behavior, similiar to documentation on reactabular.

EDIT: Same logic should be applied to onRow and override it only if consumer does not provide such function.

[karelhala]

@Andrei-Stepanov you can have columns with name ID, however you’ll also have to pass rowKey to TableBody component. This is limitation of reacttabular component used to build the table itself. If you want to deep dive into how reactabular and setting rowKey works check out their documentation - https://reactabular.js.org/#/table/components Since table is using reactabular you can write a lot of ehancer functions as well, I am wondering why there is no reference to the package in docs as that would prevent such questions in future @redallen .