Table: Make last cell value visible when right aligned (#24921)

* add some padding to accommodate for vertical scrollbar

* use theme spacing

* Move padding to inner div and make it use actual scrollbar width

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-ui/src/components/Table/styles.ts

@@ -1,6 +1,7 @@
 import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory, styleMixins } from '../../themes';
+import { getScrollbarWidth } from '../../utils';
 
 export interface TableStyles {
   cellHeight: number;
@@ -31,6 +32,7 @@ export const getTableStyles = stylesFactory(
     const bodyFontSize = 14;
     const cellHeight = padding * 2 + bodyFontSize * lineHeight;
     const rowHoverBg = styleMixins.hoverColor(theme.colors.bg1, theme);
+    const scollbarWidth = getScrollbarWidth();
 
     return {
       theme,
@@ -53,7 +55,7 @@ export const getTableStyles = stylesFactory(
         position: relative;
       `,
       headerCell: css`
-        padding: ${padding}px 10px;
+        padding: ${padding}px;
         cursor: pointer;
         overflow: hidden;
         white-space: nowrap;
@@ -82,13 +84,17 @@ export const getTableStyles = stylesFactory(
 
         &:last-child {
           border-right: none;
+
+          > div {
+            padding-right: ${scollbarWidth + padding}px;
+          }
         }
       `,
       tableCellLink: css`
         text-decoration: underline;
       `,
       tableCell: css`
-        padding: ${padding}px 10px;
+        padding: ${padding}px;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;

packages/grafana-ui/src/utils/index.ts

@@ -3,6 +3,7 @@ export * from './validate';
 export * from './slate';
 export * from './dataLinks';
 export * from './tags';
+export * from './scrollbar';
 export * from './measureText';
 export { default as ansicolor } from './ansicolor';
 

packages/grafana-ui/src/utils/scrollbar.ts

@@ -0,0 +1,33 @@
+// Slightly modified, but without dependancies:
+// https://raw.githubusercontent.com/malte-wessel/react-custom-scrollbars/master/src/utils/getScrollbarWidth.js
+let scrollbarWidth: number | null = null;
+
+export function getScrollbarWidth() {
+  if (scrollbarWidth !== null) {
+    return scrollbarWidth;
+  }
+
+  if (typeof document !== 'undefined') {
+    const div = document.createElement('div');
+    const newStyles = {
+      width: '100px',
+      height: '100px',
+      position: 'absolute',
+      top: '-9999px',
+      overflow: 'scroll',
+      MsOverflowStyle: 'scrollbar',
+    };
+
+    Object.keys(newStyles).map(style => {
+      // @ts-ignore
+      div.style[style] = newStyles[style];
+    });
+
+    document.body.appendChild(div);
+    scrollbarWidth = div.offsetWidth - div.clientWidth;
+    document.body.removeChild(div);
+  } else {
+    scrollbarWidth = 0;
+  }
+  return scrollbarWidth || 0;
+}