Updated DataTable for alternate key

[bibektamang7]

Closes #5898

New

1. keyField in DataTableProps in DataTable.tsx file
2. rowId parameter in getCells function in useTable.ts file.

Changed

1. TableRow's key corresponds to the value of keyValue
2. TableRow's cell key

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: c9eb5bd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[joshblack]

Hey there! Thanks for taking the time to make a PR for this 🙏

Taking a look real quick, I think we'd either want to add a top-level getRowId function (similar to tanstack table) or would want to extend UniqueRow to support a function to get the id.

We would also want to make sure this gets passed along to useTable so that row.id matches what is provided.

Let me know what you think! Curious to hear your thoughts 👀

[bibektamang7]

I totally agree—adding a top-level getRowId function or extending UniqueRow to support a custom ID getter makes a lot of sense. I’ll update the PR to reflect that and make sure it flows through to useTable so row.id aligns properly.

[joshblack]

This is looking great, thanks so much for all the changes 🙏 Would you mind adding a test scenario for this to make sure we have it captured in our test coverage?

[bibektamang7]

Since the key prop in React is used internally for rendering and does not appear in the DOM, would it be appropriate to verify the correct number of rendered elements as a means of testing, or would you recommend a more effective approach to validate this behavior?

[francinelucca]

Since the key prop in React is used internally for rendering and does not appear in the DOM, would it be appropriate to verify the correct number of rendered elements as a means of testing, or would you recommend a more effective approach to validate this behavior?

You could test not DataTable, but the useTable function itself and validate that it overrides the row.id with the result of getRowId function. Similarly add test cases for when no getRowId function is supplied

[francinelucca]

Thanks for all the work on this @bibektamang7 🙏 !

[bibektamang7]

Thank you so much! Really appreciate your thoughtful review and support 🙏 Excited to keep contributing!