IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Table: Fix scrollbar is hidden by pagination (#51501)

Browse Source 
* Table: Pagination fix centering

* Table: Fix scrollbar is hidden by pagination

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
This commit is contained in:
Zoltán Bedi 2022-07-08 12:28:41 +02:00 committed by GitHub
parent d85df0a560
commit 506e63f4e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/grafana-ui/src/components/Table/Table.tsx
View File

@ -257,13 +257,14 @@ export const Table: FC<Props> = memo((props: Props) => {
if (enablePagination) { if (enablePagination) {
const itemsRangeStart = state.pageIndex * state.pageSize + 1; const itemsRangeStart = state.pageIndex * state.pageSize + 1;
let itemsRangeEnd = itemsRangeStart + state.pageSize - 1; let itemsRangeEnd = itemsRangeStart + state.pageSize - 1;
const isSmall = width < 500; const isSmall = width < 550;
if (itemsRangeEnd > data.length) { if (itemsRangeEnd > data.length) {
itemsRangeEnd = data.length; itemsRangeEnd = data.length;
} }
paginationEl = ( paginationEl = (
<div className={tableStyles.paginationWrapper}> <div className={tableStyles.paginationWrapper}>
<div> {isSmall ? null : <div className={tableStyles.paginationItem} />}
<div className={tableStyles.paginationCenterItem}>
<Pagination <Pagination
currentPage={state.pageIndex + 1} currentPage={state.pageIndex + 1}
numberOfPages={pageOptions.length} numberOfPages={pageOptions.length}

20
packages/grafana-ui/src/components/Table/styles.ts
View File

@ -106,6 +106,7 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
width: 100%; width: 100%;
overflow: auto; overflow: auto;
display: flex; display: flex;
flex-direction: column;
`, `,
thead: css` thead: css`
label: thead; label: thead;
@ -182,17 +183,22 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
li { li {
margin-bottom: 0; margin-bottom: 0;
} }
div:not(:only-child):first-child { `,
flex-grow: 0.6; paginationItem: css`
} flex: 20%;
position: absolute; `,
bottom: 0; paginationCenterItem: css`
left: 0; flex: 100%;
display: flex;
justify-content: center;
`, `,
paginationSummary: css` paginationSummary: css`
color: ${theme.colors.text.secondary}; color: ${theme.colors.text.secondary};
font-size: ${theme.typography.bodySmall.fontSize}; 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) => { tableContentWrapper: (totalColumnsWidth: number) => {