Hi,
I'm trying to add a conditional expander into a datatable using the <Column :expander="anysubdata()"> to call a javascript function that returns true or false depending on the row data.
However, I'm getting stuck because I can't figure out how to pass data down to the function about the current row being processed.
Is it possible?
See the ???????s in the code snippet below. I can access properties from the vue, but nothing I've tried has enabled me to reference the row being processed by the datatable.
<DataTable :value="status.tasks" responsiveLayout="scroll" v-model:expandedRows="expandedRows" dataKey="id">
<!--Column field="id" header="ID"></Column-->
<Column field="name" header="Tasks">
<template #body="slotProps">
<div>
<Button :label="slotProps.data.name" @click="editTask(slotProps.data.id)" class="p-button-link"/>
</div>
</template>
</Column>
<Column field="description" header="Description"></Column>
<Column field="status" header="Status"></Column>
<Column field="date_completed" header="Date Started"></Column>
<Column field="date_started" header="Date Completed"></Column>
<Column field="owner" header="Owner"></Column>
<Column :expander="anySubTasks(??????????)">
<template #expansion="slotProps">
<DataTable :value="slotProps.data.sub_tasks" responsiveLayout="scroll">
<!--Column field="id" header="ID"></Column-->
<Column field="name" header="Sub Tasks">
<template #body="slotProps">
<div>
<Button :label="slotProps.data.name" @click="editSubTask(slotProps.data.id)" class="p-button-link"/>
</div>
</template>
</Column>
<Column field="description" header="Description"></Column>
<Column field="deadline" header="Deadline"></Column>
<Column field="priority" header="Priority"></Column>
<Column field="completed" header="Completed"></Column>
</DataTable>
</template>
<template #footer>
<button @click="createTask(strategy_id, status.id)">Create Task</button>
</template>
</DataTable>
....
anySubTasks(row) [
return (row.sub_tasks.length > 0);
}
----
I'm sure I'm missing the obvious... but for all my searching for answers and experimenting I can't figure it out.
Any help would be most appreciated!
Thank you,
Mark
Conditional Expander on DataTable
-
- Posts: 560
- Joined: 23 Oct 2020, 09:28
Hi,
Could please try to use
If problem still persist please create a codesandbox sample because seeing the problem is really hard to understand.
Regards,
Tuğçe
Could please try to use
Code: Select all
<Column :expander="anysubdata()" headerStyle="width: 3rem">
<template #body="slotProps">
{{slotProps.index}}
</template>
</Column>
Regards,
Tuğçe
-
- Posts: 6
- Joined: 04 Nov 2021, 12:20
Hi Tuğçe
Thank you for getting back to me.
I've created a sandbox which can be found here: https://codesandbox.io/s/vue-primevue-forked-oyitn
With the code as per your comment, what I get is this:
As you can see, it is showing a 0 and a 1 where the expander column is - rather than the standard clickable ">".
What I want is to be able to have the default ">" in the expander column where there is sub tasks and not where there aren't.
So, if you look at this image, you can see that the first "task" has two "two subtasks". Where as the second has none. So I want to be able to control the expander > to only show for the first task by passing false back where there aren't any subtasks.
In the documentation, it says you can put a function on the :expander= parameter - so in the sandbox, I'm calling a javascript function called anySubTasks but what I can't figure out is how to pass any kind of state to that function to know which row it is processing. And everything I've tried results in an error.
This feels like it should be a simple :expander="anySubTasks(slotProps)" type statement but so far I've not found the right answer...
Any insights would be most appreciated?
Thank you,
Mark
Thank you for getting back to me.
I've created a sandbox which can be found here: https://codesandbox.io/s/vue-primevue-forked-oyitn
With the code as per your comment, what I get is this:
As you can see, it is showing a 0 and a 1 where the expander column is - rather than the standard clickable ">".
What I want is to be able to have the default ">" in the expander column where there is sub tasks and not where there aren't.
So, if you look at this image, you can see that the first "task" has two "two subtasks". Where as the second has none. So I want to be able to control the expander > to only show for the first task by passing false back where there aren't any subtasks.
In the documentation, it says you can put a function on the :expander= parameter - so in the sandbox, I'm calling a javascript function called anySubTasks but what I can't figure out is how to pass any kind of state to that function to know which row it is processing. And everything I've tried results in an error.
This feels like it should be a simple :expander="anySubTasks(slotProps)" type statement but so far I've not found the right answer...
Any insights would be most appreciated?
Thank you,
Mark
-
- Posts: 560
- Joined: 23 Oct 2020, 09:28
Hi Mark,
Please check this issue https://github.com/primefaces/primevue/issues/1834 and this example https://codesandbox.io/s/cond-expander- ... leDemo.vue
Regards,
Please check this issue https://github.com/primefaces/primevue/issues/1834 and this example https://codesandbox.io/s/cond-expander- ... leDemo.vue
Regards,
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest