<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=""><div class="">Hi Leslie.</div><div class=""><br class=""></div><div><blockquote type="cite" class=""><div class=""><div dir="ltr" class=""><div class="">SJ and Liz picked up the Data Toolbar pattern to use with the table design. This Data Toolbar is customizable but can include the Filter that you mentioned. We currently have some stories in the backlog [1] in order to get the documentation and visuals added to the site. In the meantime, check out some of the work that has already been done that might help you… </div></div></div></blockquote><div>Good, we’ll move the filter into the table then.</div><div><br class=""></div><blockquote type="cite" class=""><div class=""><div dir="ltr" class=""><div class="">The reference implementation test page can be found here: <a href="https://rawgit.com/patternfly/patternfly/master/tests/toolbar.html" class="">https://rawgit.com/patternfly/patternfly/master/tests/toolbar.html</a></div><div class=""><br class=""></div><div class="">And the angular version on ngdocs is here: <a href="http://angular-patternfly.rhcloud.com/#/api/patternfly.views.directive:pfDataToolbar" class="">http://angular-patternfly.rhcloud.com/#/api/patternfly.views.directive:pfDataToolbar</a> </div><div class="">Note: The angular version is currently shown with a data list example but you should be able to wire it up with a table. We do know of an instance where the Angular toolbar is currently being used successfully with Data Lists and Data Cards. </div></div></div></blockquote>Yes, that’s what we used to implement the component.<br class=""><br class="">Thanks for the help!</div><div>Gabriel</div><div><br class=""></div><div><br class=""><blockquote type="cite" class=""><div class=""><div dir="ltr" class="">







<div class="">Hope this helps! </div><div class="">Leslie</div><div class=""><br class=""></div><div class="">Final design story: <a href="https://patternfly.atlassian.net/browse/PTNFLY-273" class="">https://patternfly.atlassian.net/browse/PTNFLY-273</a><br class=""></div><div class="">Visual design: <a href="https://patternfly.atlassian.net/browse/PTNFLY-272" class="">https://patternfly.atlassian.net/browse/PTNFLY-272</a></div></div><div class="gmail_extra"><br class=""><div class="gmail_quote">On Tue, Nov 24, 2015 at 8:50 AM, Gabriel Cardoso <span dir="ltr" class=""><<a href="mailto:gcardoso@redhat.com" target="_blank" class="">gcardoso@redhat.com</a>></span> wrote:<br class=""><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word" class=""><div class="">Hello,</div><div class=""><br class=""></div><div class="">Really good, we need filter for data tables in Hawkular. Actually we’ve done an implementation with the filter outside the table. My question is that if this is mature enough so we can move it inside the table header, as your wireframe?</div><div class=""><br class=""></div><div class="">Thanks,</div><div class="">Gabriel  </div><div class=""><br class=""></div><br class=""><div class=""><blockquote type="cite" class=""><div class=""><div class="h5"><div class="">On Nov 23, 2015, at 4:45 PM, SJ Cox <<a href="mailto:sjcox@redhat.com" target="_blank" class="">sjcox@redhat.com</a>> wrote:</div><br class=""></div></div><div class=""><div class=""><div class="h5"><div dir="ltr" class=""><div style="margin:0px;padding:0px;border:0px;font-size:14px;font-family:'Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif;vertical-align:baseline;overflow:hidden;color:rgb(61,61,61);line-height:23.3333px" class=""><span style="margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline" class="">Hello,</span></div><div style="margin:0px;padding:0px;border:0px;font-size:14px;font-family:'Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif;vertical-align:baseline;overflow:hidden;color:rgb(61,61,61);line-height:23.3333px" class=""><span style="margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline" class=""><br class=""></span></div><div style="margin:0px;padding:0px;border:0px;font-size:14px;font-family:'Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif;vertical-align:baseline;overflow:hidden;color:rgb(61,61,61);line-height:23.3333px" class=""><span style="margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline" class="">I  just added a new post on the updated Table View pattern for PatternFly - </span><a href="https://mojo.redhat.com/external-link.jspa?url=https%3A%2F%2Fwww.patternfly.org%2Ftable-view-organize-your-data%2F" rel="nofollow" style="margin:0px;padding:0px calc(12px + 0.35ex) 0px 0px;border:0px;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(55,120,199);text-decoration:none" target="_blank" class="">Table View: Organize your Data | PatternFly</a><span style="margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline;line-height:19.4444px" class="">.</span><span style="margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline" class="">  Feel free tell us what you like and what you think we could improve upon.   Any and all feedback will be helpful with helping us to refine the design in the next iteration. Thank you!</span></div><div style="margin:10px 0px;padding:0px;border:0px;font-size:14px;font-family:'Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif;vertical-align:baseline;min-height:0px;overflow:hidden;color:rgb(61,61,61);line-height:23.3333px;width:1228px" class=""><ul style="margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline;min-height:0px;list-style:none" class=""><li style="margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline;min-height:0px;display:block;float:none" class=""><div style="margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline" class=""><div style="margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline" class=""><a href="https://www.patternfly.org/table-view-organize-your-data/" style="margin:0px 0px 10px;padding:0px;border:0px;font-weight:bold;font-style:inherit;font-size:1.1em;font-family:inherit;vertical-align:baseline;color:rgb(55,120,199);text-decoration:none;display:block" target="_blank" class="">Table View: Organize your Data</a><p style="margin:0px 0px 10px;padding:0px;border:0px;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline;line-height:18px" class="">A table organizes data into rows (of items) and columns (of item attributes). Tables make structured data easy to scan, compare, sort, and analyze. Tables can be embedded into other design patterns. Tables are familiar to users and often the correct choice for structured data, but be careful not to overuse tables.</p><span style="margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline" class=""><a href="https://www.patternfly.org/" style="margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(55,120,199);text-decoration:none;display:inline;background:transparent" target="_blank" class="">Patternfly</a></span></div></div></li></ul></div><div class=""><br class=""></div>-- <br class=""><div class=""><div dir="ltr" class="">

<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;border:none;font-family:'Helvetica Neue';font-size:14px" width="530" class="">
<tbody class=""><tr class=""><td align="left" style="border:0px solid rgb(1,1,1)" valign="top" width="257" class=""><div align="left" class=""><font color="#cc0000" class=""><font face="Arial" size="2" class=""><span style="font-size:10pt" class=""><b class="">Sarah Jane Cox</b></span></font> </font><font color="#010101" face="Calibri" class=""><span style="font-size:11pt" class=""><br class=""></span></font> <font color="#999999" class=""><font face="Arial" size="1" class=""><span style="font-size:9pt" class="">User Interaction Designer</span></font> <font face="Calibri" class=""><span style="font-size:11pt" class=""><br class=""></span></font> </font><font face="Arial" size="1" class=""><span style="font-size:9pt" class=""><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 style="font-size:9pt" class=""><br class=""></span></font></div></td><td align="left" style="border:0px solid rgb(1,1,1)" valign="top" width="272" class=""><div align="left" class=""><br class=""></div></td></tr></tbody></table></div></div>
</div></div></div><span class="">
_______________________________________________<br class="">Patternfly mailing list<br class=""><a href="mailto:Patternfly@redhat.com" target="_blank" class="">Patternfly@redhat.com</a><br class=""><a href="https://www.redhat.com/mailman/listinfo/patternfly" target="_blank" class="">https://www.redhat.com/mailman/listinfo/patternfly</a><br class=""></span></div></blockquote></div><span class="HOEnZb"><font color="#888888" class=""><br class=""><div class="">
<div class="">Gabriel Cardoso</div><div class="">UX designer @ Red Hat</div><div class=""><br class=""></div><br class="">

</div>
<br class=""></font></span></div><br class="">_______________________________________________<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" rel="noreferrer" target="_blank" class="">https://www.redhat.com/mailman/listinfo/patternfly</a><br class="">
<br class=""></blockquote></div><br class=""></div>
</div></blockquote></div><br class=""><div class="">
<div class="">Gabriel Cardoso</div><div class="">UX designer @ Red Hat</div><div class=""><br class=""></div><br class="Apple-interchange-newline">

</div>
<br class=""></body></html>