Table panel: Fix horizontal scrolling when pagination is enabled (#47776) (#47787)

2022-04-14 19:56:27 +02:00
parent c8327d04a8
commit 00e572dc3b
3 changed files with 2697 additions and 6 deletions
@@ -304,9 +304,9 @@ export const Table: FC<Props> = memo((props: Props) => {
              totalColumnsWidth={totalColumnsWidth}
            />
          )}
-          {paginationEl}
        </div>
      </CustomScrollbar>
+      {paginationEl}
    </div>
  );
 });
@@ -184,6 +184,9 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
      div:not(:only-child):first-child {
        flex-grow: 0.6;
      }
+      position: absolute;
+      bottom: 0;
+      left: 0;
    `,
    paginationSummary: css`
      color: ${theme.colors.text.secondary};
@@ -191,11 +194,16 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
      margin-left: auto;
    `,

-    tableContentWrapper: (totalColumnsWidth: number) => css`
-      width: ${totalColumnsWidth ?? '100%'};
-      display: flex;
-      flex-direction: column;
-    `,
+    tableContentWrapper: (totalColumnsWidth: number) => {
+      const width = totalColumnsWidth !== undefined ? `${totalColumnsWidth}px` : '100%';
+
+      return css`
+        label: tableContentWrapper;
+        width: ${width};
+        display: flex;
+        flex-direction: column;
+      `;
+    },
    row: css`
      label: row;
      border-bottom: 1px solid ${borderColor};