diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx index 30e72a5636d..6bf310ddefa 100644 --- a/packages/grafana-ui/src/components/Table/Table.tsx +++ b/packages/grafana-ui/src/components/Table/Table.tsx @@ -257,13 +257,14 @@ export const Table: FC = memo((props: Props) => { if (enablePagination) { const itemsRangeStart = state.pageIndex * state.pageSize + 1; let itemsRangeEnd = itemsRangeStart + state.pageSize - 1; - const isSmall = width < 500; + const isSmall = width < 550; if (itemsRangeEnd > data.length) { itemsRangeEnd = data.length; } paginationEl = (
-
+ {isSmall ? null :
} +
{ width: 100%; overflow: auto; display: flex; + flex-direction: column; `, thead: css` label: thead; @@ -182,17 +183,22 @@ export const getTableStyles = (theme: GrafanaTheme2) => { li { margin-bottom: 0; } - div:not(:only-child):first-child { - flex-grow: 0.6; - } - position: absolute; - bottom: 0; - left: 0; + `, + paginationItem: css` + flex: 20%; + `, + paginationCenterItem: css` + flex: 100%; + display: flex; + justify-content: center; `, paginationSummary: css` color: ${theme.colors.text.secondary}; font-size: ${theme.typography.bodySmall.fontSize}; - margin-left: auto; + display: flex; + justify-content: flex-end; + flex: 20%; + padding-right: ${theme.spacing(1)}; `, tableContentWrapper: (totalColumnsWidth: number) => {