QTable Reusable Component



  • Hello, I would like to know how to reuse QTable without losing the function of template/slot.

    I created a component named “ListRecordsTable”, inside it I used the <q-table> component, made some customizations such as pagination, search, result per page.

    In this case, after customizing the way I would like, when I’m going to reuse this component I call it <list-records-table> so far it works well, but a question arose regarding the use of the template.

    Example:
    I would like to change the color or add HTML tags within a given cell, if I use it directly in the <q-table> I would define a template within it, for example: <template v-slot: body-cell-actions=“props”>

    But then I would like to define these same templates that help to modify certain cells of the q-table within the parent component.
    example:

    <list-records-table>
          <template v-slot:body-cell-actions="props">
              test
         </template>
    </list-records-table>
    

    Could it be possible to do something related to this? If so, how could I do it?

    Edit.: I would also like to take the line value from the child component and send it to the parent component. Because the call is server side in the child component.

    I thank you for your help.



  • @garbinmarcelo use something like this inside of your qtable wrapper, last child of it preferably.

    <q-table ....>
      ...
        <template
            v-for="(_, slot) of $scopedSlots"
            v-slot:[slot]="scope"
          >
            <slot
              :name="slot"
              v-bind="scope"
            />
          </template>
    </q-table>
    


  • @metalsadman That’s right, it worked, I didn’t know that. Another question that arose, for example, I have customized within the <q-table> (child component) the action buttons template (delete, view, edit), it would be possible instead of overwriting this template just to add 1 more button(without losing the other buttons) via parent component?

    Thank you for your help.



  • @garbinmarcelo

    How to extend templates in Vue:

    https://vuejsdevelopers.com/2020/02/24/extending-vuejs-components-templates/

    Will not work with q-table I guess because it uses a render function…


Log in to reply