IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-23 01:16:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Table panel: Fix horizontal scrolling when pagination is enabled

* Fix failing test
This commit is contained in:
Dominik Prokop 2022-04-14 18:35:37 +02:00 committed by GitHub
parent 41012af997
commit 6a8f9b7ebc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 2697 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2683
devenv/dev-dashboards/panel-table/table_pagination.json Normal file
View File

File diff suppressed because one or more lines are too long

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

@ -304,9 +304,9 @@ export const Table: FC<Props> = memo((props: Props) => {
totalColumnsWidth={totalColumnsWidth}
/>
)}
{paginationEl}
</div>
</CustomScrollbar>
{paginationEl}
</div>
);
});

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

@ -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};