Use paddingRight instead of marginRight in DataTable?

[dobeedo]

I had an ask to change the background color of the scrollbar's header. Because right now it is using marginRight to set the margin, it makes it difficult to change its background color. Would it be possible to use paddingRight instead in the following file? Thanks.

\datatable\ScrollableView.js
key: 'alignScrollBar',
value: function alignScrollBar() {
var scrollBarWidth = this.hasVerticalOverflow() ? _DomHandler2.default.calculateScrollbarWidth() : 0;

this.scrollHeaderBox.style.paddingRight = scrollBarWidth + 'px';
if (this.scrollFooterBox) {
this.scrollFooterBox.style.paddingRight = scrollBarWidth + 'px';
}
}

[cagatay.civici]

When I try it I don't see a difference in the UI. Can you send a screenshot to show difference between marginRight and paddingRight in header-box element.

[dobeedo]

You won't see a difference until you set the background color of the header because margin background is transparent.
I ended up using the code to change the background color.

componentDidUpdate() {
let headerbox = document.getElementsByClassName('ui-datatable-scrollable-header-box')[0];
headerbox.style.paddingRight = headerbox.style.marginRight;
headerbox.style.marginRight = "0px";
headerbox.style.backgroundColor = "#bec3cc";
}