H
Thanks to @rstoenescu himself (who replied on GitHub, pointing me to the filteredSortedRows computed property), I found a solution that works fine.
Simplified code:
<template>
<div class="... q-pa-md">
<q-scroll-area class="col row">
<q-table
ref="myTable"
:data="tableData"
:columns="columns"
:pagination.sync="pagination"
>
<template v-slot:body-cell="props">
<q-td :props="props">
{{ deduplicatedCellValue(props) }}
</q-td>
</template>
</q-table>
</q-scroll-area>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
...
],
columns: [
{
name: "subject",
label: "Subject",
field: "subject",
sortable: true,
deduplicate: true,
},
{
name: "date",
label: "Date",
field: "date",
sortable: true,
deduplicate: true,
},
{
name: "sample",
label: "Sample",
field: "sample",
sortable: true,
deduplicate: true,
},
...
],
pagination: {
rowsPerPage: 0,
sortBy: "subject",
},
};
},
methods: {
deduplicatedCellValue(props) {
if (props.rowIndex > 0 && props.col.deduplicate) {
let table = this.$refs.myTable.filteredSortedRows;
if (props.value == table[props.rowIndex - 1][props.col.field]) {
return "";
}
}
return props.value;
},
},
};
</script>
It does not seem to come with a big performance penalty, although the previous row has to be computed for every cell anew. However, I had introduced a “deduplicate” column flag anyhow, because I only wanted to do this on the header columns, but not remove identical property values from the later columns. Therefore, the dereferencing of this.$refs.myTable.filteredSortedRows[props.rowIndex - 1] has to be done only for three cells per row, which is acceptable.
Still, I wonder if QTable should possibly introduce a props.previousRow next to props.row. To me, that would mean much less code on my side, and a possibly slightly more performant solution in the end. But I understand that every feature in Quasar is something that needs to be documented and maintained as well, so I won’t push for it.
