{"id":4068,"date":"2026-10-28T04:02:28","date_gmt":"2026-10-28T04:02:28","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/advanced-data-table\/"},"modified":"2026-11-04T05:18:35","modified_gmt":"2026-11-04T05:18:35","password":"","slug":"advanced-data-table","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/advanced-data-table\/","title":{"rendered":"Advanced Data Table"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Advanced Data Table Block shows data in a table that visitors can search, sort, and page through. You can type the data in the editor or import it from a CSV file exported from Excel or Google Sheets. Visitors can also copy the rows or download them as Excel, CSV, or PDF.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use it for price lists, schedules, specifications, comparison tables, and any long list of data.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Add a Sortable, Searchable Data Table in WordPress Gutenberg | ShapeBlock Pro\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/qS4wENX_iu4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add an Advanced Data Table Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to add and configure the Advanced Data Table Block in the Gutenberg editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Advanced Data Table Block<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open a page or post in the WordPress Gutenberg editor.<\/li>\n\n\n\n<li>Click the <strong>+<\/strong> button to open the block inserter.<\/li>\n\n\n\n<li>Search for <strong>Data Table<\/strong> under ShapeBlock.<\/li>\n\n\n\n<li>Insert the Advanced Data Table Block into your page.<\/li>\n\n\n\n<li>Select the block to access its settings in the right-hand sidebar.<\/li>\n\n\n\n<li>Enter the <strong>Column count<\/strong> and <strong>Row count<\/strong> and click <strong>Create Table<\/strong>, or click <strong>Or import a CSV file<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"267\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-1.webp\" alt=\"Advanced Data Table block in the block inserter\" class=\"wp-image-4155\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-1.webp 350w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-1-300x229.webp 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure the Advanced Data Table Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the Advanced Data Table Block and open its settings in the right-hand sidebar. The available tabs are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings:<\/strong> Set the header row, search, sorting, pages, and export buttons, or import a CSV file.<\/li>\n\n\n\n<li><strong>Layout:<\/strong> Choose a table layout, row effects, and how the table looks on phones.<\/li>\n\n\n\n<li><strong>Style:<\/strong> Customize the table box, cells, header, body, footer, buttons, and single cells.<\/li>\n\n\n\n<li><strong>Advanced:<\/strong> Configure the block padding, margin, and background.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Click a cell to type in it, or click its <strong>+<\/strong> to add any block. To add or remove rows and columns, click a cell and use <strong>Edit table<\/strong> in the block toolbar: Insert row before, Insert row after, Delete row, Insert column before, Insert column after, and Delete column.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"1000\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-2.webp\" alt=\"Advanced Data Table block selected in the editor with its settings sidebar\" class=\"wp-image-4156\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-2.webp 1440w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-2-600x417.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-2-300x208.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-2-1024x711.webp 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-2-768x533.webp 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Settings Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Settings tab contains the <strong>Table<\/strong>, <strong>Search &amp; Sort<\/strong>, <strong>Pages<\/strong>, and <strong>Export &amp; Import<\/strong> panels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Table<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>First Row Is the Header:<\/strong> Use the first row as the table header. Sorting and the header style options need a header row.<\/li>\n\n\n\n<li><strong>Fixed width table cells:<\/strong> Give every column the same width instead of sizing columns to their content.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Search &amp; Sort<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sort by Clicking a Header:<\/strong> Let visitors sort the rows by clicking a column header. This option appears when the table has a header row.<\/li>\n\n\n\n<li><strong>Sort Icon:<\/strong> Choose the icon shown in the header: <strong>Arrows<\/strong>, <strong>Chevrons<\/strong>, or <strong>Up &amp; Down<\/strong>.<\/li>\n\n\n\n<li><strong>Search Box:<\/strong> Show a search box above the table. Rows that do not match are hidden as visitors type.<\/li>\n\n\n\n<li><strong>Search Placeholder:<\/strong> Enter the text shown in the empty search box.<\/li>\n\n\n\n<li><strong>Search Box Position:<\/strong> Place the search box on the Right, Center, or Left.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Pages<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Split Into Pages:<\/strong> Show the rows a page at a time, with page buttons under the table.<\/li>\n\n\n\n<li><strong>Rows per Page:<\/strong> Set how many rows each page shows.<\/li>\n\n\n\n<li><strong>Visitors Choose Rows per Page:<\/strong> Show a &#8220;Show 10 rows&#8221; list above the table.<\/li>\n\n\n\n<li><strong>Choices:<\/strong> Enter the numbers in that list, separated by commas.<\/li>\n\n\n\n<li><strong>Show &#8220;Showing 1 to 10 of 50 rows&#8221;:<\/strong> Show a line under the table with the rows on view and the total.<\/li>\n\n\n\n<li><strong>Your Own Wording:<\/strong> Optional. Write your own text for that line. <code>{start}<\/code>, <code>{end}<\/code>, and <code>{total}<\/code> are replaced by the numbers.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Export &amp; Import<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">These buttons appear above the table for visitors.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Copy Button:<\/strong> Copy the rows to the clipboard.<\/li>\n\n\n\n<li><strong>Excel Button:<\/strong> Download the rows as an Excel file.<\/li>\n\n\n\n<li><strong>CSV Button:<\/strong> Download the rows as a CSV file.<\/li>\n\n\n\n<li><strong>PDF Button:<\/strong> Open the print window, where the table can be saved as a PDF.<\/li>\n\n\n\n<li><strong>File Name:<\/strong> Enter the name of the downloaded file. This option appears when any export button is on.<\/li>\n\n\n\n<li><strong>Import CSV File:<\/strong> Replace the table with the rows of a CSV file from the Media Library or your computer.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f3edec;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Note:<\/strong> Importing a CSV file replaces the whole table, including any text you typed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"584\" height=\"1139\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-3.webp\" alt=\"Advanced Data Table block, Settings tab in the sidebar\" class=\"wp-image-4157\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-3.webp 584w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-3-154x300.webp 154w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-3-525x1024.webp 525w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Layout Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Layout tab contains the <strong>Layout<\/strong>, <strong>Rows<\/strong>, <strong>Header<\/strong>, and <strong>Phones<\/strong> panels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Layout<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Layout:<\/strong> Click a ready-made look for the table: Default, Bordered, Minimal, Card Rows, Dark, or Comparison. You can change any of it in the Style tab.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Rows<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Striped Rows:<\/strong> Give every other row a different background. Set the <strong>Stripe Color<\/strong> and <strong>Stripe Text Color<\/strong>.<\/li>\n\n\n\n<li><strong>Highlight Row on Hover:<\/strong> Change a row color when the pointer is over it. Set the <strong>Hover Background<\/strong> and <strong>Hover Text Color<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Header<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This panel appears when the table has a header row.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sticky Header:<\/strong> Keep the header in view while the table scrolls inside its box.<\/li>\n\n\n\n<li><strong>Table Height (px):<\/strong> Set the height of the scrolling box. When empty, the table uses most of the screen.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Phones<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>On Phones:<\/strong> Choose <strong>Scroll Sideways<\/strong> to keep the table as it is with a sideways scroll, or <strong>Stack Each Row as a Card<\/strong> to show each row as a card.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Style Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Style tab contains the <strong>Global<\/strong>, <strong>Header<\/strong>, <strong>Body<\/strong>, <strong>Footer<\/strong>, <strong>Search, Pages &amp; Buttons<\/strong>, and <strong>Cell<\/strong> panels. Some panels only appear when the matching feature is on.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Global<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Table Box:<\/strong> Set the <strong>Background<\/strong>, <strong>Border<\/strong>, <strong>Padding<\/strong>, and <strong>Border Radius<\/strong> of the box around the table.<\/li>\n\n\n\n<li><strong>Every Cell:<\/strong> Set the <strong>Cell Border<\/strong>, <strong>Typography<\/strong>, <strong>Cell Padding<\/strong>, and <strong>Cell Border Radius<\/strong> for all cells. The header and body can override these below.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Header<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text Color, Background, Typography:<\/strong> Style the header row.<\/li>\n\n\n\n<li><strong>Header Cells:<\/strong> Set the <strong>Padding<\/strong>, <strong>Border<\/strong>, and <strong>Border Radius<\/strong> of the header cells.<\/li>\n\n\n\n<li><strong>Sort Icon Color and Sort Icon Size (px):<\/strong> Style the sort icon. These options appear when sorting is on.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Body<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text Color, Background, Typography:<\/strong> Style the body rows.<\/li>\n\n\n\n<li><strong>Body Cells:<\/strong> Set the <strong>Padding<\/strong>, <strong>Border<\/strong>, and <strong>Border Radius<\/strong> of the body cells.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Footer<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The line under the table with &#8220;Showing 1 to 10 of 50 rows&#8221; and the page buttons.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text Color, Background, Padding, Border, Border Radius:<\/strong> Style the footer area.<\/li>\n\n\n\n<li><strong>Page Buttons:<\/strong> Set the <strong>Text Color<\/strong>, <strong>Background<\/strong>, <strong>Border<\/strong>, and <strong>Border Radius (px)<\/strong> of the page buttons. The current page uses the Accent Color.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">5. Search, Pages &amp; Buttons<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Accent Color:<\/strong> Set the color of the Copy, Excel, CSV, and PDF buttons, the current page button, and the search box while visitors type in it.<\/li>\n\n\n\n<li><strong>Rows per Page List:<\/strong> Set the <strong>Label Color<\/strong>, <strong>Text Color<\/strong>, <strong>Background<\/strong>, <strong>Border<\/strong>, <strong>Border Radius (px)<\/strong>, <strong>Width (px)<\/strong>, and <strong>Height (px)<\/strong> of the rows per page list.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">6. Cell<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cell:<\/strong> Click a cell in the table to give that cell its own <strong>Text Color<\/strong>, <strong>Background<\/strong>, <strong>Border<\/strong>, and <strong>Border Radius<\/strong>. Use it to highlight a price, a total, or a recommended plan.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1192\" height=\"1196\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-4.webp\" alt=\"Advanced Data Table block, Style tab in the sidebar\" class=\"wp-image-4158\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-4.webp 1192w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-4-300x300.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-4-100x100.webp 100w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-4-600x602.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-4-1021x1024.webp 1021w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-4-150x150.webp 150w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-advanced-data-table-4-768x771.webp 768w\" sizes=\"auto, (max-width: 1192px) 100vw, 1192px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Advanced tab provides additional spacing and background controls for the Advanced Data Table Block. These settings apply to the entire block.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Spacing<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Padding:<\/strong> Set the inner spacing around the entire Advanced Data Table Block. Configure the top, right, bottom, and left values separately.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the outer spacing around the entire Advanced Data Table Block. Configure the top, right, bottom, and left values separately.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Both controls support responsive settings for desktop, tablet, and mobile devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Background<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background:<\/strong> Customize the background of the entire Advanced Data Table Block using a background color or gradient.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f3edec;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Note:<\/strong> The background applies to the whole block area.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Live demo:<\/strong> see the Advanced Data Table Block in action on the <a href=\"https:\/\/shapekode.com\/product\/shapeblock\/advanced-data-table\/\">Advanced Data Table demo page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Advanced Data Table Block shows data in a table that visitors can search, sort, and page through. You can type the data in the editor or import it from a CSV file exported from Excel or Google Sheets. Visitors can also copy the rows or download them as Excel, CSV, or PDF. Use it [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[16,30],"doc_tag":[],"class_list":["post-4068","docs","type-docs","status-publish","hentry","doc_category-content-block","doc_category-pro-blocks"],"year_month":"2026-11","word_count":1177,"total_views":"8","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Content Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/content-block\/"},{"term_name":"Pro Blocks","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/pro-blocks\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=4068"}],"version-history":[{"count":2,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4068\/revisions"}],"predecessor-version":[{"id":5540,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4068\/revisions\/5540"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=4068"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=4068"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=4068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}