mi6 / ic-ui-kit

Intelligence Community UI Kit (based on StencilJS)
MIT License
19 stars 23 forks source link

[ic-data-table / canary-react]: Adding element in first column prevents data in next column from appearing #1940

Open jd239 opened 1 month ago

jd239 commented 1 month ago

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:

  1. Spin up Canary React storybook
  2. Update the links and elements story with the following:
    
    export const COLS_ELEMENTS: IcDataTableColumnObject[] = [
    {
    key: "actions",
    title: "Actions",
    dataType: "element",
    columnAlignment: { horizontal: "center" },
    },
    {
    key: "firstName",
    title: "First name",
    dataType: "string",
    },
    {
    key: "lastName",
    title: "Last name",
    dataType: "string",
    }
    ]

export const DATA_REACT_ELEMENTS = [ { firstName: 'Joe', lastName: "Bloggs", }, ];


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.