Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

datatable - Configure - allow freeze first x columns #1534

Open
njamison opened this issue Apr 9, 2024 · 0 comments
Open

datatable - Configure - allow freeze first x columns #1534

njamison opened this issue Apr 9, 2024 · 0 comments

Comments

@njamison
Copy link

njamison commented Apr 9, 2024

Is your feature request related to a problem? Please describe.
For datatables with a lot of data both horizontally and vertically, it is difficult to maintain orientation as to what data is being looked at when scrolled to the right and scrolling up/down.

Describe the solution you'd like
It would be nice to be able to freeze columns much like what can be achieved in Excel so that the first one or two columns that identify the row are kept visible while horizontally scrolling through the rest of the data.

Describe alternatives you've considered
I have added custom CSS to my flow through a bit of code to achieve a similar end but it is somewhat of a fragile solution implemented this way. Would be better to be part of the product.

Additional context
Screenshot example:
I added a test record with test data so I didn't have to anonymize everything. This shows the data scrolled all the way to the left or default position.
image

As the user scrolls to the right, the column with the name stays pinned to the left so that I can see the context for the record:
image

Below is the CSS I added to achieve this effect.
.slds-scope .slds-scrollable_y, .slds-scope .slds-scrollable--y {
-webkit-overflow-scrolling: touch;
overflow: visible;
}
div .slds-scrollable_y {
overflow: auto;
white-space: nowrap;
}
.slds-scope .slds-table tbody th:nth-child(2) {
position: -webkit-sticky;
position: sticky;
width: 181px;
min-width: 181px;
max-width: 181px;
left: 0px;
z-index: 7;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant