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.



  • I ran into this issue as well. I came up with a solution that works for me, and might be of interest to someone else. I have my AppTable component that can be used by a parent component with as little code as possible. This works great for me, as now I can quickly build 100 tables, and they will all have consistent look, feel and functionality. And, I’m able to use custom cell templates for each one if I need to.

    Relevant parts:

    // AppTable.vue
    // Dynamically build cell templates
    template(
      v-for="column in columns"
      v-slot:[`body-cell-${column.name}`]="props"
    )
      // Allow a column to provide a component
      q-td(v-if="props.col.component")
        div(:is="props.col.component" :props="props")
      // Allow for parent component to provide custom cell template
      // If parent doesn't have custom template, display column value
      q-td(v-else)
        slot(:name="`body-cell-${column.name}`" :value="props.value") {{ _displayCellValue(props.value) }}
    
    // UsersTable.vue
    .users-table
      app-table(
        :columns="columns"
        :settings="settings"
        :do-request="doRequest"
        :do-batch-action="doBatchAction"
      )
        template(#body-cell-roles="props")
          q-badge(
            v-for="role in props.value"
            :key="`role-${role.id}`"
            :label="role.name"
          )
    

Log in to reply