Cannot trigger table sort after adding a new item (new row)

[apavel]

Hi there,

I have not been able to trigger a table to sort by date after I add a new item. Does this work for anyone else?

It seems to add new item to the bottom of the table regardless.

Does this look right to you?

        <q-table
          ref="itemTable"
          title="Patient List"
          :dense="$q.screen.lt.md"
          :data="items"
          :columns="columns"
          row-key="id"
          :loading="loading"
          :pagination.sync="pagination"
          :rows-per-page-options="[10, 30, 50, 100]"
          :visible-columns="visibleColumns"
        >
// - ----------------------------

data() {
      pagination: { sortBy: 'eventDate', descending: true, rowsPerPage: 30 },
      columns: [
        { name: 'types', align: 'left', label: 'Type', field: 'types', sortable: true },
        {
          name: 'pin',
          required: true,
          label: 'PIN',
          align: 'left',
          field: row => row.pin,
          format: val => `${val}`,
          sortable: true
        },

        { name: 'age', label: 'Age/Gender', align: 'center', field: 'fat', sortable: true },
        { name: 'comment', label: 'Comment', align: 'center', field: 'fat', sortable: true },
        { name: 'eventDate',
          label: 'Event Date',
          align: 'center',
          field: 'eventDate',
          sortable: true}
        { name: 'action', algin: 'center', label: 'Actions' }
      ],
      items: [],
      editingItem: { types: [], pin: null, age: null, gender: null, comment: '', eventDate: new Date() },
      defaultItem: { types: [], pin: null, age: null, gender: null, comment: '', eventDate: new Date() },
      dialogCase: {},
      typesOptions: ['Read', 'Scan'],
      editDialog: false,
      loading: false
    }
}


//---------------------------------------------------
    addItem: function (item) {
      if (item.id === 0 || item.id) {
        let found = this.items.findIndex(i => i.id === item.id)
        if (found) {
          this.items.splice(found, 1, item)
        }
      } else {
        this.$axios.post('/echolog', { ...item })
          .then((response) => {
            this.items.push(response.data)
            Object.assign(this.editingItem, this.defaultItem)
            this.$refs.itemTable.sort('eventDate')
            this.loading = false
            this.$q.notify({ color: 'positive', message: 'Successfully logged echo', icon: 'done' })
          })
          .catch((e) => {
            this.$q.notify({ color: 'negative', message: this.getErrorMessage(e), icon: 'report_problem' })
          })
      }
    },

jsFiddle: https://jsfiddle.net/apavel3458/5eqrv3hm/9/

[metalsadman]

@apavel date strings can be sorted yes, check if your new item has unique id. there should be a bug in your code somewhere, if you can produce a codepen maybe we can help.

[apavel]

Hey, thanks for the feedback, I actually made the jsFiddle:

https://jsfiddle.net/apavel3458/5eqrv3hm/9/

The addItem() method adds another item to the table, and I call .sort() to resort the table after the item is added by date (eventDate), but it removes the prior sorting setting and does nothing. I tried adding a custom sorting function to the headings array, but still same result.
Thanks!

Try: Add another item to the table from the top entry
Intended Action: Adds a new element to the TOP of the table ( based on date-descending order)
Current Action: Always adds new element to the BOTTOM of the table (removes sorting, ignores sorting calls).

[metalsadman]

@apavel it’s not that it’s being added at bottom, it’s because sort method cycles thru desc/asc/no sort, you can see it in your fiddle. just remove your call to sort, since you already set it in your pagination object, or if sort is changing ie. clicking other column, then the proper way is to set the pagination object https://jsfiddle.net/sm278jb4/. like the server side example here https://quasar.dev/vue-components/table#Example--Synchronizing-with-server.

[apavel]

@metalsadman that works well! I didn’t realize I should use the pagination object.

Awesome, thanks so much for your help, I really appreciate it.

[metalsadman]

@apavel you’re welcome.