Populating Q-Table from Array

[CynthiaBlue]

I do a database call where I pull my data from an IndexedDB table (via Dexie) and load it into an Array. That works fine.

I'm totally stuck on how to load that data into a q-table. Here is my little q-table taken from the quasar table basic example.

<q-table
    title="People"
    :rows="rows"
    :columns="columns"
    row-key="name"
  />

I have columns and rows defined in my data() section with test data. Of course the row information will change once I get it from the array instead of hard-coded in.

columns: [
    {
      name: 'peopleName',
      label: 'People',
      field: row => row.name,
    },
    { name: 'firstName', align: 'center', label: 'First Name', field: 'calories', sortable: true },
    { name: 'lastName', label: 'Last Name', field: 'fat', sortable: true },
    { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
    { name: 'protein', label: 'Protein (g)', field: 'protein' },
    { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
  ],

 rows: [
    {
      name: 'Frozen Yogurt',
      // last_Name: this.peopleArray.l_name,
      calories: 159,
      fat: 6.0,
      carbs: 100,
      protein: 4.0,
      sodium: 87,
      calcium: '14%',
      iron: '1%'
    },
    {
      name: 'Ice cream sandwich',
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      sodium: 129,
      calcium: '8%',
      iron: '1%'
    },
  ],

I need to pull the value from my array to load the table. I do the database read and load the array from the created method so I'm assuming that the array is available immediately on page load.

If I try to change the column
field: row => row.name,
to
field: row => this.peopleArray.l_name,

That doesn't work.

So I try to put the array bit into the row name: field like this:

name: this.peopleArray.l_name

But I get an undefined error on that one.
I'm at a total loss of how to get my data from my array to show into the table rows, and I have been scouring the web for months for an example to help me with this, and I haven't found one. This is an example of my array with test data:

I would greatly appreciate help!

[MilosPaunovic]

Set rows to be array with your data and columns to be like below:

columns: [
    {
      name: 'firstName',
      label: 'First Name',
      field: row => row.f_name,
    },
    {
      name: 'lastName',
      label: 'Last Name',
      field: row => row.l_name,
    },
    // ...
]

[CynthiaBlue]

Thanks... but I tried that (as in my original post) like this:

field: row => this.peopleArray.l_name

and it doesn't work. Or am I not understanding right?

[CynthiaBlue]

This still isn't working...

columns: [
        {
          name: 'peopleName',
          label: 'People',
          field: row => row.last_Name,
        },
        { name: 'firstName', align: 'center', label: 'First Name', field: 'calories', sortable: true },
        { name: 'dogBday', label: 'Dog Birthdate', field: 'fat', sortable: true },
        { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
        { name: 'protein', label: 'Protein (g)', field: 'protein' },
        { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
      ],

      rows: [
        {
          name: 'Frozen Yogurt',
          last_Name: this.peopleArray,
          calories: 159,
          fat: 6.0,
          carbs: 100,
          protein: 4.0,
          sodium: 87,
          calcium: '14%',
          iron: '1%'
        },...

[MilosPaunovic]

Your field is l_name. You have to pass array with data as rows prop to your QTable. In your columns definition you have row object which has attributes you're providing.

If you still can't fix it, please create a minimal reproduction repo so I can play with it.

[CynthiaBlue]

I really appreciate your help. I dont know how to put it onto a codepen since I'm getting my data from a IndexedDB database.

So do you mean something like this...

<q-table
          title="People"
          :rows="rows"
          :columns="columns"
          row-key="name"
        >
        <template #body-cell="props">
          <q-tr
            :props="props"
          >
          <td>
          {{ rows.l_name  }}
          </td>
          <td>
          {{ rows.f_firstName  }}
          </td>
          </q-tr>
        </template>
        </q-table>

and my code:

 columns: [
        {
          name: 'peopleName',
          label: 'People',
          field: row => row.l_name,
          
        },
        { name: 'firstName', align: 'center', label: 'First Name', field: 'calories', sortable: true },
        { name: 'dogBday', label: 'Dog Birthdate', field: 'fat', sortable: true },
        { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
        { name: 'protein', label: 'Protein (g)', field: 'protein' },
        { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
      ],

      rows: this.peopleArray

[MilosPaunovic]

https://codepen.io/milospaunovic/pen/WNXvbJZ?editors=1011

[CynthiaBlue]

Thank you so much! I copied your code, trimmed it down, and I finally have my table working! :) :) <3

[CynthiaBlue]

Here is what I did... I'm not sure it's completely right, but I am getting my data from the array just fine. :)

<q-table 
      title="Treats" 
      :rows="this.peopleArray" 
      :columns="columns"
      >
      </q-table>

data() {
    return {
      newID: '',
      peopleArray: ref([]),

      columns: [
        {
          name: "f_name",
          label: "First name",
          align: "left",
          field: (row) => row.f_name
        },
        {
          name: "l_name",
          label: "Last name",
          align: "left",
          field: (row) => row.l_name
        }
        ,
        {
          name: "p_email",
          label: "email",
          align: "left",
          field: (row) => row.p_email
        }
      ],

    }
  }, // end data

and..

    async createdGetPeople() { 
      await pawTapDB.peopleTable
        .orderBy('l_name')
        .each(personOBJ => {
          this.peopleArray.push(personOBJ)
        })
    }, // end createdGetPeople