I am currently utilizing the "ag-grid" data-table library (along with Angular 2, although the framework is not crucial) which highlights a selected row (using the default class .ag-row) by adding the class .ag-row-selected to it. Each row contains numerous cells with the .ag-cell class.
My goal is to achieve row selection not by changing the background color, but by indicating the selected row on the left and right sides with a "stripe". One way to achieve this is by adding an empty column at the beginning and end of the table and then implementing the following:
$selection-padding-width: 6px;
ag-grid-angular {
height: 100%;
// creating space for selection-padding-stripe:
width: calc(100% - 2 * #{$selection-padding-width});
}
/deep/ .ag-row-selected:before {
height: 25px;
width: $selection-padding-width;
content: ' ';
display: inline-block;
background-color: $cyan;
transform: translateX(-1px);
}
You can view the outcome here: https://i.sstatic.net/saBKN.png
However, when I attempt to shift the blue stripe from the leftmost cell's position to the empty left area, it disappears because that empty area extends beyond the container's bounds (refer to
width: calc(100% - 2 * #{$selection-padding-width});transform: translateX(-6px) is applied to it.
If you wish to observe ag-grid in action, you can check out this plunkr: https://plnkr.co/edit/ehKrzYNuZ64CYBOClbL6?p=preview