Add option to make table headers on index view sticky · avo-hq/avo#1116

(10 评论) (0 反应) (0 负责人)Ruby (1,778 star) (308 fork)user submission

Avo 2Avo 3Front endHelp wantedhacktoberfest

描述

Feature

Add option to make table headers on index view sticky. If we have many rows on the index table, after scrolling down the header becomes hidden, and although it's not crucial, it would be a nice UX improvement to be able to see the column names.

Current workarounds

None

Screenshots

Additional context

Initially, I thought this would be as simple as adding position: sticky to the table header, but it's not enough, because the whole table is inside a div with overflow-auto, and that doesn't play nicely with sticky. This article explains this problem well.

Any ideas on how best to implement this?

贡献者指南

技术栈: rubyrailshtmlcssjavascript
领域: frontend
议题类型: feature
难度: 3
预计时间: half day
活动状态: stale
清晰度: clear
前置要求: Basic CSSHTML tablesRails viewsSticky positioning challenges
新手友好度: 60
研究方向: Investigate the table structure in the index view (likely app/views/avo/index.html.erb) and identify the parent container with overflow auto. Consider implementing sticky headers by either using a separate scrollable container for the table body or applying position: sticky with a defined top value on the thead element while ensuring the container has overflow visible or a fixed height. Review the article linked in the issue for potential approaches. Check existing CSS files (e.g., app/assets/stylesheets) for any conflicting overflow or positioning rules. Ensure the solution works across browsers and does not break existing table interactions like sorting or selection.