Data list view: Make filter row, table header, and pagination sticky #56157
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jameskoster
added
[Type] Enhancement
|
Size Change: +127 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
|
Worth trying. How much do we need to make sticky, though? What would this look like on a tiny 12 inch laptop? I.e. do we need the Pages heading to be sticky as well? (Entirely separate but related question, do we need the Pages heading to be visible at all if there's a Pages heading in the sidebar?) |
|
Good questions, we should definitely be diligent here. I think pagination speaks for itself. Column headings seem useful so that you can always interpret the data in the column. That's especially important if you had similar data points (e.g. Publish date and Last modified). Perhaps the filter row / view options don't need to stick since you can filter from the column heading dropdowns. What do you think? The view title is already sticky, but with regards to your separate question, I opened an issue here about that earlier today. |
|
I pushed an update to unstick the filter row, and updated the video in the OP. |
jasmussen
approved these changes
Nov 17, 2023
| bottom: 0; | ||
| background-color: $white; | ||
| padding: $grid-unit-20 0; | ||
| border-top: 1px solid $gray-200; |
There was a problem hiding this comment.
Nit, can be $border-width
| position: sticky; | ||
| top: 0; | ||
| background-color: $white; | ||
| box-shadow: inset 0 -1px 0 $gray-200; |
| @@ -37,6 +47,21 @@ | |||
| } | |||
| tr { | |||
| border-bottom: 1px solid $gray-100; | |||
There was a problem hiding this comment.
Perhaps $border-width while you're here :D
|
Nice one!
I think we could do with actually removing the page title, I've prepared a PR before seeing this one #56241 The title seems to me a bit redundant with the sidebar info (hierarchy/status: "Pages in draft"). |
This was referenced Nov 17, 2023
|
I just noticed this PR introduced two important usability and accessibility problems that need to be fixed:
I will create a new issue. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
In data list views, try making the filter row, table header, and pagination row sticky.
Why?
These tools can be useful regardless of scroll position. If you're displaying 100 records per row a lot of scrolling is required to access them.
Testing Instructions
filter row, column headers, and pagination stays in view as you scrollsticky.table.elements.mp4