# In the “Tailwind stacked columns table” example, **URL:** \ **Category:** Support\ **Created:** [June 7, 2022, 6:19pm UTC](https://forum.klai.studio/t/in-the-tailwind-stacked-columns-table-example/733 "2022-06-07T18:19:02Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![BetterForms](https://forum.klai.studio/user_avatar/forum.klai.studio/betterforms/32/295_2.png) [@BetterForms](https://forum.klai.studio/u/BetterForms)\ **Post date:** [June 7, 2022, 6:19pm UTC](https://forum.klai.studio/t/in-the-tailwind-stacked-columns-table-example/733/1 "2022-06-07T18:19:02Z")
![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **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? * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/dea853b2f1a053ec4870c213098a033cf2e01a03.jpeg) **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](https://forum.fmbetterforms.com/uploads/default/original/1X/93387e6ff5cd92d4fa9b18c38f2241dabc4f6825.png) * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **Brad:** Yes, but could “Some Notes” span across multiple tds? * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **Brad:** because the notes are potentially long * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/dea853b2f1a053ec4870c213098a033cf2e01a03.jpeg) **Andrew Dam:** I’m not sure, if the notes are long it may be better to have them in another column * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **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? `` `Edit` `` * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/dea853b2f1a053ec4870c213098a033cf2e01a03.jpeg) **Andrew Dam:** You actually don’t need this.params to reference the row data in HTML, you can just do {row: row} * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **Brad:** how do I reference that in the named action? * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **Brad:** “function\_calc”: “app.studentData = row”, * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/dea853b2f1a053ec4870c213098a033cf2e01a03.jpeg) **Andrew Dam:** I’ve never actually seen a function have a \_calc before. Could you provide more context of the implementation? * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **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": []` `},` * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/dea853b2f1a053ec4870c213098a033cf2e01a03.jpeg) **Andrew Dam:** The function field should be outside of the options object; on the same level as action. I also would remove the \_calc. * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **Brad:** It works, meaning that if I define the app.studentData element with a hard coded value, the app model is set. * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/dea853b2f1a053ec4870c213098a033cf2e01a03.jpeg) **Andrew Dam:** Well to grab the options that were passed from the HTML namedAction call, you can grab it from action.options * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/dea853b2f1a053ec4870c213098a033cf2e01a03.jpeg) **Andrew Dam:** So since you called it row, it would be action.options.row * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/e5b2a4ea5d9855b4b3f005fdf7cb623b6c1e8f46.png) **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](https://www.w3schools.com/tags/tag_template.asp) (there are also `rowspans`) * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **Brad:** So, I moved to this, but still not getting anything * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **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%"` `}` `}],` * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/dea853b2f1a053ec4870c213098a033cf2e01a03.jpeg) **Andrew Dam:** You just need the function field rather than the entire object: ```auto { "action": "showCardModal", "function": "...", "options": { } } ``` * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **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": []` `},` * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **Brad:** Still no data in the app model * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/dea853b2f1a053ec4870c213098a033cf2e01a03.jpeg) **Andrew Dam:** Have you tried checking if anything was in the action.options object? * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **Brad:** Okay… you’re right. The issue is back in the html * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **Brad:** the options passed in are all the pages schema * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/dea853b2f1a053ec4870c213098a033cf2e01a03.jpeg) **Andrew Dam:** So different than the HTML action from before? * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **Brad:** I got it! Thanks! Here’s my code * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **Brad:** `` `…` `` `Edit` `` * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **Brad:** `"function": "app.studentData = action.options.row",` * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/dea853b2f1a053ec4870c213098a033cf2e01a03.jpeg) **Andrew Dam:** Ah got it, it was a v-for table and not a vue-table. * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/dea853b2f1a053ec4870c213098a033cf2e01a03.jpeg) **Andrew Dam:** Glad you found the solution! * * * ![](https://forum.fmbetterforms.com/uploads/default/original/1X/32079b32d1484f1c02b8a60e92a11930d3054d7d.png) **Brad:** preciate the help! You’re the best! * * *