Q. What happens when we paginate more complex data?
Lorem ipsum introduction.
Table heading 1 | Table heading 2 | Table heading 3 | Table heading 4 | Table heading 5 | Table heading 6 | Table heading 7 | Table heading 8 |
---|---|---|---|---|---|---|---|
Table row 1 cell 1 | Table row 1 cell 2 | Table row 1 cell 3 | Table row 1 cell 4 | Table row 1 cell 5 | Table row 1 cell 6 | Table row 1 cell 7 | Table row 1 cell 8 |
Table row 2 cell 1 | Table row 2 cell 2 | Table row 2 cell 3 | Table row 2 cell 4 | Table row 2 cell 5 | Table row 2 cell 6 | Table row 2 cell 7 | Table row 2 cell 8 |
Table row 3 cell 1 | Table row 3 cell 2 | Table row 3 cell 3 | Table row 3 cell 4 | Table row 3 cell 5 | Table row 3 cell 6 | Table row 3 cell 7 | Table row 3 cell 8 |
Table row 4 cell 1 | Table row 4 cell 2 | Table row 4 cell 3 | Table row 4 cell 4 | Table row 4 cell 5 | Table row 4 cell 6 | Table row 4 cell 7 | Table row 4 cell 8 |
Table row 5 cell 1 | Table row 5 cell 2 | Table row 5 cell 3 | Table row 5 cell 4 | Table row 5 cell 5 | Table row 5 cell 6 | Table row 5 cell 7 | Table row 5 cell 8 |
Table row 6 cell 1 | Table row 6 cell 2 | Table row 6 cell 3 | Table row 6 cell 4 | Table row 6 cell 5 | Table row 6 cell 6 | Table row 6 cell 7 | Table row 6 cell 8 |
Table row 7 cell 1 | Table row 7 cell 2 | Table row 7 cell 3 | Table row 7 cell 4 | Table row 7 cell 5 | Table row 7 cell 6 | Table row 7 cell 7 | Table row 7 cell 8 |
Table row 8 cell 1 | Table row 8 cell 2 | Table row 8 cell 3 | Table row 8 cell 4 | Table row 8 cell 5 | Table row 8 cell 6 | Table row 8 cell 7 | Table row 8 cell 8 |
Lorem ipsum duo.
Lorem ipsum tre.
A. Not surprisingly, the CSS-column-based approach to pagination struggles with non-linear flows in most browsers.
One approach to this is to handle tables differently -- for eg, by replacing them in the flow with a button that opens the table in a pannable div/iframe floating over the top of the page. Or even re-embedding them in the page within a pannable frame (for the simplest example, uncomment the scrollerFrame div in the source of this page).
Monocle dispatches a monocle:componentchange
event to
give your upper logic layers a chance to modify the DOM of components
before pagination is calculated.
This problem isn't specific to Monocle - it's endemic to complex layouts when you have wildly variable page dimensions and pagination approaches that assume linear content flows.