q-table loop through columns

ghada

hello guys,
I’m having multiple tables so I decided to make pages and make a component for one table so that every page call the table component and pass to this component the columns and rows in the props array like this
<q-table

  :data="data"
  :columns="columns"
  row-key="ID"
  separator="cell"
  hide-bottom
  flat
  :pagination.sync="pagination"
/>

the problem is that some of the pages have fields like avatar or q-input in their table and with q-table like the code above I cannot make , I can only make it with code like this

<q-table

class="q-mt-lg"
  :data="data"
  :columns="columns"
  row-key="ID"
 separator="cell"
  :pagination.sync="pagination"
  hide-bottom
>
  <template v-slot:body="props"  >
    <q-tr :props="props"  >
      <q-td key="ID" :props="props" >
        {{ props.row.id }}
      </q-td>
      <q-td key="avatar" :props="props">
          <q-avatar>
            <img avatar src="/images/profile.svg">
          </q-avatar>
      </q-td>
      <q-td key="First Name" :props="props">
          {{ props.row.firstname }}
      </q-td>
      <q-td key="Last Name" :props="props">
          {{ props.row.lastname }}
      </q-td>
      <q-td key="Phone Number" :props="props">
          {{ props.row.phone }}
      </q-td>
    </q-tr>
  </template>
</q-table>

Is there a way that can make all tables(with avatar or with text) in a single component ?
in other words how can I loop through columns and make an if condition on column name to use q-avatar?

elC0mpa

Let me see if I understand, you would like to know inside your component if the data you want to display must have an avatar, for example, and depending on this, you will show the avatar?

ghada

@elC0mpa yes exactly , for example I want to pass all data from these 3 tables to one q-table and depending on the column I show the q-avatar or the q-rating Screen Shot 2020-06-25 at 9.49.51 PM.png Screen Shot 2020-06-25 at 9.50.53 PM.png Screen Shot 2020-06-25 at 9.53.05 PM.png

elC0mpa

Lets suppose you only have avatars, I think a good approach would be to give a format to the data you pass to your component, for example, you can add a boolean variable to each row which represent if that row will have an avatar (hasAvatar would be a good name). Then, inside your component, you could ask for this variable and then you know whether you must show an avatar or not.
And of course, do this to each different component you will have

ghada

the problem is I don’t know how to iterate through the columns and rows if you know how please give me a snippet of the code

elC0mpa

Ok, I think there is a better solution, by what I see, you have three different kinds of table in your project. Ok, you can just add a property to your component in order to know which of these kinds of table is the component rendering. And depending on this, you can just render your component using the v-if, v-elseif and v-else directives

elC0mpa

@ghada any advance on this?

s.molinari

I’d agree. Use v-if on the <template> and build out the different body slots as you need them for each type of data to be depicted. (you can’t avoid this with what you are attempting to do, as you noted yourself). Depending on the data/ columns you need, set the v-if accordingly.

Scott

ghada

thanks guys for the help, I implemented each type of tables separately as you said

No More Posting New Topics!

q-table loop through columns