getting slotProps from nested slot - vuejs3

Question

I have a dynamic table. Table and table columns are separated components. And I am using columns as slot in table components.
main file
<DynamicTable :contents="contents">
// columns finding and displaying data from props dynamically. it works without a problem
<Col th="name" td="name"/>
<Col th="information" td="information"/>
// here I am giving custom slot inside last column, but button not displaying additionally I can't reach the content data via slotProps //
<Col>
<template #content="slotProps">
<button #click="getData(slotProps.content)">click me</button>
</template>
</Col>
</DynamicTable>
dynamicTable component
<slot></slot>
<div v-for="content in contents" :key="content.id">
<div v-for="(td, idx) in body" :key="idx">
// if there is slot given as template render <slot>
<slot v-if="td.children" name="content" :content=content></slot>
// else render dynamic value
<span v-else>{{ content[td.name] }}</span>
</div>
</div>
const slots = useSlots() ? useSlots().default : null;
const body = ref([])
slots().forEach(slot => {
body.value.push({
children: slot.children,
name: slot.props?.td,
})
})
additionally Col template
<script>
export default {
props: {
th: {
type: String,
default: null
},
td: {
type: String,
default: null
},
},
render(){
return null
}
}
</script>
In a situation like above, how can I display button element inside given <Col> component as slot and getting the :content="content" data as slotProps.
And if you need to know, content Array looks like below.
const contents = ref([
{
id: 341,
order_id: 1,
name: "susan",
information: "inf context",
},
{
id: 453,
order_id: 2,
name: "jack",
information: "info context",
}
])

Answer 1

Solved
You're trying to access slotProps in Col component,
But the Col component is not passing any props.
The required data is available in DynamicTable component
And you're already passing it to the slot of DynamicTable
You can access the slotProps as below
//App.vue
<DynamicTable :contents="contents" v-slot="slotProps">
<Col th="name" td="name" />
<Col>
Access slotProps directly, no need to use template
{{slotProps.content}}
</Col>
</DynamicTable>
And you need to remove slot name
//DynamicTable.vue
<slot v-if="td.children" :content="content"></slot>
Also refactor the Col component
//Col.vue
/* remove render function */
...
<template>
<slot />
</template>
Solution
You can find a working demo below.
https://stackblitz.com/edit/vue-cntmmb?file=src/App.vue