reactjs - Material Table - Select single record from the rows of duplicate data

Question

In the above image if supplier product name & master product name is repeated I need to show a drop down to select either one record & that record should be checked.

In the above image in the first two rows the supplier product name & master product name is duplicate, User should be able to select only one [combined] retailer product,matched identifier for it.

Either I can give a drop down to select one record or I can disable the duplicate checkbox if user selects one. Any approach is fine. Idea is user should be allowed to choose between duplicate data and only one record should be selected.

I am using Mbrn Material Table https://material-table.com/ , How do I implement it using React ?

question from:https://stackoverflow.com/questions/65859526/material-table-select-single-record-from-the-rows-of-duplicate-data

Answer 1

You can use expandable rows: https://material-table.com/#/docs/features/tree-data

Then for each repeated entry, you can show the matching fields in the main row and the full row only when it's expanded.