Tables with slot-cell + sorting and filtering p

[sandroden]

I’m configuring a q-table with sorting and pagination. All works correctly if I don’t use slot:body-cell-... at that point the data are correctly represented but the sorting and filtering doesn’t work correctly: filtering doesn’t “see” the fields that have been overwritten and sorting doesn’t eather work (the arrow appears but the sorting only happens incorrectly on the first click).

Is there a way to make it work? I can produce a codesandbox example if needed.

sandro
*:-)

[s.molinari]

Yes, please do a codesandbox or codepen.

Scott

[sandroden]

Hi Scott, I prepared the codepen but as I finished I realized the problem was that I didn’t add the field attribute of the column for which I declared the slot. Once added it everything works correctly (the codepen doesn’t sort, but my real app sorts correctly).

An unrelated question on the same example: I used slot:body-cell as a second try. In the first place I tried to use a function in the field attribute but since I generate html (an <a> tag) it rendered the html as code. Is the slot the correct/only way or I could have used some function to make html accepted?

sandro
*:-)

[s.molinari]

Great you figured your first issue out. Doing a codepen or a working example off of your normal code often helps in this respect.

As to your second question, using the slot to inject html is the best way. If you know that only one column will have a certain markup, you should use the body-cell-[name] scoped slot, as it will only be used for the column with the [name] you give it. Then you won’t need to make a v-if for every different column type you have.

I hope that makes sense.

Scott

[sandroden]

Thanks, in fact body-cell-[name] is what I used and it’s a very smart solution (as almost any single solution you adopted in quasar *;-)

[chanx_young]

hi, i modified a bit your codepen https://codepen.io/chanx_young/pen/bGGBBVq?editors=1010 i add props.row.category_display to the url td, but it seem we cannot filter by props.row.category_display text. how can we achieve that if 1 td contain more than 1 element? thanks