Conditional Expander on DataTable

UI Components for Vue
Post Reply
MarkEdmunds
Posts: 6
Joined: 04 Nov 2021, 12:20

23 Nov 2021, 15:46

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

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

24 Nov 2021, 15:40

Hi,

Could please try to use

Code: Select all

<Column :expander="anysubdata()" headerStyle="width: 3rem">
   <template #body="slotProps">
      {{slotProps.index}}
   </template>
</Column>
If problem still persist please create a codesandbox sample because seeing the problem is really hard to understand.

Regards,
Tuğçe

MarkEdmunds
Posts: 6
Joined: 04 Nov 2021, 12:20

29 Nov 2021, 21:43

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:

Image

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.

Image

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


Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests