Disabling row highlight with DataTable selection

UI Components for Vue
Post Reply
mrichar1
Posts: 3
Joined: 11 Mar 2020, 13:46

11 Mar 2020, 13:55

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
Posts: 3
Joined: 11 Mar 2020, 13:46

12 Mar 2020, 11:42

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
Prime
Posts: 18262
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

17 Mar 2020, 14:10

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
Posts: 3
Joined: 11 Mar 2020, 13:46

25 Mar 2020, 14:09

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.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests