I am currently working on a way to display the data in our company's shipping schedule. It is a Google Sheet and it contains 32 columns, all of which are necessary. Does anyone have any suggestions on a way to display the data so the page doesn't have to scroll horizontally? Is it possible to use two or three consecutive rows to display a record instead of having to use one row? I am open to any suggestions at this point. Thanks.
@tomm
While it is not possible to display a single record across multiple consecutive rows in Retool, you can use a few creative alternatives to reduce horizontal scrolling and effectively display a large number of columns.
- Tabbed containers: Use these containers to categorize/group related columns and split your data into tabs. For example, you could have a tab for 'Shipping Details', 'Customer Details', 'Product Details', etc., based on your Google Sheets columns.
- Modal/Drawer/Side Pane for Detailed View: Use a table to display a summary of the most relevant columns, and then create an on-click event for each record that opens a modal. The modal could contain a more detailed or a complete view of all 32 columns.
- Tooltip or Popover: Much like the modal, you can use tooltips or popovers to show additional details when the user hovers over a specific row or button in a row.
- Expandable Rows: Show the main, high priority columns in the initial table view and put the remaining columns in the expanded row section. This way, users can click on a row to see more details without having to navigate away from the main table.
These could be more user-friendly solutions rather than squeezing all columns into a single row or using horizontal scroll.
Hope this helps
2 Likes
is flipping rows and columns possible? lock columns to a max of 1 and paginate each entry:
| col1 | col2 | col3 | .....
---------------------------------------------------
row1 | rc11 | rc12 | rc13 | ....
row2 | rc21 | rc22 | rc23 | ....
that would become:
Page 1
| row1 |
-------------------
col1 | rc11 |
col2 | rc12 |
col3 | rc13 |
... | ... |
Page 2
| row2 |
-------------------
col1 | rc21 |
col2 | rc22 |
col3 | rc23 |
... | ... |
2 Likes
