Table: Fixes issue with pagination summary causing scrollbar (#65189)

* Table: Fixes pagination rows counter not causing scrollbar

* remove unused style
pull/65219/head
Torkel Ödegaard 2 years ago committed by GitHub
parent cd490ba0be
commit b2fb7a162a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 15
      packages/grafana-ui/src/components/Table/Table.tsx
  2. 11
      packages/grafana-ui/src/components/Table/styles.ts

@ -326,15 +326,12 @@ export const Table = memo((props: Props) => {
}
paginationEl = (
<div className={tableStyles.paginationWrapper}>
{isSmall ? null : <div className={tableStyles.paginationItem} />}
<div className={tableStyles.paginationCenterItem}>
<Pagination
currentPage={state.pageIndex + 1}
numberOfPages={pageOptions.length}
showSmallVersion={isSmall}
onNavigate={onNavigate}
/>
</div>
<Pagination
currentPage={state.pageIndex + 1}
numberOfPages={pageOptions.length}
showSmallVersion={isSmall}
onNavigate={onNavigate}
/>
{isSmall ? null : (
<div className={tableStyles.paginationSummary}>
{itemsRangeStart} - {itemsRangeEnd} of {data.length} rows

@ -207,21 +207,12 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
margin-bottom: 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};
display: flex;
justify-content: flex-end;
flex: 20%;
padding-right: ${theme.spacing(1)};
padding: ${theme.spacing(0, 1, 0, 2)};
`,
tableContentWrapper: (totalColumnsWidth: number) => {

Loading…
Cancel
Save