Slots in QTable?

[mjmare]

Quasar's QTable is pretty flexible. Part of this flexibility is through slots.

I tried this for the top_slot but it does not show:

        top_slot = jp.QDiv(
                           children=[
                               jp.QBtn(label='Action 1', color='primary', classes='q-ma-sm',),
                               jp.QBtn(label='Action 2', color='secondary', classes='q-ma-sm',),
                           ])

        self.grid = jp.QTable(a=self,
                              title='Movies',
                              style='width: 100%; margin: 0.25em',
                              columns=self.columns,
                              data=self.movies,
                              separator='horizontal',  # 'cell', 'none'
                              row_key='title',
                              selection="multiple",
                              # selected=self.selected_movies,
                              pagination=self.pagination,
                              top_slot=top_slot,
                              )

Are slots not supported yet on QTable?

In addition: the top_slot is fairly straightforward. The body slot (https://quasar.dev/vue-components/table#Body-slots) and header slot seem to have a twist. Consider this example:

<template>
  <div class="q-pa-md">
    <q-table
      title="Treats"
      :data="data"
      :columns="columns"
      row-key="name"
    >
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="name" :props="props">
            {{ props.row.name }}
          </q-td>
          <q-td key="calories" :props="props">
            <q-badge color="green">
              {{ props.row.calories }}
            </q-badge>
          </q-td>
          <q-td key="fat" :props="props">
            <q-badge color="purple">
              {{ props.row.fat }}
            </q-badge>
          </q-td>

Note the props 'argument' to the body slot. I wouldn't know how to translate this to JustPy. Maybe this calls for a 'slot function' that returns the slot content and passes 'props' as an argument. But that presumes some calling mechanism from the frontend to the backend, right?

[elimintz]

I am still trying to figure out how to support slots that accept props, it is not a simple problem.

If a slot accepts just a component it will work fine. If a slot needs props, then it will not work. It looks like top also needs props, it doesn't just accept a component.

In this regard, ag-grid is simpler to work with since as almost all its features are defined using the options dictionary.

[mjmare]

You would need a react method like construction (with props instead of data as an argument perhaps) and that would have to "called" from the client side. Which would probably require hooking into the vue template rendering process. I can see how that would be complicated.

[mjmare]

Hi Eli, Any progress on this slot/props thing perhaps?

[elimintz]

Hi, No, still have not found an elegant solution. All the solutions I have so far involve dealing with each slot and prop on an individual basis and would make the code unmanageable.