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

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

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));
    },