IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-20 11:48:34 -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) {
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 = (
<div className={tableStyles.paginationWrapper}>
<div>
{isSmall ? null : <div className={tableStyles.paginationItem} />}
<div className={tableStyles.paginationCenterItem}>
<Pagination
currentPage={state.pageIndex + 1}
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%;
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) => {