Setting the first column to dataType element and passing the element via a slot prevents the data in the next column (i.e. string) from appearing correctly.
🪜 How to reproduce
Tell us the steps to reproduce the problem:
Spin up Canary React storybook
Update the links and elements story with the following:
3. The first column contains the element but the next column does not contain 'Joe'.
## 📸 Screenshots or code
![image](https://github.com/mi6/ic-ui-kit/assets/116016939/478c88c0-d620-42dd-8cec-db58e20972f6)
**NOTE:** The console log displays the error which is the string 'Joe' is being recognised as an 'element' dataType.
## 🖥 📱 Device
- Type: Desktop
- Device: N/A
- OS version: N/A
- Browser version: Chrome 125
## 🧐 Expected behaviour
The button should appear in the first column and 'Joe' should appear in the next column.
## 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
*Given I have set the first column to display element and then next to display data within an object*
*When I render the data table*
*Then the format of the table should display the element (i.e. button), then a string (i.e. 'Joe') and then another string (i.e. Bloggs)*
## Additional info
Initial idea is to check the type of data in the cell and see if it marries up with the dataType however, this needs to be tested with web-components as the web-components variant doesn't use slots.
Summary of the bug
Setting the first column to dataType
element
and passing the element via a slot prevents the data in the next column (i.e. string) from appearing correctly.🪜 How to reproduce
Tell us the steps to reproduce the problem:
export const DATA_REACT_ELEMENTS = [ { firstName: 'Joe', lastName: "Bloggs", }, ];