QTable : dynamic slot templates



  • Hi,

    I want to show boolean values in datatable cell as checkbox. So far as I know it is easy for a column IsAdmin to define a cell template as q-td slot:

    <q-td slot="body-cell-IsAdmin" slot-scope="props" :props="props">
         <q-checkbox label="IsAdmin" value="true"></q-checkbox>
     </q-td>
    

    But how can I solve this for datables with dynamic columns? Is there a way to define the templates by code?
    A universal template is also not the right solution, because there could be more then one column with a boolean value.

    Many thanks for any advice or hint.

    Kind regards,
    Tom



  • @webdev you can use conditional rendering, tho i don’t fully understand what you’re trying here, sry.



  • Yeah, please try to explain your use case better.

    Scott



  • My idea is to write one single q-table component for different situations or modules. I am getting the configuration of the columns via http request from the backend server. Most of the properties of the columns, could be defined dynamically: style, width and css classes. Also the formatting of the string display.

    For rendering a checkbox of a boolean value, normally I would use the conditional v-if.
    But I need a more dynamic approach, because I could not define the template of the column in advance:
    I don’t know all key-names and the count of boolean values in the definition delivered from the backend server.

    I hope I’ve become a little more clear. Many thank for any reply.
    Tom



  • @webdev make a custom component that would extend a q-table, on your component set the props for styling or everything that you would expect your custom q-table might look like when all the data are provided. in your custom table definition, check for those props using conditional rendering to build what will your end q-table might look like. i have done this several times changing q-table grid / list view style via a button that will change it and etc… i would post some code but it’s kinda lengthy so i hope you get the idea on my explanation.

    Edit: Here’s a sample https://codesandbox.io/s/q306jwnjx6 click “home”->“Table” tab. The idea still remains using of conditionals and props while leveraging off the slots available.



  • @metalsadman many thanks for this example, it looks very promising. It is rich of examples, how to use quasar components in lob applications. Thank you for sharing it.



  • Hello @webdev did you find any clues ?
    I’m facing the same situation having my columns coming from an API and after I get the data my slot definition with action buttons wont see anymore.

    If i use an static array i see my actions buttons, so i think the template slot need to be add after getting col definitions.


Log in to reply