QTable : dynamic slot templates

webdev

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

metalsadman

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

s.molinari

Yeah, please try to explain your use case better.

Scott

webdev

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

metalsadman

@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.

webdev

@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.

jvdb

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.

jbizzay

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"
      )

No More Posting New Topics!

QTable : dynamic slot templates