Hello,
I’ve created a custom data table for a specific need using Ionic. At first I created it using two tables (one for the header, one for the data), but after some scrolling problems, the best I could get was with Ionic row/col grid system.
You can check a sample data table on CodePen: http://codepen.io/renatoat/pen/xhBDt/
I didn’t know how to set a full (header + data) horizontal scrolling while keeping a separate (data only) vertical scrolling, because I didn’t want the header to be hidden when we scroll below it’s visibility (if we had just one ion-scroll), so I created two ion-scroll within the same ion-content, and with on-scroll/delegate-handle I keep their horizontal scrolling and zoom level mirrored (when the data’s ScrollView is changed, we change header’s ScrollView and vice versa).
Ok, it is almost working as I’d expected, except for one detail: probably because there are two ion-scroll, the scrolling doesn’t reach the end of the data view.
At first I thought it could be related to https://github.com/driftyco/ionic/issues/1411, but it isn’t.
If I overcomplicated my code just to create a data table / data grid and there is a simpler way to achieve the same result, or if you may suggest a better approach or workaround, please let me know.
EDIT: I added a margin-bottom: 28px to item-footer as a nasty workaround for now.
Thank you,
Renato.
