← Back to Guide

Rich Content

Q. What happens when we paginate more complex data?

Tables

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.