Disabling row highlight with DataTable selection

[mrichar1]

I'm currently experimenting with using row selection on a DataTable to pop up a dialog with more details:

Code: Select all

<div>
  <DataTable
      :value="rows"  selectionMode="single" :selection.sync="selectedRow" @row-select="onRowSelect">
      <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" />
  </DataTable>
  <Dialog :visible.sync="detailPanel">
    <span>{{ selectedRow }}</span>
   </Dialog>
  </div>
  
  onRowSelect(event) {
    this.detailPanel = true
  }
  

This works fine - however there is a style issue in that when I click on the row, it is highlighted, and remains highlighted even after the Dialog is closed.

I've tried overriding the highlighting in css:

Code: Select all

.p-highlight {
  color: unset !important;
  background-color: unset !important;
}

This works - but it also removes the useful alternate-rows colouring, so the rows jump from grey to white which also stands out.

Is there a way to either not have 'p-highlight' class applied to the row on selection, or tie the event dialog close back to the table to cause the row to be unselected?

[mrichar1]

I managed to find a solution for this in the end. It appears that the highlighting only happens when selection.sync is used to synchronise the selected row.

Instead if you just use a 'simple' event - @row-select=onRowSelect - no highlighting happens, and you can access the row data via event.data.

[cagatay.civici]

Why not clear selection when the dialog gets hidden?

Code: Select all

<DataTable
      :value="rows"  selectionMode="single" :selection.sync="selectedRow" @row-select="onRowSelect">
      <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" />
  </DataTable>
  
  <Dialog :visible.sync="detailPanel" @hide="onHide">
    <span>{{ selectedRow }}</span>
   </Dialog>

Code: Select all

onHide() {
   this.selectedRow = null;
}

[mrichar1]

Ahh - yes that seems obvious now I see it - will implement that instead as I may well be using an accidental 'feature' in my current workaround that isn't guaranteed to persist.