Skip to content

Commit

Permalink
Improve readability of large grid with a lot of data
Browse files Browse the repository at this point in the history
When a large table is displayed and is larger than the screen size, it
is not possible to scroll to see *all* the data.  One can zoom-out to
have a accomodate more data, but this does not fix the issue as:
  1. The displayed data is smaller, making it harder to read it beyond
     checking the color that represent the state of the metric;
  2. Zooming out is limited and at some point more data is still out of
     sight.

This make the table scrollable in its container.  Both horizontal and
vertical headers stick to their position to make it easier to track what
is being viewed.
  • Loading branch information
smortex committed Nov 21, 2024
1 parent d46dd56 commit bd08359
Showing 1 changed file with 22 additions and 3 deletions.
25 changes: 22 additions & 3 deletions lib/riemann/dash/views/css.scss
Original file line number Diff line number Diff line change
Expand Up @@ -441,6 +441,7 @@ h2 {
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}

.bar {
Expand Down Expand Up @@ -468,18 +469,36 @@ h2 {

th {
text-align: right;
background-color: #fff;
}

thead {
margin: 0;
padding: 0;

th {
// Work around https://bugs.webkit.org/show_bug.cgi?id=20040
position: relative;
top: 3px;
vertical-align: bottom;
text-align: left;
position: sticky;
top: 0;
z-index: 1;

&:first-child {
left: 0;
z-index: 2;
}
}
}

tbody {
tr:hover, tr:hover th {
background-color: $cream;
}

th {
position: sticky;
left: 0;
z-index: 1;
}
}
}
Expand Down

0 comments on commit bd08359

Please sign in to comment.