In the “Tailwind stacked columns table” example,

Support
1

Brad:
In the “Tailwind stacked columns table” example, I want to have the notes element displayed below the other tds in the tr. Is that possible, or would i have to use slots?

Andrew Dam:
Can you clarify the desired result? Do you want to show some other data under the td but still in the tr?

image
image1862×832 86.3 KB

Brad:
Yes, but could “Some Notes” span across multiple tds?

Brad:
because the notes are potentially long

Andrew Dam:
I’m not sure, if the notes are long it may be better to have them in another column

Brad:
In this same page, I tried to wire the button to a namedAction with the row data as a parameter. What am I missing?
<td @click="namedAction('openCard',{row:this.params.row})" class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<a href="#" class="!text-indigo-600 hover:!text-indigo-900">Edit</a>
</td>

Andrew Dam:
You actually don’t need this.params to reference the row data in HTML, you can just do {row: row}

Brad:
how do I reference that in the named action?

Brad:
“function_calc”: “app.studentData = row”,

Andrew Dam:
I’ve never actually seen a function have a _calc before. Could you provide more context of the implementation?

Brad:
"namedActions": {
"openCard": [{
"action": "showCardModal",
"options": {
"function_calc": "app.studentData = action.params.row",
"height": "100%",
"idForm": "FR_01FECFEA-6A66-D549-8DA6-82B6BFFBB7FD",
"pivotX": 1,
"resizable": true,
"type": "modal",
"width": "40%"
}
}],
"onFormLoad": []
},

Andrew Dam:
The function field should be outside of the options object; on the same level as action. I also would remove the _calc.

Brad:
It works, meaning that if I define the app.studentData element with a hard coded value, the app model is set.

Andrew Dam:
Well to grab the options that were passed from the HTML namedAction call, you can grab it from action.options

Andrew Dam:
So since you called it row, it would be action.options.row

Beverly Voth:
A TD to colspan across the TD’s above it, would be a new row:
• https://www.w3schools.com/tags/tag_template.asp
(there are also rowspans)

Brad:
So, I moved to this, but still not getting anything

Brad:
"namedActions": {
"openCard": [
{ "action": "function",
"function": "debugger; app.studentData = action.options.row"
},{
"action": "showCardModal",
"options": {
"function": "app.studentData = action.options.row ",
"height": "100%",
"idForm": "FR_01FECFEA-6A66-D549-8DA6-82B6BFFBB7FD",
"pivotX": 1,
"resizable": true,
"type": "modal",
"width": "40%"
}
}],

Andrew Dam:
You just need the function field rather than the entire object:

{
  "action": "showCardModal",
  "function": "...",
  "options": {
  }
}

Brad:
"namedActions": {
"openCard": [{
"action": "showCardModal",
"function": "app.studentData = action.options.row",
"options": {
"height": "100%",
"idForm": "FR_01FECFEA-6A66-D549-8DA6-82B6BFFBB7FD",
"pivotX": 1,
"resizable": true,
"type": "modal",
"width": "40%"
}
}],
"onFormLoad": []
},

Brad:
Still no data in the app model

Andrew Dam:
Have you tried checking if anything was in the action.options object?

Brad:
Okay… you’re right. The issue is back in the html

Brad:
the options passed in are all the pages schema

Andrew Dam:
So different than the HTML action from before?

Brad:
I got it! Thanks! Here’s my code

Brad:
<tr v-for="st in model.student">
…
<td @click="namedAction('openCard',{row:st})" class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<a href="#" class="!text-indigo-600 hover:!text-indigo-900">Edit</a>
</td>

Brad:
"function": "app.studentData = action.options.row",

Andrew Dam:
Ah got it, it was a v-for table and not a vue-table.

Andrew Dam:
Glad you found the solution!

Brad:
preciate the help! You’re the best!