No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    q-table loop through columns

    Help
    3
    9
    1111
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      ghada last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • elC0mpa
        elC0mpa last edited by

        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?

        G 1 Reply Last reply Reply Quote 0
        • G
          ghada @elC0mpa last edited by

          @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

          1 Reply Last reply Reply Quote 0
          • elC0mpa
            elC0mpa last edited by

            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

            1 Reply Last reply Reply Quote 0
            • G
              ghada last edited by

              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

              1 Reply Last reply Reply Quote 0
              • elC0mpa
                elC0mpa last edited by

                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

                1 Reply Last reply Reply Quote 0
                • elC0mpa
                  elC0mpa last edited by

                  @ghada any advance on this?

                  1 Reply Last reply Reply Quote 0
                  • s.molinari
                    s.molinari last edited by

                    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

                    1 Reply Last reply Reply Quote 0
                    • G
                      ghada last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • First post
                        Last post