{"id":735,"date":"2018-05-15T16:35:20","date_gmt":"2018-05-15T16:35:20","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=735"},"modified":"2018-06-26T22:44:10","modified_gmt":"2018-06-26T22:44:10","slug":"usage","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/data-table\/usage\/","title":{"rendered":"Data Table Usage"},"content":{"rendered":"<p>Components<\/p>\n<h1>\n\t\tData Table<br \/>\n\t<\/h1>\n<h4>\n\t\tData tables display information in a way that\u2019s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards.<br \/>\n\t<\/h4>\n<h2>\n\t\tUsage<br \/>\n\t<\/h2>\n<p>Data tables can include:<\/p>\n<ul>\n<li>Expansion panels on rows<\/li>\n<li>Action buttons and links<\/li>\n<li>Pagination<\/li>\n<li>Tools to query and manipulate data (filters, search, etc)<\/li>\n<\/ul>\n<p>When including tools, they should be placed directly above the table.<\/p>\n<h4>\n\t\tHierarchal<br \/>\n\t<\/h4>\n<p>Data table content should be hierarchical, alphabetical, or similarly organized.<\/p>\n<h4>\n\t\tInteractive<br \/>\n\t<\/h4>\n<p>Data tables should allow user interaction, so that users can sort information in custom ways. Expansion rows should allow users to view a summary of the detail page with the opportunity for actions to be taken. Summary may include links to other related detail pages of Neon.<\/p>\n<h4>\n\t\tIntuitive<br \/>\n\t<\/h4>\n<p>Data tables should work intuitively, allowing users to focus on content, not structure.<\/p>\n<h2>\n\t\tAnatomy<br \/>\n\t<\/h2>\n<p>Data tables can include three or more columns. A header row at the top lists column names, and all subsequent rows contain data. Data tables can include a corresponding visualization, such as a graph.<\/p>\n<p>If users need to interact with row data, checkboxes should accompany each row.<\/p>\n<h4>\n\t\t1. Container<br \/>\n\t<\/h4>\n<p>Data table content should be hierarchical, alphabetical, or similarly organized.<\/p>\n<h4>\n\t\t2. Column Header<br \/>\n\t<\/h4>\n<p>Data tables should allow user interaction, so that users can sort information in custom ways. Expansion rows should allow users to view a summary of the detail page with the opportunity for actions to be taken. Summary may include links to other related detail pages of Neon.<\/p>\n<h4>\n\t\t3. Sort Tool<br \/>\n\t<\/h4>\n<p>Data tables should work intuitively, allowing users to focus on content, not structure.<\/p>\n<h4>\n\t\t4. Row Checkbox<br \/>\n\t<\/h4>\n<p>Checkboxes allow users to select a row.<\/p>\n<h4>\n\t\t5. Table Content<br \/>\n\t<\/h4>\n<p>Checkboxes allow users to select a row.<\/p>\n<h4>\n\t\t6. Hover Actions<br \/>\n\t<\/h4>\n<p>These hover actions allow for users to quickly delete or duplicate a single row without using the bulk delete checkboxes.<\/p>\n<h4>\n\t\t7. Expansion Rows<br \/>\n\t<\/h4>\n<p>The expansion row allows users to see a summary of the detail page and access other primary actions featured on that detail page. It also includes links to the detail page and other pages (if necessary).<\/p>\n<h2>\n\t\tVariations<br \/>\n\t<\/h2>\n<p>Different types of tables have different types of functionality when it comes to getting further details from rows. Some tables might need to link to a secondary detail page, while some are able to display this extended information on page.<\/p>\n<h4>\n\t\t1. Preview Table<br \/>\n\t<\/h4>\n<p>This type of table is used to preview full pages of information. A good example of this is any Email communications. Displaying a full email in an expansion would cause too big of a break in the table. The right side preview allows for users to view each rows&#8217;s preview and still scan the rest of the rows.<\/p>\n<h5><strong>Sent Emails Table<\/strong><\/h5>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/06\/Account-Detail-Table-Preview-Table.png\" alt=\"Account Detail Table - Preview Table\" itemprop=\"image\" height=\"1214\" width=\"1280\" title=\"Account Detail Table - Preview Table\"  \/><\/p>\n<h5><strong>Preview Open<\/strong><\/h5>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/06\/Account-Detail-Preview-Table-Open.png\" alt=\"Account Detail Preview Table Open\" itemprop=\"image\" height=\"1214\" width=\"1280\" title=\"Account Detail Preview Table Open\"  \/><\/p>\n<h5><strong>Status Tooltip<\/strong><\/h5>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/06\/Account-Detail-Table-Preview-Table-Copy.png\" alt=\"Account Detail Table - Preview Table Copy\" itemprop=\"image\" height=\"1214\" width=\"1280\" title=\"Account Detail Table - Preview Table Copy\"  \/><br \/>\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/plugins\/bb-plugin\/img\/pixel.png\" alt=\"\" itemprop=\"image\"  \/><\/p>\n<h4>\n\t\t2. Expansion Table (editable)<br \/>\n\t<\/h4>\n<p>Coming.<\/p>\n<h4>\n\t\t3. Expansion Table (non-editable)<br \/>\n\t<\/h4>\n<p>Coming.<\/p>\n<h4>\n\t\t4. Monitor Table<br \/>\n\t<\/h4>\n<p>Coming.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Components Data Table Data tables display information in a way that\u2019s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards. Usage Data tables can include: Expansion panels on rows Action buttons and links Pagination Tools to query and manipulate data (filters, search,&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":37,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-735","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=735"}],"version-history":[{"count":5,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/735\/revisions"}],"predecessor-version":[{"id":1232,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/735\/revisions\/1232"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/37"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}