Is there a way to access the filtered or organized rows in the Quasar Q-Table?

Question

Is there a way to access the filtered or organized rows in the Quasar Q-Table?

I have encountered a roadblock in my project. Despite installing Quasar version 2.0.0, I realized that it lacks a property to access the filtered or sorted rows. Previous versions of q-table had a computedRows property which was missing in the latest version. I am working on enhancing the functionality of the q-table by implementing features such as highlighting focused rows and enabling keyboard shortcuts for in-line editing. To achieve this, I require access to the row data (model) and its corresponding HTML row.

Quasar ver:2.0.0
Vuejs 3
Typescript

javascript typescript vue.js quasar

Answer 1

Answer №1

After an extensive search on Google, I stumbled upon a hidden method to access the computedRows and computedRowsNumber properties...

To unlock these properties, assign a ref to your table:
```
<q-table ref="table" />
```
You can then access these properties using the ref:
- this.$refs.table.computedRows
- ```
this.$refs.table.computedRowsNumber
```

This discovery was made with the release of v2.0.0-beta.9 _{(March 8, 2021)}

Insight

computedRows -- provides the rows currently displayed on the page

For instance, if there are 30 total results but only 10 are visible on the current page, this property will return those 10 rows. If you need all rows, consider checking out filteredSortedRows

filteredSortedRows -- offers all the displayed rows across all pages

For example, if there are 50 rows in total, with 30 matching the filter criteria and displaying, this property will give you those filtered 30 rows. In case there is no filtering, it will return all 50 original rows

computedRowsNumber -- indicates the total count of displayed rows across all pages

^{equivalent to filteredSortedRows.length}

Note that these properties may behave differently when server-side data fetching is enabled. While I haven't tested this myself, I had to peek at the source code for insights.

Source | Original Discovery

Answer 2

After an extensive search on Google, I stumbled upon a hidden method to access the computedRows and computedRowsNumber properties...

To unlock these properties, assign a ref to your table:
```
<q-table ref="table" />
```
You can then access these properties using the ref:
- this.$refs.table.computedRows
- ```
this.$refs.table.computedRowsNumber
```

This discovery was made with the release of v2.0.0-beta.9 _{(March 8, 2021)}

Insight

computedRows -- provides the rows currently displayed on the page

For instance, if there are 30 total results but only 10 are visible on the current page, this property will return those 10 rows. If you need all rows, consider checking out filteredSortedRows

filteredSortedRows -- offers all the displayed rows across all pages

For example, if there are 50 rows in total, with 30 matching the filter criteria and displaying, this property will give you those filtered 30 rows. In case there is no filtering, it will return all 50 original rows

computedRowsNumber -- indicates the total count of displayed rows across all pages

^{equivalent to filteredSortedRows.length}

Note that these properties may behave differently when server-side data fetching is enabled. While I haven't tested this myself, I had to peek at the source code for insights.

Source | Original Discovery

Answer 3

Answer №2

I came up with a temporary fix for my issue: here is the code snippet of 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>

//To retrieve filtered rows, I extract 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 need to fetch the data corresponding to an html row (tr), I use :
   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 4

I came up with a temporary fix for my issue: here is the code snippet of 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>

//To retrieve filtered rows, I extract 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 need to fetch the data corresponding to an html row (tr), I use :
   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));
    },

Is there a way to access the filtered or organized rows in the Quasar Q-Table?

Answer №1

Insight

Answer №2

Similar questions

Display all data using JSONP

The NestJS error code 413 indicates that the payload size is too large for

I am having trouble reaching the _groups attribute in angular/d3js

Limit the option to check or uncheck all on the current page only

Using jQuery to dynamically include option groups and options in a select box

Tips on utilizing browser.getCurrentUrl() within a Protractor examination

Why does jQuery val() function fail to clear readonly input date in Firefox but succeed in Chrome?

"Troubleshooting: Fixing the 'Firebase Cloud Function admin reference is not a function'

The output from the second request using RxJS

Failed submission: XMLHttpRequest and FormData not processing data correctly

Exporting enums within types in React Typescript

I am experiencing issues with the functionality of the navigation drawer on my page (using Vuetify)

Mapping through multiple items in a loop using Javascript

In Internet Explorer 11, the Content-Type setting is not functional and may cause issues with certain functionalities

How can I create a v-slot template with dynamic content in Vue.js?

Save user input data into an Excel file using PHPExcel

The issue with CSS filter invert not functioning properly in Mozilla Firefox is causing complications

"Troubleshooting: Why isn't my MVC5 Controller able to receive

Images are not being shown by Glide JS

Enhancing a Stripe customer object with additional metadata