avo-hq/avo

Add option to make table headers on index view sticky

Open

#1,116 opened on Aug 1, 2022

View on GitHub
 (10 comments) (0 reactions) (0 assignees)Ruby (1,778 stars) (308 forks)user submission
Avo 2Avo 3Front endHelp wantedhacktoberfest

Description

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

image

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?

Contributor guide

Tech stack
rubyrailshtmlcssjavascript
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic CSSHTML tablesRails viewsSticky positioning challenges
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
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.