[CDataTable] Add row css class on row click

[darthf1]

    "@coreui/coreui": "3.0.0",
    "@coreui/icons": "1.0.1",
    "@coreui/vue": "3.0.0",

When I click on a row, the row-clicked event is fired. I would like the clicked row to have a different background color, so the current clicked row can be made visible to the end-user. Maybe a css class can be added to the clicked row, which can then be styled.

Could be like this (just the visual feedback):
http://tabulator.info/examples/4.5#selectable

[woothu]

Hi! Thank you for the idea!

For now, it is possible to do this like this:

In template

<CDataTable add-table-classes="table-class">

in styles

.table-class tr:focus {
  background-color: blue !important;
}

Nevertheless, this idea is worth thinking about, especially if we will decide to introduce the multi-select feature that you have proposed.

We will also consider adding default styling to the row on focus.

[darthf1]

For now I added the code below this in my custom .scss:

@import "~@coreui/coreui/scss/variables/components/tables";

.table-class tr:focus {
  background-color: $table-accent-bg !important;
}

The only downside is that when focus is lost the background color is lost as well. But this is a valid workaround in the meantime.

Thank you for your suggestion!

[woothu]

CSS class 'table-selected' is now available in coreui and coreui-pro (3.2.0 version)

:focus style is applied automatically, and have the same visual effect