angular-ui/ui-grid

Make Grids responsive by staking records vertically

Open

#5,403 opened on May 13, 2016

View on GitHub
 (1 comment) (3 reactions) (1 assignee)JavaScript (5,395 stars) (2,496 forks)batch import
help wanted

Description

The Grids used throughout need to be responsive. When smaller screen sizes are used, the header should be listed vertically and repeated for each record. The detail/record should then be displayed horizontally from the header.

See attached links. https://css-tricks.com/examples/ResponsiveTables/responsive.php http://prntscr.com/b3kt8r

Not sure if simply adding the class "table-responsive" will work on these grids.

How can we make ng grid (ui grid) responsive ?

AngularJS 1.4.8 ui-grid - v3.0.7

Contributor guide

Tech stack
javascripthtmlcss
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.
1-2 days
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.
needs investigation
Prerequisites
AngularJSCSS media queriesui grid source code
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
25
Research direction
This issue requests making the UI Grid responsive on small screens by stacking headers vertically. Examine the current grid rendering in ui grid source (e.g., src/features/grid). Look at existing CSS files and consider how to implement the approach from the linked CSS Tricks article using display: block for table elements. Check if ui grid uses <table> elements or custom divs. Test in mobile viewports. There is one assignee, so coordinate with them.