{"id":1023,"date":"2022-09-29T04:41:26","date_gmt":"2022-09-29T04:41:26","guid":{"rendered":"https:\/\/dev-plugindocs.pantheonsite.io\/?post_type=docs&#038;p=1023"},"modified":"2023-09-18T10:28:34","modified_gmt":"2023-09-18T10:28:34","password":"","slug":"stackable-table","status":"publish","type":"docs","link":"https:\/\/ninjatables.com\/docs\/stackable-table\/","title":{"rendered":"Stackable Table"},"content":{"rendered":"<p>Ninja Tables has a unique function where you can stack table rows on top of one another. This <strong>Stackable Table<\/strong> feature has contributed to Ninja Tables becoming even more user-friendly and responsive.<\/p><p>Stackable Table allows you to break down each row of any table into individual tables. It results in a stacked table arrangement that is compatible with all types of devices.<\/p><p>This easy guide explains to you how to quickly and easily build up stackable tables!<\/p><p class=\"has-background has-small-font-size\" style=\"background-color:#f1e3c170\">Note that Stackable Table and <a href=\"https:\/\/ninjatables.com\/docs\/column-responsive-breakpoints\/\">Responsive Breakpoint<\/a> will not work together. Either you can use Stackable features or Responsive Breakpoints.<\/p><ul class=\"wp-block-list\"><li>Click the\u00a0Table Design\u00a0tab placed at the top of the table you want to use the stackable features on.<\/li><\/ul><p><\/p><ul class=\"wp-block-list\"><li>Then at the bottom of the Styling tab, you will notice the\u00a0<strong>Stackable Table Configuration<\/strong>\u00a0option.<\/li><\/ul><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"534\" src=\"https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-2-1024x534.png\" alt=\"stackable table in Ninja Tables\" class=\"wp-image-12350\" srcset=\"https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-2-1024x534.png 1024w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-2-300x156.png 300w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-2-768x401.png 768w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-2-360x188.png 360w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-2-1536x801.png 1536w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-2-600x313.png 600w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-2.png 1741w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Table Design tab<\/figcaption><\/figure><\/div><ul class=\"wp-block-list\"><li>Now, select the&nbsp;<strong>Enable Stackable Table<\/strong>&nbsp;checkbox. Once this step is done, the&nbsp;<strong>Target Devices<\/strong>&nbsp;option will appear.<\/li><\/ul><p><\/p><ul class=\"wp-block-list\"><li>And make sure you click the\u00a0<strong>Update Settings<\/strong>\u00a0button to save the changes. Here you can choose your table to be displayed in a stacked format on various devices that suit your requirements, as shown below &#8211;<\/li><\/ul><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"584\" src=\"https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-3-1024x584.png\" alt=\"stackable table target device\" class=\"wp-image-12349\" srcset=\"https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-3-1024x584.png 1024w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-3-300x171.png 300w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-3-768x438.png 768w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-3-360x205.png 360w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-3-1536x876.png 1536w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-3-600x342.png 600w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-3.png 1741w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Target Device Option<\/figcaption><\/figure><\/div><ul class=\"wp-block-list\"><li>Given below is an example of a Product Listing table after enabling a stackable table on\u00a0a <strong>Tablet Device<\/strong>.<\/li><\/ul><p><\/p><ul class=\"wp-block-list\"><li>You will notice that separate tables have been generated in a stacked layout from individual rows. To adjust the columns in this device width, the row header &amp; content are placed on the left &amp; right side, respectively. This step is similarly applicable to mobile, laptop, and desktop devices.<\/li><\/ul><p><\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"853\" height=\"881\" src=\"https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-4.png\" alt=\"stackable product listing table\" class=\"wp-image-12348\" srcset=\"https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-4.png 853w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-4-290x300.png 290w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-4-768x793.png 768w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-4-360x372.png 360w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-4-600x620.png 600w\" sizes=\"(max-width: 853px) 100vw, 853px\" \/><\/figure><\/div><p><\/p><ul class=\"wp-block-list\"><li>Stackable tables can also customize the appearance of a stacked view of your table. Following the screenshot below, click on the\u00a0<strong>Hide Column Headings<\/strong>\u00a0located under the\u00a0<strong>Stacked Appearance<\/strong>\u00a0option.<\/li><\/ul><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"587\" src=\"https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-5-1024x587.png\" alt=\"stacked appearance of table\" class=\"wp-image-12347\" srcset=\"https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-5-1024x587.png 1024w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-5-300x172.png 300w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-5-768x440.png 768w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-5-360x206.png 360w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-5-1536x881.png 1536w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-5-600x344.png 600w, https:\/\/ninjatables.com\/wp-content\/uploads\/2023\/01\/stackable-table-5.png 1739w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Hide Column Settings<\/figcaption><\/figure><\/div><ul class=\"wp-block-list\"><li>You can hide column headings or internal borders from here.<\/li><\/ul><p>This is how easy it is to configure <strong>Stackable<\/strong> <strong>table<\/strong> <strong>format<\/strong> in your\u00a0Ninja<strong> <\/strong>tables!<\/p>","protected":false},"excerpt":{"rendered":"<p>Ninja Tables has a unique function where you can stack table rows on top of one another. This Stackable Table feature has contributed to Ninja Tables becoming even more user-friendly and responsive. Stackable Table allows you to break down each row of any table into individual tables. It results in a stacked table arrangement that&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"Stackable Table Configuration - Responsive Ninja Tables","_seopress_titles_desc":"Ninja Tables has a Stackable Table function where you can stack table rows on top of one another.","_seopress_robots_index":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"doc_category":[102],"doc_tag":[],"class_list":["post-1023","docs","type-docs","status-publish","hentry","doc_category-responsive-tables"],"acf":[],"year_month":"2025-02","word_count":324,"total_views":"3207","reactions":{"happy":"2","normal":"0","sad":"1"},"author_info":{"display_name":"Mohiuddin Omran","author_link":"https:\/\/ninjatables.com\/author\/omran\/"},"doc_category_info":[{"term_name":"Different Layouts &amp; Responsive Settings","term_url":"https:\/\/ninjatables.com\/docs-category\/responsive-tables\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"taxonomy_info":{"doc_category":[{"value":102,"label":"Different Layouts &amp; Responsive Settings"}]},"featured_image_src_large":false,"comment_info":2,"_links":{"self":[{"href":"https:\/\/ninjatables.com\/wp-json\/wp\/v2\/docs\/1023"}],"collection":[{"href":"https:\/\/ninjatables.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/ninjatables.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/ninjatables.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ninjatables.com\/wp-json\/wp\/v2\/comments?post=1023"}],"version-history":[{"count":0,"href":"https:\/\/ninjatables.com\/wp-json\/wp\/v2\/docs\/1023\/revisions"}],"wp:attachment":[{"href":"https:\/\/ninjatables.com\/wp-json\/wp\/v2\/media?parent=1023"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/ninjatables.com\/wp-json\/wp\/v2\/doc_category?post=1023"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/ninjatables.com\/wp-json\/wp\/v2\/doc_tag?post=1023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}