Change Details

### Background Currently, data for table rows can be passed into the Table component via the `data` prop. This must be an array of objects, with each object being the data for a single row. However, this will not work for a table that needs both row selection and sorting. The Table component and its parent keep track of which rows are selected by referencing the selected rows' indexes in the `data` prop. If the `data` prop changes due to sorting, the indexes no longer tell us which rows should be selected. ### Solution Dev users who want both sorting and row selection will be required to add a property to each TableRow with a unique ID, that can be used (if present) within the Table code to identify which rows are selected (instead of the row's index within the `data` prop array). As Roan suggests in the comments, we can use a symbol for this special row property. --- ### Acceptance criteria - [x] Decide how to handle this - [x] Implement the solution - x[] Add/update unit tests as needed - [x] Add a demo to the Sandbox showing how this works - [x] Add a note to the docs site in the "row selection" demo section discussing how to pass in data when you want both sorting and row selection

### Background Currently, data for table rows can be passed into the Table component via the `data` prop. This must be an array of objects, with each object being the data for a single row. However, this will not work for a table that needs both row selection and sorting. The Table component and its parent keep track of which rows are selected by referencing the selected rows' indexes in the `data` prop. If the `data` prop changes due to sorting, the indexes no longer tell us which rows should be selected. ### Solution Dev users who want both sorting and row selection will be required to add a property to each TableRow with a unique ID, that can be used (if present) within the Table code to identify which rows are selected (instead of the row's index within the `data` prop array). As Roan suggests in the comments, we can use a symbol for this special row property. --- ### Acceptance criteria - [x] Decide how to handle this - [x] Implement the solution - [x] Add/update unit tests as needed - [x] Add a demo to the Sandbox showing how this works - [x] Add a note to the docs site in the "row selection" demo section discussing how to pass in data when you want both sorting and row selection

### Background Currently, data for table rows can be passed into the Table component via the `data` prop. This must be an array of objects, with each object being the data for a single row. However, this will not work for a table that needs both row selection and sorting. The Table component and its parent keep track of which rows are selected by referencing the selected rows' indexes in the `data` prop. If the `data` prop changes due to sorting, the indexes no longer tell us which rows should be selected. ### Solution Dev users who want both sorting and row selection will be required to add a property to each TableRow with a unique ID, that can be used (if present) within the Table code to identify which rows are selected (instead of the row's index within the `data` prop array). As Roan suggests in the comments, we can use a symbol for this special row property. --- ### Acceptance criteria - [x] Decide how to handle this - [x] Implement the solution - x[- [x] Add/update unit tests as needed - [x] Add a demo to the Sandbox showing how this works - [x] Add a note to the docs site in the "row selection" demo section discussing how to pass in data when you want both sorting and row selection