I am trying to create a table that scrolls both vertically and horizontally. The table header needs to be able to scroll horizontally but not vertically, and the contents in the table need to scroll vertically and horizontally. I want the table header and contents to scroll horizontally together versus separately. Is there a way to do this?
Page 1 / 1
If I understand your case correctly, then:
- Create a frame (container) of fixed width and height.
- Set it to horizontal scroll in the prototype settings.
- Create the required number of table rows.
- Wrap all table rows except the first row in a frame.
- Set this frame to vertical scroll.
Also, you can see a similar example in this post:
If you want to fix both row and column, then:
This is so frustrating. I am one step away from being able to prototype a table with both a sticky column and a sticker header row while keeping the labels inline with the content. Right header labels are either not sticky or not aligned with content when scrolling.
These two mocks are as close as you can get with Figma’s options:
Right header labels are not sticky: https://www.figma.com/proto/W9cpHk7RLzaciwgSI4HTtE/Table-Scrolling-with-stick-column-and-header?page-id=0%3A1&type=design&node-id=201-2989&viewport=414%2C-493%2C0.56&t=rTisAUT1Zd2jpOSz-1&scaling=min-zoom&mode=design
Right header labels not aligned with content when scrolling:
Figma – 27 Sep 23Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.