Send template to grandchild component (nested template)

Viewed 10

There is this TablePackage component that we use in our project. I saw that to customize how values in a column render, one can pass template named with the specific column name (in this example status) and use slot prop row.

<!--Code Snippet 1-->
<!--In each row of status columns, we will see status buttons instead of plain status text-->
<TablePackage>
  <template #status="{ row }">
    <button>{{ row.status }}</button> 
  </template>
</TablePackage>

Now there are two more components, Parent and Dialogue. Parent uses Dialogue, Dialogue uses TablePackage.

Parent component

<Dialogue title="dialogueTitle">
</Dialogue>

Dialogue component

 {{ title }}
 <TablePackage rows="rowList" columns="columnObj">
 </TablePackage>

Now I want to be able to custom render values in a column as in 'Code Snippet 1' which means I want to render a button not a text in 'status' column. How can I achieve this from Parent component level? I tried nested template but it was not allowed. With the constraint that I can edit Parent and Dialogue components but not TablePackage, what's the recommended away to achieve this?

0 Answers
Related