Applications are unable to utilize the valueGetter and cellRenderer functions of the Data Table because the output must be a lit html template literal. This means vanilla HTML string literals, JSX, Angular/Vue Templates, etc cannot be passed to these functions. This is a showstopper for anyone trying to customize cell content.
@kyndryl-design-system/ui-devs Need help with this one. I can't think of a way to handle programmatic custom cell HTML in a format that any application can supply. Originally, we had planned for the application to be responsible for looping through rows and columns to output the cell content, but the Data Table has internalized everything. I'm not sure how that happened, but we need to come up with a solution to fix this without breaking changes. My only thought at this point is to toss out the Data Table component entirely, and build an example of a dynamic data driven table using the individual table components.
UPDATE: We should examine more closely how Carbon handles this. Table sub-components are slotted, and can be accessed using this.shadowRoot.querySelectorAll(). We need to externalize the row/cell rendering loops which would be a breaking change, so we probably need to deprecate kyn-data-table and make a new component, or put the new logic in kyn-table instead.
brian-patrick-3
commented
7 months ago
Applications are unable to utilize the
valueGetterandcellRendererfunctions of the Data Table because the output must be a lit html template literal. This means vanilla HTML string literals, JSX, Angular/Vue Templates, etc cannot be passed to these functions. This is a showstopper for anyone trying to customize cell content.@kyndryl-design-system/ui-devs Need help with this one. I can't think of a way to handle programmatic custom cell HTML in a format that any application can supply. Originally, we had planned for the application to be responsible for looping through rows and columns to output the cell content, but the Data Table has internalized everything. I'm not sure how that happened, but we need to come up with a solution to fix this without breaking changes. My only thought at this point is to toss out the Data Table component entirely, and build an example of a dynamic data driven table using the individual table components.
UPDATE: We should examine more closely how Carbon handles this. Table sub-components are slotted, and can be accessed using
this.shadowRoot.querySelectorAll(). We need to externalize the row/cell rendering loops which would be a breaking change, so we probably need to deprecatekyn-data-tableand make a new component, or put the new logic inkyn-tableinstead.