Quasar Q-Table how can I get the filtered or sorted rows?

Question

I am get stucked,I installed Quasar version 2.0.0 but it does not has a property to get the filtered or sorted rows.In previous versions of q-table it had a computedRows property but in the latest version it didn't I am trying to add new features to the q-table like highlight focused row and enable keyboard features to allow in-line editing etc... so I need to know the row data(model) and its corresponding html row.

• Quasar ver:2.0.0
• Vuejs 3
• Typescript

Answer 1

I found a temporary solution: here is my q-table :

 <template v-slot:body="props">
     <q-tr
         class="row-data"
          :props="props"
          :rowID="props.row.id"
        >
 <q-td
            @click="onTdClick($event, props.row, 
                   props.rowIndex, index)"
            v-for="(col, index) in props.cols"
            :key="col.name"
            :props="props"
            :column="col.name"
          >
            <slot :name="'column-' + col.name" :props="props" :row="props.row">
              {{ col.value }}
            </slot>

            <slot
              :name="'column-edit-' + col.name"
              :props="props"
              :row="props.row"
            >
            </slot>
          </q-td>
        </q-tr>
</template>

//Then I get the filtered rows by getting the displayed tr elements(each tr element has rowID attribute) :
  getHtmlRows(): HTMLTableRowElement[] {
      let htmlTable = this.getHtmlTable();
      let htmlRows: HTMLTableRowElement[] = Array.from(
        htmlTable.querySelectorAll("tr.row-data")
      );

      return htmlRows;
    }, 
//If I want to get the row data corresponding to html row (tr) I used :
   getRowData(id: number): any {
      let table = this.$refs.qtableRef as QTable;
      let rowData = table.rows?.find((rw) => rw.id == id);
      return rowData;
    },

    getRowDataByHtmlRow(htmlRow: HTMLTableRowElement): any {
      let rowID = htmlRow.getAttribute("rowID");
      return this.getRowData(Number(rowID));
    },

Answer 2

There's an undocumented way of accessing the computedRows and computedRowsNumber properties that I only found after extensive Google searching...

1. Give your table a ref : <q-table ref="table" />
2. Access these properties via the ref:
   • this.$refs.table.computedRows
   • this.$refs.table.computedRowsNumber

This was added in v2.0.0- beta.9 _{(March 8, 2021)}

Explanation

computedRows -- gives you the displayed rows on current page

• Example: if there are 30 results in total, but only 10 are shown in the current page, this will only return those 10 rows -- want them all? see filteredSortedRows

filteredSortedRows -- gives you ALL the displayed rows across all pages

• Example: if there are 50 rows in total, but 30 rows match the filtered text and show up, and 10 rows are shown per page, this will return ALL those filtered 30 rows. If there's no filtered text, then this will return all those original 50 rows

computedRowsNumber -- gives you the length for the total displayed rows across all pages

• ^{same as filteredSortedRows.length}

When server-side data fetching is enabled the properties above may behave differently. I had to check the source code to discover that, but haven't tested this in practice.

Source | Where I found it