<html><head><meta http-equiv="Content-Type" content="text/html charset=utf-8"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class="">I have to agree with Mike T. … we deliver one page at a time also, using Angular and REST api calls. … performance is very important.<div class=""><br class=""></div><div class=""><div class="">sincerely</div><div class="">Ken</div><div class=""><br class=""></div><div class=""><br class=""><div class=""><div><blockquote type="cite" class=""><div class="">On Oct 19, 2016, at 4:04 PM, mike thompson <<a href="mailto:mithomps@redhat.com" class="">mithomps@redhat.com</a>> wrote:</div><br class="Apple-interchange-newline"><div class=""><div style="font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;" class=""><blockquote type="cite" class=""><div class=""><br class="Apple-interchange-newline">On Oct 18, 2016, at 11:36 AM, SJ Cox <<a href="mailto:sjcox@redhat.com" class="">sjcox@redhat.com</a>> wrote:</div><br class="Apple-interchange-newline"><div class=""><div dir="ltr" class="">Hello fellow PatternFlyers!<div class=""><br class=""></div><div class="">This sprint I'm working on the conceptual design for pagination across data tables (includes card and list view)</div><div class=""><br class=""></div><div class="">I wanted to share my thoughts and progress and see if anyone had any concerns or feedback based on what is being done with tables in products to date. What works, what doesn't?</div><div class=""><br class=""></div><div class="">With the addition of pagination, all elements/controls related to pagination would be found on the bottom of the table. This includes:</div><div class=""><div class=""><ul class=""><li class="">See the number of items on a page and total number of pages<br class=""></li><li class="">See how many pages of data there is.<br class=""></li><li class="">View which page you are on (current location)<br class=""></li><li class="">Modify how many pages are being displayed.<br class=""></li><li class="">Skip to the next or previous page.<br class=""></li><li class="">Skip multiple pages.<br class=""></li><li class="">Navigate to the first/last page.</li></ul></div></div><div class="">With this story we wanted to add the ability to select all items across multiple pages. Initially, if you select all on a page, it will select all items only on that page. Then it would prompt the user to select all items across the table. I came up with two options for the "select all" option.</div><div class=""><br class=""></div><div class=""><b class="">OPTION 1</b></div><div class=""><br class=""></div><div class=""><span id="cid:ii_157d901f1fda6730" class=""><Screen Shot 2016-10-18 at 11.07.41 AM.png></span> <span id="cid:ii_157d9026585be9dc" class=""><Screen Shot 2016-10-18 at 11.07.49 AM.png></span><br class=""></div><div class="">The first option above shows a new row appearing within the table under the row headers, in the form of a message. This message informs you of how many items are selected and gives you the ability to select all. Once all are selected, you have the ability to clear selection from the within the same message. </div><div class=""><br class=""></div><div class="">Also, what would happen as you page through the table? I've seen it behave differently. In google, as you page through, the selection is cleared. In this design I didn't think that would be a great experience. </div><div class=""><br class=""></div><div class=""><u class="">Option 1 Pros</u>: the addition of the message row is obvious and will draw the users attention.</div><div class=""><u class="">Option 1 Cons:</u> Table height would have to adjust to accommodate new message row. Also, does the placement of the message make sense under the row headers? Furthermore, it's redundant to show the number of items shown twice (upper right, and in message)</div><div class=""><br class=""></div><div class=""><br class=""></div><div class=""><b class="">OPTION 2</b></div><div class=""><b class=""><br class=""></b></div><div class="">Option two addresses the cons of option 1. When selecting all items within a page, you get prompted to select all items within the table next to where it shows you total number of items selected. Same with clearing selection.</div><div class=""><br class=""></div><div class=""><span id="cid:ii_157d90841ec4fc9d" class=""><Screen Shot 2016-10-18 at 11.08.03 AM.png></span><br class=""></div><div class=""><span id="cid:ii_157d9086098ef52d" class=""><Screen Shot 2016-10-18 at 11.08.11 AM.png></span><br class=""></div><div class=""><br class=""></div><div class=""><u class="">Option 2 Pros</u>: No need for creating a new message row and shifting the table down. No redundant info.</div><div class=""><u class="">Option 3 Cons</u>: Might not be obvious that you can select all items. Does is seem hidden?</div><div class=""><br class=""></div><div class=""><br class=""></div><div class="">Let me know your thoughts, thank you!</div></div></div></blockquote><div class=""><br class=""></div><div class="">Another perspective of the pagination is not only for perusing visual sets of data. But also, for technical reasons (i.e., Memory constraints) the pages are fetched one page at a time, to conserve memory. Thousands of users with hundred of records in memory quickly bog down an application. </div><div class=""><br class=""></div><div class="">The <u class="">Select All 90 Items</u> type of operations require these large result sets to be in memory.</div><div class=""><br class=""></div><div class="">Sorry, if I’m bringing implementation details into conceptual design, but it might alter the conceptual design.</div><div class=""><br class=""></div><div class=""><br class=""></div><div class="">— Mike</div><div class=""><br class=""></div><div class=""><br class=""></div><blockquote type="cite" class=""><div class=""><div dir="ltr" class=""><div class=""><br class=""><div class=""><div class=""><br class=""></div>--<span class="Apple-converted-space"> </span><br class=""><div class="gmail_signature"><div dir="ltr" class=""><table cellpadding="0" cellspacing="0" width="530" class="" style="border-collapse: collapse; border: none; font-family: 'helvetica neue'; font-size: 14px;"><tbody class=""><tr class=""><td align="left" valign="top" width="257" class="" style="border: 0px solid rgb(1, 1, 1);"><div align="left" class=""><font color="#cc0000" class=""><font face="Arial" size="2" class=""><span class="" style="font-size: 10pt;"><b class="">Sarah Jane Cox</b></span></font> </font><font color="#010101" face="Calibri" class=""><span class="" style="font-size: 11pt;"><br class=""></span></font><font color="#999999" class=""><font face="Arial" size="1" class=""><span class="" style="font-size: 9pt;">User Interaction Designer</span></font> <font face="Calibri" class=""><span class="" style="font-size: 11pt;"><br class=""></span></font></font><font face="Arial" size="1" class=""><span class="" style="font-size: 9pt;"><font color="#999999" class="">User Experience Design Team<br class=""></font><br class=""></span></font><a href="http://www.redhat.com/about/whoisredhat/redhatstories.html?intcmp=70160000000TB9vAAG&" target="_blank" class=""><font face="arial, helvetica, sans-serif" size="2" color="#3d85c6" class="">Red Hat, Inc.</font></a><font color="#404040" face="Arial" size="1" class=""><span class="" style="font-size: 9pt;"><br class=""></span></font></div></td><td align="left" valign="top" width="272" class="" style="border: 0px solid rgb(1, 1, 1);"><div align="left" class=""><br class=""></div></td></tr></tbody></table></div></div></div></div></div>_______________________________________________<br class="">Patternfly mailing list<br class=""><a href="mailto:Patternfly@redhat.com" class="">Patternfly@redhat.com</a><br class=""><a href="https://www.redhat.com/mailman/listinfo/patternfly" class="">https://www.redhat.com/mailman/listinfo/patternfly</a><br class=""></div></blockquote></div><br class="" style="font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; float: none; display: inline !important;" class="">_______________________________________________</span><br style="font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;" class=""><span style="font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; float: none; display: inline !important;" class="">Patternfly mailing list</span><br style="font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;" class=""><a href="mailto:Patternfly@redhat.com" style="font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;" class="">Patternfly@redhat.com</a><br style="font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;" class=""><a href="https://www.redhat.com/mailman/listinfo/patternfly" style="font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;" class="">https://www.redhat.com/mailman/listinfo/patternfly</a></div></blockquote></div><br class=""></div></div></div></body></html>